微信小程序

1.初识小程序

• 小程序简介
• appid申请
• 微信开发者工具的使用

2.小程序代码构成

json => 程序页面配置

全局配置

页面配置

wxml => html

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
要完整了解 WXML 语法，请参考模板语法。

wxss => css

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

js => js

再ES的基础之上，增加了wx自己的一些api。详情见
https://developers.weixin.qq.com/miniprogram/dev/api/

3.常用组件

view 视图容器。

scroll-view可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。

swiper滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

text文本。

buuton按钮，绑定事件点击事件使用bindtap属性。

input输入框。该组件是原生组件，使用时请注意相关限制。

navigator页面导航。

image图片。支持JPG、PNG、SVG、WEBP、GIF 等格式。

4.小程序模板语法

数据绑定
列表渲染
条件渲染
模板
引用

5.小程序的js

小程序与页面的生命周期

小程序：

APP

getApp

页面：

Page

小程序的页面跳转传参

• 1.使用app.globaldata特性

A页面跳转时，写入数据，B页面加载时，读取数据

2. 使用类似url的方式进行传参

A页面跳转时, 设置url参数
// 前面是page地址 问号后边是参数 参数格式key=value&key=value
url = "../index/index?a=1&b=2&c=3"

B页面加载时，使用onload事件中的options参数获取

小程序的常用api

修改绑定的数据，即page中的data

this.setdata({key:value})

路由跳转

• wx.switchTab
• wx.reLaunch
• wx.redirectTo
• wx.navigateTo
• wx.navigateBack

页面交互

• wx.showToast
• wx.showModal
• wx.showLoading
• wx.showActionSheet
• wx.hideToast
• wx.hideLoading
• wx.enableAlertBeforeUnload
• wx.disableAlertBeforeUnload

本地缓存

每个微信小程序都可以有自己的本地缓存，可以通过

• wx.setStorage/wx.setStorageSync
• wx.getStorage/wx.getStorageSync
• wx.clearStorage/wx.clearStorageSync
• wx.removeStorage/wx.removeStorageSync

对本地缓存进行读写和清理。

隔离策略

同一个微信用户，同一个小程序 storage 上限为 10MB。storage 以用户维度隔离，同一台设备上，A 用户无法读取到 B 用户的数据；不同小程序之间也无法互相读写数据。

清理策略

本地缓存的清理时机跟代码包一样，只有在代码包被清理的时候本地缓存才会被清理。

网络请求

前后端交互

wx.request({
  url: 'example.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})