小程序开发---“逆战版”

1. 如何创建小程序项目

这一步在官方文档中的描述已经很清楚了,主要分为几步:

1.申请账号,拥有小程序账号。
2.在小程序管理平台,可以看到小程序的 AppID与AppSecret。

绑定在一个微信开放平台账户下的订阅号、服务号、小程序、APP、PC网站都叫做”应用“,每个应用都有自己的AppID和AppSecret,AppID叫做应用唯一标识,AppSecret叫做应用**。
AppID与AppSecret 的作用及使用方式:
在开发过程中如果要使用微信相关功能,必须有官方认证的账号密码
小程序项目中app.js的data需要添加appid和secret属性,二者配合使用,可调用公众号的接口能力

3.管理员需要将开发人员的微信号设置为开发者账号才可以进行小程序的开发
4.安装开发工具
5.简要介绍开发工具
6.微信小程序和公众号开发有自己的微信开发工具,集成了公众号网页调试和小程序调试两种开发模式。

2. 小程序配置 : 全局&页面

app.json是小程序的全局配置,包括小程序的所有页面路径、界面表现、底部 tab 等,一般包含几个字段:pages、window、tabBar
小程序开发---“逆战版”
pages字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段 —— 定义小程序所有页面的顶部背景颜色,文字颜色定义等。
tabBar字段 —— 定义小程序底部tab栏的表现,以及 tab 切换时显示的对应页面。

小程序开发---“逆战版”

页面配置

一个小程序页面由四个文件组成:

  1. .json 后缀的 JSON 配置文件
  2. .wxml 后缀的 WXML 模板文件
  3. .wxss 后缀的 WXSS 样式文件
  4. .js 后缀的 JS 脚本逻辑文件

每个小程序页面可以使用自己的.json文件来对本页面的窗口表现进行配置。
页面配置一般包括导航栏标题文字内容(navigationBarTitleText),是否开启下拉刷新(enablePullDownRefresh)等等。

页面的配置只能设置 app.json 中部分 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。

3.小程序组件及页面介绍

小程序为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。
组件是视图层的基本组成单元,一个组件通常包括 开始标签 和 结束标签,属性 用来修饰这个组件,内容 在两个标签之内。
小程序开发---“逆战版”

页面的生命周期:

小程序开发---“逆战版”

  1. 小程序注册完成后,加载页面,触发onLoad方法。
  2. 页面载入后触发onShow方法,显示页面。
  3. 首次显示页面,会触发onReady方法,渲染页面元素和样式,一个页面只会调用一次。
  4. 当小程序后台运行或跳转到其他页面时,触发onHide方法。
  5. 当小程序有后台进入到前台运行或重新进入页面时,触发onShow方法。
  6. 当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack(),触发onUnload

页面之间的通讯

在父组件调用子组件的地方,添加一个自定义的属性,属性的值就是要传递给子组件的值,如果值是一个变量,boolean,或者是number类,需要使用{}包裹
小程序开发---“逆战版”

  • 子组件 使用 prop-types 进行数据的校验,校验完毕。
  • 在子组件(类组件)通过 this.props.自定义的属性名 就可以访问数据
  • 如果组件时函数式组件,通过 props.自定义的属性名 访问数据

4.如何使用微信提供的API

为了让开发者可以很方便的调起微信提供的能力,例如获取用户信息、微信支付等等,小程序提供了很多 API 给开发者去使用。

调起本地相册选择图片或使用相机拍照功能(适用于更换头像):
小程序开发---“逆战版”
发送网络请求:
小程序开发---“逆战版”
更多的 API 能力见 小程序的API。