原生小程序开发核心知识摘要（持续更新）

小程序基本结构

全局配置

• app.js 小程序的全局逻辑
• app.json 小程序的全局配置
• app.wxss 小程序的全局样式
• sitemap.json “网站地图”定义小程序中的页面检索规则

页面配置

• page.wxml 页面模板
• page.wxss 页面样式
• page.json 页面配置
• page.js 页面逻辑

常用的页面检索规则

允许所有页面被检索

  "rules": [{
  "action": "allow",
  "page": "*"
  }]

所有页面不允许被检索

  "rules": [{
  "action": "disallow",
  "page": "*"
  }]

path的查询参数必须不多不少刚刚好

{
  "rules":[{
    "action": "allow",
    "page": "path/to/page",
    "params": ["a", "b"],
    "matching": "exact"
  }, {
    "action": "disallow",
    "page": "path/to/page"
  }]
}

• path/to/page?a=1&b=2 => 优先索引
• path/to/page => 不被索引
• path/to/page?a=1 => 不被索引
• path/to/page?a=1&b=2&c=3 => 不被索引
• 其他页面都会被索引

参数齐全时优先检索 不齐全时不允许检索 其余页面不允许检索

{
  "rules":[{
    "action": "allow",
    "page": "path/to/page",
    "params": ["a", "b"],
    "matching": "inclusive"
  }, {
    "action": "disallow",
    "page": "path/to/page"
  }]
}

• path/to/page?a=1&b=2 => 优先索引
• path/to/page?a=1&b=2&c=3 => 优先索引
• path/to/page => 不被索引
• path/to/page?a=1 => 不被索引
• 其他页面都会被索引

排除一些查询参数

{
  "rules":[{
    "action": "allow",
    "page": "path/to/page",
    "params": ["a", "b"],
    "matching": "exclusive"
  }, {
    "action": "disallow",
    "page": "path/to/page"
  }]
}

• path/to/page => 优先索引
• path/to/page?c=3 => 优先索引
• path/to/page?a=1 => 不被索引
• path/to/page?a=1&b=2 => 不被索引
• 其他页面都不会被索引

path中含有部分查询参数时优先检索

{
  "rules":[{
    "action": "allow",
    "page": "path/to/page",
    "params": ["a", "b"],
    "matching": "partial"
  }, {
    "action": "disallow",
    "page": "path/to/page"
  }]
}

• path/to/page?a=1 => 优先索引
• path/to/page?a=1&b=2 => 优先索引
• path/to/page => 不被索引
• path/to/page?c=3 => 不被索引
• 其他页面都会被索引

全局存储(持久化存储)

const logs = wx.getStorageSync('logs') || []
wx.setStorageSync('logs', logs)

全局存储（内存存储）

设置全局数据

// app.js
App({
  ...
  
  //名字任意
  globalData: {
    userInfo: {name:"ThreeSummitChange",age:60}
  }
})

获取全局数据

getApp().globalData.userInfo

列表渲染

  <!-- wx:for="{{logs}}" 对组件内的ogs数据进行列表渲染 -->
  <!-- wx:key="timeStamp" 对logs数据中的每个item的timeStamp作为差量渲染的key -->
   <block wx:for="{{logs}}" wx:key="timeStamp">
    <text class="log-item">{{index + 1}}. {{item.date}}</text>
  </block>
  
  <!-- wx:for-item="log" 给logs下的每个item起一个别名叫log -->
  <block wx:for="{{logs}}" wx:key="timeStamp" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log.date}}</text>
  </block>

绑定事件

<!-- 点击按钮时执行页面或组件内的getUserProfile方法 -->
<button bindtap="getUserProfile"> 获取头像昵称a</button>

页面或组件内

Page({

  getUserProfile(e) {
      //事件处理逻辑
  }
})

读取开放数据（用户的各种信息）

<!-- 展示opendata.type.userNickName 前提是用户提前授权 -->
<open-data type="userNickName"></open-data>

修改响应式数据（触发页面重新渲染）

Page({
...
    onTap(e){
        // 修改页面数据=>页面重新渲染
        this.setData({
          userInfo: value1,
          hasUserInfo: value2
        })
    }
})

获取用户基础信息

// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
wx.getUserProfile({
  desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写

  // 用户授权时回调
  success: (res) => {
    console.log(res)

    // 修改页面数据=>页面重新渲染
    this.setData({
      userInfo: res.userInfo,
      hasUserInfo: true
    })
  },

  // 用户拒绝授权时回调
  fail:()=>{
    //处理逻辑
  }
})