微信小程序

注册小程序账号

• 使用小程序之前，先要注册小程序账号。
• 前往：https://mp.weixin.qq.com/wxopen/waregister?action=step1
• 或参考: 注册微信小程序.md

安装微信开发者工具

• 想要开发微信小程序，必须去微信公众平台，先下载微信开发者工具，下载之后，一路 下一步 安装。

初始化小程序

• 双击打开微信开发者工具
• 填写项目信息
  • 填写小程序名称、存放目录、AppID，填写完成后，点击新建
  • 项目名称: 可以任意设置
  • 目录: 设置本地空目录
  • AppID: 注册小程序账号之后, 点击左侧导航中的“设置”，查看账号信息
  • 开发模式: 小程序
  • 后端服务: 选择”不使用云服务” （不会创建服务器端目录或者文件）

全局文件

• app.js 是小程序启动后，加载的入口文件
• app.json 是整个小程序项目的配置文件
• app.wxss 是整个小程序项目的全局样式文件

在小程序中，每个具体的页面都由四个文件组成。页面的四个文件必须具有相同的路径与文件名

• page-name.js 当前页面的入口文件
• page-name.json 当前页面的配置文件
• page-name.wxml 当前页面的内容（相当于浏览器端的 HTML）
  WXML 语法：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/
  https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/
• page-name.wxss 当前页面的样式文件，你可以在此写 CSS 代码
  WXSS语法：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

如何生成页面文件

与其他项目不同，小程序中的页面文件无需自己创建。

如果要新建页面文件，只需要在 app.json 中的 pages 字段中指定，然后保存 app.json。

 "pages":[
    "pages/qweather/index",
    "pages/index/index",
    "pages/logs/logs",
    "pages/test/test",
    "pages/test/camera"
  ],

生命周期

小程序的生命周期是指小程序生命的不同阶段。这里的周期主要指两个循环状态: 前台到后台; 初始化到销毁。

在小程序生命的不同阶段, 都会自动触发函数，可以在生命周期函数中, 添加相应业务逻辑。小程序的生命周期可以分为两类：

• 项目生命周期：描述小程序整个项目的不同阶段
• 页面生命周期：描述页面的不同阶段

项目生命周期
官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html

App({
	onLaunch (options) {
	// Do something initial when launch.
	},
	onShow (options) {
	// Do something when show.
	},
	onHide () {
	// Do something when hide.
	},
	onError (msg) {
	console.log(msg)
	},
	globalData: 'I am global data'
})

• onLaunch: 全局只调用一次（逻辑只执行一次）
• onShow: 应用初始化完成; 从后台切换到前台
• onHide: 从前台切换到后台（小程序应用转到别的应用）

页面生命周期
官网文档：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

//index.js
Page({
	data: {
		text: "This is page data."
	},
	onLoad: function(options) {
	// 页面创建时执行
	},
	onShow: function() {
	// 页面出现在前台时执行
	},
	onReady: function() {
	// 页面首次渲染完毕时执行
	},
	onHide: function() {
	// 页面从前台变为后台时执行
	},
	onUnload: function() {
	// 页面销毁时执行
	}
})

• onLoad: 小程序注册完成后，加载页面，一个页面只会调用一次
• onShow: 页面载入后，显示页面，每次打开页面都会调用一次
• onReady: 首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次
• onHide: 小程序后台运行或跳转到其他页面时，触发onHide方法
• onUnload: 当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload, 页面卸载（内存释放）

小程序的启动流程

1、小程序初始化完成后，页面首次加载触发onLoad，只会触发一次。
2、当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法。
3、当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法。

解读初始化项目

app 代码
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

• app.json
  app.json 负责全局配置，例如：设置小程序的导航条、标题、窗口背景色

  "window": {
  	"backgroundTextStyle": "light",
  	"navigationBarBackgroundColor": "#00b38a",
  	"navigationBarTitleText": "拉勾教育",
  	"navigationBarTextStyle": "white"
  },
  

  全局配置：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

• app.wxss
  app.wxss 负责全局样式，例如：.container 中使用的弹性布局。
  与 CSS 相比，WXSS 扩展的特性有：
  详情查看：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

云 API
云 API，是微信公众平台提供的，供小程序调用的接口。在示例程序中，用到的云 API 有：

其他云 API，请参考官方文档
官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/

页面跳转
在小程序中做页面跳转，主要有以下三种方式

• 链接方式
  通过 navigator 组件来实现

  # 相对地址
  <navigator url="/pages/me/my-page">my-page</navigator>
  # URL地址
  <navigator url="https://www.baidu.com/">百度</navigator>
  

  链接详情：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

• 事件方式

  • 在 .wxml 中，通过 bindtap 属性绑定 bindViewTap 事件

    <image bindtap="bindViewTap" class="userinfo-avatar" src="
    {{userInfo.avatarUrl}}" mode="cover"></image>
    

  • 在 .js 文件中声明事件

    Page({
    	bindViewTap: function(event) {
    		// console.log(event)
    		wx.navigateTo({
    			url: '../logs/logs'
    		})
    	}
    })
    

• tabBar
  在 app.json 中，通过 tabBar 字段指定。
  详情查看：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

  "tabBar": {
      "list": [{
        "pagePath": "pages/qweather/index",
        "iconPath": "static/images/featured.png",
        "selectedIconPath": "static/images/featured-actived.png",
        "text": "首页"
      }, {
        "pagePath": "pages/test/test",
        "iconPath": "static/images/search.png",
        "selectedIconPath": "static/images/search-actived.png",
        "text": "测试"
      },{
        "pagePath": "pages/index/index",
        "iconPath": "static/images/profile.png",
        "selectedIconPath": "static/images/profile-actived.png",
        "text": "用户"
      }]
    },
  

数据绑定

• 在 .js 文件中绑定数据
  • data 字段设置数据的初始值
  • this.setData 函数可以更新 data 中绑定的数据
• 在 .wxml 中展示绑定的数据
  • 展示语法是 {{变量名}}
  • WXML语法：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/

事件触发

通过组件的 bindtap 属性，可以绑定触碰事件。

事件详情：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

组件

小程序中的组件，对应HTML中的标签。

小程序不是运行在浏览器上，所以 HTML 标签不能使用。小程序中，展示页面内容的标签，称之为组件

官网提供了功能丰富的组件。详情查看官方文档
官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/