微信小程序开发思维导图

基于微信小程序开发，方便前期小白们学习操作，设计思路的基本步骤。

微信小程序

• 学习方法
  • 技术资料的获取
    • 官方的技术文档（第一手资料）
    • 项目实战资料：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" : { } }