微信小程序简介（二）

文档相关

1. 开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
2. 微信公众平台：https://mp.weixin.qq.com/

开发者工具

​ 下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

使用

必选项处理

appID获取

微信公众平台进行appID获取

小程序代码构成

参考地址：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#JSON-%E9%85%8D%E7%BD%AE

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

小程序基本结构

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

小程序基本操作

• 配置信息

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

    {
      "pages": [
        "pages/index/index",
        "pages/logs/index"
      ],
      "window": {
        "navigationBarTitleText": "Demo"
      },
      "tabBar": {
        "list": [{
          "pagePath": "pages/index/index",
          "text": "首页"
        }, {
          "pagePath": "pages/logs/index",
          "text": "日志"
        }]
      },
      "networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
      },
      "debug": true
    }
    

  • 页面配置

    {
      "navigationBarBackgroundColor": "#ffffff",
      "navigationBarTextStyle": "black",
      "navigationBarTitleText": "微信接口功能演示",
      "backgroundColor": "#eeeeee",
      "backgroundTextStyle": "light"
    }
    

• 全局生命周期函数

    /**
     * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
     */
    onLaunch: function () {
      
    },
  
    /**
     * 当小程序启动，或从后台进入前台显示，会触发 onShow
     */
    onShow: function (options) {
      
    },
  
    /**
     * 当小程序从前台进入后台，会触发 onHide
     */
    onHide: function () {
      
    },
  
    /**
     * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
     */
    onError: function (msg) {
      
    }
  

  • 页面生命周期函数 -> https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html

   onLoad: function(options) {
      // 页面创建时执行
    },
    onShow: function() {
      // 页面出现在前台时执行
    },
    onReady: function() {
      // 页面首次渲染完毕时执行
    },
    onHide: function() {
      // 页面从前台变为后台时执行
    },
    onUnload: function() {
      // 页面销毁时执行
    },
    onPullDownRefresh: function() {
      // 触发下拉刷新时执行
    },
    onReachBottom: function() {
      // 页面触底时执行
    },
    onShareAppMessage: function () {
      // 页面被用户分享时执行
    },
    onPageScroll: function() {
      // 页面滚动时执行
    },
    onResize: function() {
      // 页面尺寸变化时执行
    }
  

• 组件生命周期->https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html

  Component({
    lifetimes:{
      created() {
        console.log('created,组件实例刚刚被创建好时， created 生命周期被触发')
      },
      attached() {
        console.log('组件实力进入页面节点树时候进行执行');
      },
      detached() {
        console.log('在组件实例被从页面节点树移除时执行');
      }
    }
  })
  

• 界面跳转

  • 新界面打开=>https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html

    调用 API wx.navigateTo
    使用组件 <navigator open-type="navigateTo"/>
    

  • 页面重定向

    调用 API wx.redirectTo
    使用组件 <navigator open-type="redirectTo"/>
    

  • 页面返回

    调用 API wx.navigateBack
    使用组件<navigator open-type="navigateBack">
    用户按左上角返回按钮
    

  • Tab切换

    调用 API wx.switchTab
    使用组件 <navigator open-type="switchTab"/>
    用户切换 Tab
    

  • 重启动

    调用 API wx.reLaunch
    使用组件 <navigator open-type="reLaunch"/>
    

• 数据绑定

  <view>{{message}}</view>
  

  Page({
    data:{
      message:"hello world"
    }
  })
  

• 条件渲染

  <view wx:if="{{isShow}}">条件判断显示</view>
  

  Page({
  	data:{
  		isShow:false
  	}
  })
  

• 列表渲染

  <view wx:for="{{list}}" wx:for-index="idx" wx:for-item="itemName">
    {{idx}}: {{itemName.name}}
  </view>
  

  Page({
    data: {
      list:[
        {name:'a'},
        {name:'b'}
      ]
    }
  })