① 微信小程序入门

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

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
}

2. 在自定义组件的 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"
  }
}

2. 在页面的 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.setStorageSync 和 wx.setStorage 的区别

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