① 微信小程序入门

最最重要的还是得从阅读开发文档入手

1. 目录结构

1.1 微信小程序文件结构

wxml[结构] + wxss[样式] + js[逻辑] + json[配置]

2. 配置

2.1 全局配置 -- 根目录下的 app.json

2.2 页面配置

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。

页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。

3. 小程序框架

  • 通过 App() 来注册一个小程序

  • 通过 Page() 来注册一个页面

  • 通过 Component() 来注册组件

整个小程序只有一个App实例

3.1 注册小程序

  1. app.js 中调用 App()注册小程序实例

  2. 整个小程序只有一个 App 实例,是全部页面共享的

  3. 开发者可以通过 getApp() 方法获取到全局唯一的 App实例,获取App上的数据或调用开发者注册在App上的函数。

3.2 生命周期

// app.js
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',
// 不要在定义于App()内的函数中调用getApp(),使用this就能拿到app实例
// globalData: {
//     data1: 'data1Value'
// }
})

3.3 注册页面

  • 小程序页面在对应的 js 文件中使用Page()进行注册

  • 指定页面的初始数据、生命周期回调、事件处理函数等

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // *数据
  customData: {
    hi: 'MINA'
  }
})

3.4 使用Component构造器构造页面

  • Component构造器的主要区别是:方法需要放在 methods: { } 里面
Component({
  data: {
    text: "This is page data."
  },
  methods: {
    onLoad: function(options) {
      // 页面创建时执行
    },
    onPullDownRefresh: function() {
      // 下拉刷新时执行
    },
    // 事件响应函数
    viewTap: function() {
      // ...
    }
  }
})

3.5 自定义组件

3.5.1 组件自定义步骤
  1. 首先需要在 json文件中进行自定义组件声明
// .json
{
  "component": true
}
  1. 在自定义组件的 js 文件中,需要使用 Component() 来注册组件,并提供组件的属性定义、内部数据和自定义方法。
// .js
Component({
  properties: {
    // 这里定义了innerText属性,属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})
3.5.2 使用自定义组件
  1. 在页面的 json 文件中进行引用声明
{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}
  1. 在页面的 wxml 中就可以像使用基础组件一样使用自定义组件
  • 节点名即自定义组件的标签名,节点属性即传递给组件的属性值
<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <component-tag-name inner-text="Some text">
</component-tag-name>
</view>
3.5.3 注意
  • 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合,所以自定义组件的标签名也只能包含这些字符。

  • 自定义组件也是可以引用自定义组件的,引用方法类似于页面引用自定义组件的方式(使用 usingComponents 字段)。

  • 自定义组件和页面所在项目根目录名不能以“wx-”为前缀,否则会报错。

4. 页面路由

在小程序中所有页面的路由全部由框架进行管理, 框架以__栈__的形式维护了当前的所有页面

4.1 页面栈

4.2 注意点

  • navigateTo, redirectTo 只能打开非 tabBar 页面。

  • switchTab 只能打开 tabBar 页面。

  • reLaunch 可以打开任意页面。

  • 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar

  • 调用页面路由带的参数可以在目标页面的 onLoad 中获取

5. 模块化

  • 将公共代码抽离到 js文件,通过 module.exports 暴露接口

  • 在需要使用这些模块的文件中,使用 require 将公共代码引入

6. 事件系统

6.1 绑定事件

  • bindtap

  • catchtap -- 不冒泡

如果一个view有多个bindtap,只走最后一个

如果一个view同时有bindtap和catchtap,只走catchtap

6.2 双向绑定

<view class="list">
<text class="list_left">身份证号:</text>
    <input value="{{infodata.idCard}}" data-type="idCard" bindinput="inputChange"/>
</view>
inputChange(e){
    var content = e.detail.value
    var type = e.currentTarget.dataset.type
    switch (type) {
      case "idCard":
        this.setData({
          ["infodata.idCard"]: content
        })
        break;
    }
}

6.3 发起https网络通信

function indexStore(store_id, cb) {
    wx.request({
        url: urlSet.indexStore,
        header: {
            "content-type": "application/x-www-form-urlencoded"
        },
        methods: "post",
        data: util.json2Form({
            store_id: store_id
         }),
        complete: function(res) {},
        fail: function() {
            return typeof cb == "function" && cb("获取店铺信息失败", false)
        }
    })
}

6.4 微信登录

6.5 本地数据缓存

  • wx.getStorageSync | wx.getStorage

  • wx.setStorageSync | wx.setStorage

  • wx.setStorageSyncwx.setStorage 的区别

    • wx.setStorage(object) 是一个异步接口,参数object包含key和data(需要存储的内容)
      • 3个回调函数
        • success(接口调用成功的回调函数)
        • fail(接口调用失败的回调函数)
        • complete(接口调用结束的回调函数,调用成功、失败都会执行)
    • wx.setStorageSync(key,data) 是一个同步接口,需要接受key和data(String/Object)2个参数