QuickShare

微信小程序

开发账号

  • 进入小程序注册页，填写信息和提交资料，申请自己的小程序账号。
  • 登录小程序后台，拿到小程序的AppID。
  • 安装开发工具。
  • 新建项目，选择小程序项目，选择代码存放路径，填入AppID，点击确定，创建好一个新的小程序项目。

代码构成

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

目录结构

主体部分：

  • app.js：小程序逻辑；
  • app.json：小程序公共配置；
  • app.wxss：小程序公共样式；

各自页面的 page：

  • js：页面逻辑；
  • wxml：页面结构；
  • json：页面配置；
  • wxss：页面样式；

生命周期

应用生命周期


目录结构

  • 用户首次打开小程序，触发 onLaunch（全局只触发一次）
  • 小程序初始化完成后，触发onShow方法，监听小程序显示
  • 小程序从前台进入后台，触发 onHide方法
  • 小程序从后台进入前台显示，触发 onShow方法
  • 小程序后台运行一定时间，或系统资源占用过高，会被销毁

页面生命周期


目录结构

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

应用生命周期影响页面生命周期


目录结构

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

路由

路由方式 触发时机 路由前页面 路由后页面
初始化 小程序打开的第一个页面 onLoad，onShow
打开新页面 调用 API wx.navigateTo
使用组件 <navigator open-type="navigateTo"/>		 onHide onLoad, onShow
页面重定向 调用 API wx.redirectTo
使用组件 <navigator open-type="redirectTo"/>		 onUnload onLoad, onShow
页面返回 调用 API wx.navigateBack
使用组件<navigator open-type="navigateBack">
用户按左上角返回按钮		 onUnload onShow
Tab 切换 调用 API wx.switchTab
使用组件 <navigator open-type="switchTab"/>
用户切换 Tab
重启动 调用 API wx.reLaunch
使用组件 <navigator open-type="reLaunch"/>		 onUnload onLoad, onShow

自定义组件

  • 在pages文件夹同级目录下新建文件夹components。

  • 新建组件目录，目录下包含文件，和页面的结构相同。

    目录结构

  • 修改.json文件夹内容

{
  "component": true,
  "usingComponents": {},
  "componentGenerics": {
    "selectable": true
  }
}
1
2
3
4
5
6
7
  • 修改.js文件内容，改为组件下包含的函数。
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },
  ......
1
2
3
4
5
6
7
8
  • 小程序页面引入组件。 修改小程序页面下的.json文件，引入组件，小程序页面就可以直接使用组件，进行字符组件之间的数据传输。
{
  .....
"usingComponents": {
    "second": "../../components/childSecond/second",
    "test": "../../components/childFirst/test"
  }
  ......
}
1
2
3
4
5
6
7
8
<view>
    <test generic:selectable="second">
    </test>
</view>
1
2
3
4

（1）.wxml文件直接传输数据
（2）事件传输数据
（3）父组件通过 this.selectComponent 方法获取子组件实例对象，直接访问数据和方法

发布

← node与mysql数据交互 →