导图社区 微信小程序开发思维导图
基于微信小程序开发,方便前期小白们学习操作,设计思路的基本步骤。
社区模板帮助中心,点此进入>>
互联网9大思维
安全教育的重要性
组织架构-单商户商城webAPP 思维导图。
个人日常活动安排思维导图
域控上线
西游记主要人物性格分析
17种头脑风暴法
python思维导图
css
CSS
微信小程序
学习方法
技术资料的获取
官方的技术文档(第一手资料)
项目实战资料:github
技术了解
为什么会出现这项技术
解决的问题是什么
开发前的准备
官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/framework/
账号注册:https://mp.weixin.qq.com/wxopen/waregister?action=step1
需要的邮箱账号:必须是没有注册使用过腾讯平台其他服务的邮箱
账号类型:个人
下载开发工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
创建小程序项目
项目的存储路径:必须是一个空的文件夹,文件夹的命名通常是项目的名称
APPID:注册时,会自动分配一个appid;作用是方便开发过程中实时的在手机上预览效果
项目文件系统结构(云开发案例)
cloudFunctions云函数文件夹
miniProgram文件夹
components文件夹:组件
images文件夹:图片文件夹
pages文件夹:项目中所有的页面都放在这个文件夹中
*.json:页面配置文件
*.js:页面的业务逻辑文件,包括页面初始化数据data和页面的生命周期函数
*.wxml:页面的结构文件
*.wxss:页面的样式文件
页面注册
所有的小程序中的页面必须通过注册的方式来实现添加,即在app.json文件的pages配置项中进行配置
设置编译模式,让模拟器显示需要查看的页面
style文件夹:一般用来放置通用的样式,命名通常会用base.wxss命名
app.js:项目级的业务逻辑文件
app.json:项目级的配置文件
pages配置项:整个小程序项目的页面配置,最核心的功能是注册页面
window配置项:页面风格的配置
tabbar配置项:标签导航配置
数量限制:2~5项
WXML语法
数据绑定
语法:通过双大括号,将需要引入的数据通过变量的方式,写在大括号里面,具体的变量值写在对应的js文件的data中
目的:灵活的处理页面需要展示的内容
列表渲染
语法:通过组件的wx:for属性,去绑定一个数组,数组的值在js的data中进行配置;其中,在wxml文件中,通过item关键字来表示数组的元素,通过index关键字来表示数组元素的下标值
目的:简化页面结构代码的编写量
条件渲染
语法:通过组件的wx:if属性,去绑定一个逻辑值,根据逻辑值的结果来判定内容是否显示;当值为true的时候,显示对应的内容,为false的时候,不显示;
目的:控制页面元素的显示
模板的使用
语法:使用template组件,在定义的时候,设置name属性;在调用的时候,使用is属性;is属性的值就是定义时name属性的值;
模板在定义的时候,不会显示,只有在调用的时候,才能显示;
小结
项目的创建
需要一个空的文件夹
需要APPID
创建使用云服务的项目
页面的注册
在app.json文件的pages配置项中进行数组元素的添加,来实现页面的注册
底部标签导航的设计
在app.json文件中,对tabbar配置项进行配置
必配项:list,数据类型是数组,数组元素的数据类型又是对象
wxml的语法
数据绑定:将页面中需要显示的内容,灵活处理;语法:{{ }}
列表渲染(wx:for):通过对数组进行遍历来重复显示相同的结构内容;数组元素的关键字用的是item,数组元素的下标值关键字是index
条件渲染(wx:if):直接通过对变量的逻辑值进行判定,来决定是否显示某个元素内容
模板:使用template组件来实现;首先,我们需要定义模板,在template中使用name属性来定义模板;其次,调用模板,在template中使用is属性来调用模板;
定义的模板不会显示
调用模板中,is属性的值与定义模板中name属性的值相同
引用:通过import组件的src属性,将需要的模板所在的wxml文件引入到当前的文件;
组件的使用
封装了很多特有的属性
API的使用
所谓的API,就是应用程序接口,其本质就是方法,从语法上讲就是配了参数(不一定完全是)的函数;
云开发
开通云开发功能
云数据库
云数据库的初始化
在需要使用云数据库的页面的JS文件顶部,进行初始化,最好是配置云环境;例如:const db = wx.cloud.database({ env:'cloudtest-omcz3' })
在云数据库操作的过程中,基本上都是使用方法来实现的,其中,方法的参数主要有两种类型,第一种,字符串型,通常使用单引号;第二种,对象型;
登录功能实现的思路
如何获取用户在输入框中输入的数据
在文本框组件中绑定一个bindinput的事件
事件的功能是:通过e.detail.value来获取用户输入的值
获取用户数据集合中的数据,最终是通过参数res.data来存储的,注意:res.data是一个数组,其中数组的每个元素是一个JSON对象
业务逻辑判断并实现用户登录
页面的跳转:如果是标签导航页,则使用wx.switchTab()方法实现跳转;如果是非标签导航页,则可以使用wx.navigateTo()方法实现
简单的学习资源
网站
https://www.cnblogs.com/shenzikun1314/articles/7805168.html
JSON的语法格式
定义:key-value键值对
格式:{ "key":"value", "key": [ ] , "key" : { } }