【学习笔记】微信小程序开发手册

shawxlee

已于 2023-09-24 15:00:54 修改

阅读量921

点赞数 1

分类专栏：学习笔记 JS/jQuery 参考手册【置顶】文章标签：微信小程序学习笔记小程序

于 2023-09-13 21:12:29 首次发布

本文链接：https://blog.csdn.net/weixin_43642751/article/details/132864876

版权

参考手册【置顶】同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

学习笔记

15 篇文章 0 订阅

订阅专栏

JS/jQuery

12 篇文章 0 订阅

订阅专栏

一、小程序代码组成

1、工程目录

├── pages  //页面目录
│   │── index  //页面index
│   │   ├── index.wxml  //页面HTML
│   │   ├── index.js  //页面脚本
│   │   ├── index.json  //页面配置（可选）
│   │   └── index.wxss  //页面CSS（可选）
│   └── logs  //页面logs
│       ├── logs.wxml
│       └── logs.js
├── utils  //插件目录
├── app.js  //启动脚本
├── app.json  //全局配置
├── app.wxss  //全局CSS（可选）
├── project.config.json  //工具配置

2、JSON配置

{
  "pages":[
    "pages/index/index",  // 第一项默认为首页
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}


//！注意：JSON 文件中无法使用注释，试图添加注释将会引发报错

JSON的值只能是以下几种数据格式：

数字，包含浮点数和整数
字符串，需要包裹在双引号中
Bool值，true 或者 false
数组，需要包裹在方括号中 []
对象，需要包裹在大括号中 {}
Null

3、WXML模板

<!-- 数据绑定 -->
<text>当前时间：{{time}}</text>
<text data-test="{{test}}"> hello world</text>

<!-- 逻辑语法 -->
<text>{{ a === 10? "变量 a 等于10": "变量 a 不等于10"}}</text>
<view> {{a + b}} + {{c}} + d </view>

<!-- 条件逻辑 -->
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

<!-- 列表渲染 -->
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
<!-- wx:for-* 指定变量名 -->
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>
<!-- 某个唯一参数作为wx:key -->
<switch wx:for="{{objectArray}}" wx:key="id" > {{item.id}} </switch>
<!-- 关键字*this（item本身）作为wx:key -->
<switch wx:for="{{numberArray}}" wx:key="*this" > {{item}} </switch>

<!-- 模板 -->
<!-- name定义模板 -->
<template name="temp1">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>
<template name="temp2">……</template>
<!-- is使用模板，data传入数据 -->
<template is="temp1" data="{{...item}}"/>
<template is="{{item.index == 0 ? 'temp1' : 'temp2'}}"/>
<!--
item: {
  index: 0,
  msg: 'this is a template',
  time: '2016-06-18'
}
-->

<!-- 引用 -->
<!-- import另一个wxml后，可以使用它内部的<template>（不包含它的引用） -->
<import src="item.wxml"/>
<!-- include另一个wxml后，可以拷贝它的全部代码（不包含<template> <wxs>） -->
<include src="header.wxml"/>


<!-- ！注意：WXML要求标签必须严格闭合 -->

共有属性：

属性名	类型	描述	注解
id	String	组件的唯一标识	整个页面唯一
class	String	组件的样式类	在对应的 WXSS 中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean	组件是否显示	所有组件默认显示
data-*	Any	自定义属性	组件上触发的事件时，会发送给事件处理函数
bind/catch	EventHandler	组件的事件

4、WXSS样式

/*尺寸单位*/
.icon {
  width: 100rpx;  //在一个宽度为375物理像素的屏幕下，1rpx = 1px
  height: 200rpx;
}

//WXSS引用
@import './test.wxss'

<!-- 内联样式 -->
<view style="color: red; font-size: 48rpx"></view>
<view style="color: {{eleColor}}; font-size: {{eleFontsize}}"></view>

选择器：

选择器	类型	描述
#id	id选择器	选择拥有 id=“*” 的组件
.class	类选择器	选择所有拥有 class=“*” 的组件
element	元素选择器	选择所有文档的*组件
::after	伪元素选择器	在*组件后边插入内容
::before	伪元素选择器	在*组件前边插入内容

优先级：!important > style="" > #id > .class > element

5、JavaScript脚本

// 模块化
// exports定义模块A（moduleA.js）
module.exports = function(value){
  return value * 2;
}
// B.js中require引用模块A
var multiplyBy2 = require('./moduleA')
var result = multiplyBy2(4)

// 作用域
// app.js中定义全局变量
App({
  globalData: 1
})
// other.js中getApp()获取/修改/设置全局变量
var global = getApp()
global.globalData++
global.globalValue = 'globalValue'

脚本的执行顺序：
step1、根据 app.js 中 require 的模块顺序决定文件的运行顺序
step2、按照 app.json 中定义的 pages 的顺序，逐一执行JS

此处输入图片的描述

运行环境	逻辑层	渲染层
iOS平台	JavaScriptCore	WKWebView
Android平台	X5 JSCore	X5浏览器
小程序IDE	NWJS	Chrome WebView

二、理解小程序宿主环境

1、程序

// app.js程序构造器App()
App({
  onLaunch: function(options) {},  //小程序初始化完毕后，立即触发一次onLaunch
  onShow: function(options) {},
  onHide: function() {},
  onError: function(msg) {},
  globalData: 'I am global data'
})
// other.js获取App实例getApp()
var appInstance = getApp()
appInstance.globalData = 'change data'  // 只能通过getApp来修改全局数据


// ！注意：为避免程序混乱，不应该从其他代码里主动调用App实例的生命周期函数

App构造器的参数：

参数属性	类型	描述
onLaunch	Function	当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onShow	Function	当小程序启动，或从后台进入前台显示，会触发 onShow
onHide	Function	当小程序从前台进入后台，会触发 onHide
onError	Function	当小程序发生脚本错误，或者 API 调用失败时，会触发 onError 并带上错误信息
其他	Any	可以添加任意的函数或数据到 Object 参数中，在App实例回调用 this 可以访问

- onLaunch,onShow参数(options)：

字段	类型	描述
path	String	打开小程序的页面路径
query	Object	打开小程序的页面参数query
scene	Number	打开小程序的场景值，详细场景值请参考小程序官方文档
shareTicket	String	shareTicket，详见小程序官方文档
referrerInfo	Object	当场景为由从另一个小程序或公众号或App打开时，返回此字段
referrerInfo.appId	String	来源小程序或公众号或App的 appId，详见下方说明
referrerInfo.extraData	Object	来源小程序传过来的数据，scene=1037或1038时支持

- 以下场景支持返回 referrerInfo.appId：

场景值	场景	appId信息含义
1020	公众号 profile	页相关小程序列表返回来源公众号 appId
1035	公众号自定义菜单	返回来源公众号 appId
1036	App 分享消息卡片	返回来源应用 appId
1037	小程序打开小程序	返回来源小程序 appId
1038	从另一个小程序返回	返回来源小程序 appId
1043	公众号模板消息	返回来源公众号 appId

2、页面

// page.js页面构造器Page()
Page({
  data: { text: "This is page data." },  // 数据值不能为`undefined`
  onLoad: function(option) { },  //页面初次加载的时候，立即触发一次onLoad
  onShow: function() { },
  onReady: function() { },  //页面初次渲染完成时，立即触发一次onReady
  onHide: function() { },
  onUnload: function() { },  //页面销毁回收时，触发onUnload
  onPullDownRefresh: function() { },
  onReachBottom: function() { },
  onPageScroll: function(option) { },
  onShareAppMessage: function () { }
})

// onLoad(option)打开参数
// 跳转URL传参
wx.navigateTo({ url: 'pages/detail/detail?id=1&other=abc' })
// 目标页面接收参数
Page({
  onLoad: function(option) {
    console.log(option.id, option.other)
    // setData(data, callback)更新渲染层数据
    this.setData({
      text: 'change data'  // 只能通过setData修改data数据（不超过1024kB）
    }, function(){ })  // 更新渲染完毕后触发回调函数
  }
})

// onPageScroll(option)滚动参数
onPageScroll: function (option) {
  console.log(option.scrollTop)  // 页面在垂直方向已滚动的距离（px）
}

// onShareAppMessage定义转发内容
onShareAppMessage: function () {
  return {
    title: '自定义转发标题',
    path: '/page/user?id=123'
  }
}


// ！注意：为避免程序混乱，不应该从其他代码里主动调用Page实例的生命周期函数

Page构造器的参数：

参数属性	类型	描述
data	Object	页面的初始数据
onLoad	Function	生命周期函数–监听页面加载，触发时机早于onShow和onReady
onShow	Function	生命周期函数–监听页面显示，触发事件早于onReady
onReady	Function	生命周期函数–监听页面初次渲染完成
onHide	Function	生命周期函数–监听页面隐藏
onUnload	Function	生命周期函数–监听页面卸载
onPullDownRefresh	Function	页面相关事件处理函数–监听用户下拉动作
onReachBottom	Function	页面上拉触底事件的处理函数
onShareAppMessage	Function	用户点击右上角转发
onPageScroll	Function	页面滚动触发事件的处理函数
其他	Any	可以添加任意的函数或数据，在Page实例的其他函数中用 this 可以访问

页面路由触发方式及页面生命周期函数的对应关系：

触发时机	路由方式	路由前生命周期	路由后生命周期
小程序打开的第一个页面	初始化		onLoad, onShow
wx.navigateTo	打开新页面调用	onHide	onLoad, onShow
wx.redirectTo	页面重定向调用	onUnload	onLoad, onShow
wx.navigateBack	页面返回调用	onUnload	onShow
wx.switchTab	Tab切换调用	……	……
wx.reLaunch	重启动调用	onUnload	onLoad, onShow

- Tab 切换对应的生命周期：

当前页面	切换页面	触发的生命周期（按顺序）
TabA	TabB	A.onHide(), B.onLoad(), B.onShow()
TabA	TabB(已打开过)	A.onHide(), B.onShow()
AtoC	TabA	C.onUnload(), A.onShow()
AtoC	TabB	C.onUnload(), B.onLoad(), B.onShow()
CtoD	TabB	D.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
CtoD(转发进入)	TabA	D.onUnload(), A.onLoad(), A.onShow()
CtoD(转发进入)	TabB	D.onUnload(), B.onLoad(), B.onShow()

3、API

// 通过API接口wx.request发起网络请求
wx.request({
  url: 'test.php',
  success: function(res) { },  // 请求成功后返回res
  fail: function() { },  // 请求失败后触发
  complete: function() { }  // 成功或失败后都会触发
})

API接口分类：

接口前缀	参数	描述
wx.on*	callback（回调函数）	监听某个事件发生的接口类
wx.get*		获取宿主环境数据的接口类
wx.set*		写入数据到宿主环境的接口类
……		其他接口类

API接口回调说明：

参数名称	类型	必填	描述
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

4、事件

<!-- 绑定事件bind*/catch* -->
<view id="touch1" bind:touchstart="onTouch"> Touch me! </view>
<view id="touch2" catch:touchstart="onTouch"> Touch me! </view>

<!-- 事件冒泡与捕获capture-bind*/capture-catch* -->
<!-- 事件调用顺序：外捕获onTap2 → 内捕获onTap4 → 内冒泡onTap3 → 外冒泡onTap1 -->
<view id="outer" bind:tap="onTap1" capture-bind:tap="onTap2">
  <view id="inner" bind:tap="onTap3" capture-bind:tap="onTap4">点击我！</view>
</view>
<!-- 只触发外捕获onTap2（catch*阻止事件冒泡，capture-catch*中断捕获并取消冒泡） -->
<view id="outer" bind:tap="onTap1" capture-catch:tap="onTap2"
>
  <view id="inner" bind:tap="onTap3" capture-bind:tap="onTap4">点击我！</view>
</view>


<!-- ！注意：其他组件自定义事件，如无特殊声明都是非冒泡事件 -->

Page({
  onTouch: function(event) {
    console.log(event)  // 当事件回调触发时，接收一个事件对象event
  },
  // 点击inner时被outer的capture-catch*捕获
  onTap2: function(event) {
    console.log(event.target)  // target：触发事件的组件inner
    console.log(event.currentTarget)  // currentTarget：绑定事件的组件outer
  }
})

常见的事件类型（冒泡事件）：

类型	触发条件
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
longtap	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发
animationiteration	会在一个 WXSS animation 一次迭代结束时触发
animationend	会在一个 WXSS animation 动画完成时触发

事件对象event属性：

属性	类型	说明
type	String	事件类型
timeStamp	Integer	页面打开到触发事件所经过的毫秒数
target	Object	触发事件的源头组件的一些属性值集合
currentTarget	Object	绑定事件的当前组件的一些属性值集合
detail	Object	额外的信息
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

- target和currentTarget对象属性：

属性	类型	说明
id	String	当前组件的id
tagName	String	当前组件的类型
dataset	Object	当前组件上data-*自定义属性组成的集合

- touch和changedTouches对象属性：

属性	类型	说明
identifier	Number	触摸点的标识符
pageX, pageY	Number	距离文档左上角的距离，文档的左上角为原点
clientX, clientY	Number	距离页面可显示区域（屏幕除去导航条）左上角距离

5、兼容

// 获取宿主环境信息getSystemInfo/getSystemInfoSync
wx.getSystemInfo({
  success (res) { }
})
try {
  const res = wx.getSystemInfoSync()
} catch (e) { }
/*
  res: {
    brand: "iPhone",      // 手机品牌
    model: "iPhone 6",    // 手机型号
    platform: "ios",      // 客户端平台
    system: "iOS 9.3.4",  // 操作系统版本
    version: "6.5.23",    // 微信版本号
    SDKVersion: "1.7.0",  // 小程序基础库版本
    language: "zh_CN",    // 微信设置的语言
    pixelRatio: 2,        // 设备像素比
    screenWidth: 667,    // 屏幕宽度
    screenHeight: 375,     // 屏幕高度
    windowWidth: 667,    // 可使用窗口宽度
    windowHeight: 375,     // 可使用窗口高度
    fontSizeSetting: 16   // 用户字体大小设置
  }
*/

// 通过判断此API是否存在来做程序上的兼容
if (wx.openBluetoothAdapter) {
  wx.openBluetoothAdapter()
} else {
  wx.showModal({
    title: '提示',
    content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试'
  })
}

//判断接口及其参数在宿主环境是否可用canIUse(${API}.${method}.${param}.${options})
wx.canIUse('openBluetoothAdapter')
wx.canIUse('getSystemInfoSync.return.screenWidth')
wx.canIUse('getSystemInfo.success.screenWidth')
wx.canIUse('showToast.object.image')
wx.canIUse('onCompassChange.callback.direction')
wx.canIUse('request.object.method.GET')
//判断组件及其属性在宿主环境是否可用canIUse(${component}.${attribute}.${option})
wx.canIUse('contact-button')
wx.canIUse('text.selectable')
wx.canIUse('button.open-type.contact')

wx.canIUse参数含义：

参数段	说明	有效值
${API}	API 名字
${method}	调用方式	return, success, object, callback
${param}	参数或者返回值
${options}	参数的可选值
${component}	组件名字
${attribute}	组件属性
${option}	组件属性的可选值

三、场景应用

1、基本的布局方法——Flex布局

// 内容不确定的容器中实现垂直居中
.container {
  display: flex;  // 定义为弹性容器
  flex-direction: column;  // 项目从上到下垂直排列
  justify-content: center;   // 项目在水平轴上居中无缝排列
}

1.1 容器属性：设置容器内项目布局，也就是管理项目的排列方式和对齐方式

flex-direction属性：通过设置坐标轴，来设置项目排列方向

属性值	描述
row	（默认值）项目沿主轴排列，从左到右排列
row-reverse	项目沿主轴排列，从右到左排列
column	项目沿主轴排列，从上到下排列
column-reverse	项目沿主轴排列，从下到上排列

此处输入图片的描述

flex-wrap属性：设置是否允许项目多行排列，以及多行排列时换行的方向

属性值	描述
nowrap	（默认值）不换行。如果单行内容过多，则溢出容器
wrap	容器单行容不下所有项目时，换行排列
wrap-reverse	容器单行容不下所有项目时，向上换行排列

此处输入图片的描述

justify-content属性：设置项目在主轴方向上对齐方式，以及分配项目之间及其周围多余的空间

属性值	描述
flex-start	（默认值）项目对齐主轴起点，项目间不留空隙
center	项目在主轴上居中排列，项目间不留空隙
flex-end	项目对齐主轴终点，项目间不留空隙
space-between	项目间间距相等，第一个项目离主轴起点和最后一个项目离主轴终点距离为0
space-around	第一个项目离主轴起点和最后一个项目离主轴终点距离为中间项目间间距的一半
space-evenly	项目间间距、第一个项目离主轴起点和最后一个项目离主轴终点距离等于项目间间距

此处输入图片的描述

align-items属性：设置项目在容器的当前行的侧轴（纵轴）方向上的对齐方式

属性值	描述
stretch	（默认值）项目拉伸至填满行高
flex-start	项目顶部与行起点对齐
center	项目在行中居中对齐
flex-end	项目底部与行终点对齐
baseline	项目的第一行文字的基线对齐

此处输入图片的描述

align-content属性：多行排列时，设置行在交叉轴方向上的对齐方式，以及分配行之间及其周围多余的空间

属性值	描述
stretch	（默认值）当未设置项目尺寸，将各行中的项目拉伸至填满交叉轴。当设置了项目尺寸，项目尺寸不变，项目行拉伸至填满交叉轴
flex-start	首行在交叉轴起点开始排列，行间不留间距
center	行在交叉轴中点排列，行间不留间距，首行离交叉轴起点和尾行离交叉轴终点距离相等
flex-end	尾行在交叉轴终点开始排列，行间不留间距
space-between	行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为0
space-around	行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为行与行间间距的一半
space-evenly	行间间距、以及首行离交叉轴起点和尾行离交叉轴终点距离相等

此处输入图片的描述

1.2 项目属性：设置项目的尺寸、位置，以及对项目的对齐方式做特殊设置

order属性：设置项目沿主轴方向上的排列顺序，数值越小，排列越靠前。属性值为整数

此处输入图片的描述

flex-shrink属性：当项目在主轴方向上溢出时，通过设置项目收缩因子来压缩项目适应容器。属性值为项目的收缩因子，属性值取非负数

.itemA {
  width: 120px;  // 原始宽度
  flex-shrink: 2;  // 收缩因子（默认值为1）
}

设容器的宽度为 $w_C$ ，项目A、B、C的原始宽度分别为 ${w_a}_0$ 、 ${w_b}_0$ 、 ${w_c}_0$ ，收缩因子分别为 $s_a$ 、 $s_b$ 、 $s_c$ ；

① 若 $s_a + s_b + s_c ≥ 1$ ，则项目A的实际宽度为（向下取整）：
${w_a}_1 = {w_a}_0 - \frac{{w_a}_0 * s_a * |w_C - ({w_a}_0 + {w_b}_0 + {w_c}_0)|}{({w_a}_0 * s_a + {w_b}_0 * s_b + {w_c}_0 * s_c)}$
② 若 $s_a + s_b + s_c < 1$ ，则项目A的实际宽度为（向下取整）：
${w_a}_1 = {w_a}_0 - \frac{{w_a}_0 * s_a * |w_C - ({w_a}_0 + {w_b}_0 + {w_c}_0)| * (s_a + s_b + s_c)}{({w_a}_0 * s_a + {w_b}_0 * s_b + {w_c}_0 * s_c)}$

此处输入图片的描述

flex-grow属性：当项目在主轴方向上还有剩余空间时，通过设置项目扩张因子进行剩余空间的分配。属性值为项目的扩张因子，属性值取非负数

.itemA {
  width: 120px;  // 原始宽度
  flex-grow: 1;  // 扩张因子（默认值为0）
}

设容器的宽度为 $w_C$ ，项目A、B、C的原始宽度分别为 ${w_a}_0$ 、 ${w_b}_0$ 、 ${w_c}_0$ ，扩张因子分别为 $g_a$ 、 $g_b$ 、 $g_c$ ；

① 若 $g_a + g_b + g_c ≥ 1$ ，则项目A的实际宽度为（向下取整）：
${w_a}_1 = {w_a}_0 + \frac{|w_C - ({w_a}_0 + {w_b}_0 + {w_c}_0)|}{g_a + g_b + g_c} * g_a$
② 若 $g_a + g_b + g_c < 1$ ，则项目A的实际宽度为（向下取整）：
${w_a}_1 = {w_a}_0 + |w_C - ({w_a}_0 + {w_b}_0 + {w_c}_0)| * g_a$

此处输入图片的描述

flex-basis属性：设置或检索弹性盒伸缩基准值

// 水平伸缩
.item {
  width: auto | <number>px | <number>%
  flex-direction: row | row-reverse
  flex-basis: auto | <number>px  // 优先级更高时替换width属性值（默认值auto）
}

// 垂直伸缩
.item {
  height: auto | <number>px | <number>%
  flex-direction: column | column-reverse
  flex-basis: auto | <number>px  // 优先级更高时替换height属性值（默认值auto）
}

样式场景	优先级
width(height): auto; flex-basis: auto;	flex-basis > width(height)
width(height): auto; flex-basis: 200px;	flex-basis > width(height)
width(height): 100px; flex-basis: 200px;	flex-basis > width(height)
width(height): 100px; flex-basis: auto;	width(height) > flex-basis

此处输入图片的描述

flex属性：是flex-grow，flex-shrink，flex-basis的简写方式

.item{
  flex: none | auto | @flex-grow @flex-shrink @flex-basis
  // flex: none;  =>  flex: 0 0 auto;
  // flex: auto;  =>  flex: 1 1 auto;
}

align-self属性：覆盖容器的align-items，对项目在纵轴方向上的对齐方式做特殊处理

属性值	描述
auto	（默认值）继承父容器的 align-items 属性。如果没有父容器则为 “stretch”
stretch	项目拉伸至填满行高
flex-start	项目顶部与行起点对齐
center	项目在行中居中对齐
flex-end	项目底部与行终点对齐
baseline	项目的第一行文字的基线对齐

此处输入图片的描述

2、发起HTTPS网络通信

// 通过url参数传递数据（url最大长度1024字节）
wx.request({
  // 必须是HTTPS协议服务器接口地址，域名需在小程序管理平台进行配置
  url:'https://test.com/getinfo?id=1&version=1.0.0', 
  success: function(res) { }
})

// 通过data参数传递数据
wx.request({
  url: 'https://test.com/getinfo',
  method: 'POST',
  header: { 'content-type': 'application/json'},  // 设置参数的数据类型
  data: {
    id: 1,
    version: ['1.0.0', '1.2.3'],
    info: {
      name: 'test'
    }
  },
  success: function(res) { }
})


// 开发者工具、小程序的开发版和小程序的体验版在某些情况下允许wx.request请求任意域名

wx.request详细参数：

参数名	类型	必填	默认值	描述
url	String	是		开发者服务器接口地址
data	Object/String	否		请求的参数
header	Object	否		设置请求的 header，header 中不能设置 Referer，默认header[‘content-type’] = ‘application/json’
method	String	否	GET	（需大写）有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
dataType	String	否	json	回包的内容格式，如果设为json，会尝试对返回的数据做一次 JSON解析
success	Function	否		收到开发者服务成功返回的回调函数，其参数是一个Object
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

- success返回参数(res)：

参数名	类型	描述
data	Object/String（根据header[‘content-type’]决定）	开发者服务器返回的数据
statusCode	Number	开发者服务器返回的 HTTP 状态码
header	Object	开发者服务器返回的 HTTP Response Header

排查异常的方法：

检查手机网络状态以及wifi连接点是否工作正常;
检查小程序是否为开发版或者体验版，因为开发版和体验版的小程序不会校验域名;
检查对应请求的HTTPS证书是否有效，同时TLS的版本必须支持1.2及以上版本，可以在开发者工具的console面板输入showRequestInfo()查看相关信息;
域名不要使用IP地址或者localhost，并且不能带端口号，同时域名需要经过ICP备案;
检查app.json配置的超时时间配置是否太短，超时时间太短会导致还没收到回报就触发fail回调;
检查发出去的请求是否302到其他域名的接口，这种302的情况会被视为请求别的域名接口导致无法发起请求。

3、微信登录

// step1、获取微信登录凭证code
wx.login({
  success: function(res) {
    if (res.code) {
      // step2、（初次登录）到开发者服务器换取小程序用户id
      wx.request({
        url: 'https://test.com/login',
        data: {
          username: 'zhangsan',  // 用户输入的账号
          password: 'pwd123456',  // 用户输入的密码
          code: res.code  // 微信登录凭证code
        },
        success: function(ress) {
          if (ress.statusCode === 200) {
            console.log(ress.data.userid)  // 小程序用户id
            console.log(ress.data.session_key)  // 开发者服务器与小程序的会话密钥
            // step3、到微信服务器换取微信用户id
            wx.request({
              url: 'https://api.weixin.qq.com/sns/jscode2session',
              data: {
                appid: 'wx0a93946bf7a96d4b',  // AppID(小程序ID)
                secret: 'xxxxxxxx',  // AppSecret(小程序密钥)
                js_code: res.code,  // 微信登录凭证code（换取成功后立即失效）
                grant_type: 'authorization_code'
              },
              success: function(resss) {
                if (resss.statusCode === 200) {
                  console.log(resss.data.openid)  // 微信用户id
                  console.log(resss.data.session_key)  // 开发者服务器与微信服务器的会话密钥
                  
                  // 将小程序用户id和微信用户id绑定存储，下次登录可跳过账号密码校验
                  var user = {
                    userid: ress.data.userid,
                    openid: resss.data.openid
                  }
                }
              }
            })
          }
        }
      })
    } else {
      console.log(res.errMsg)
    }
  }
})

此处输入图片的描述

4、本地数据缓存

// 读取本地数据缓存
// getStorage异步接口在success回调才能拿到返回值
wx.getStorage({
  key: 'key1',
  success: function(res) { 
    console.log(res.data)
  },
  fail: function() { }
})
// getStorageSync同步接口立即返回值
try {
  var value2 = wx.getStorageSync('key2')
} catch (e) { }

// 写入本地数据缓存
// setStorage异步接口在success/fail回调才完成写入
wx.setStorage({
  key:"key",
  data:"value1"
  success: function() { },
  fail: function() { }
})
// setStorageSync同步接口立即写入
try{
  wx.setStorageSync('key', 'value2')
} catch (e) { }

//利用本地缓存持久存储用户登录状态
var app = getApp()
Page({
  onLoad: function() {
    // 获取微信登录凭证code
    wx.login({
      success: function(res) {
        // 换取开发者服务器登录凭证
        wx.request({
          url: 'https://test.com/login',
          data: { code: res.code },
          success: function(res) {
            // 将数据放入内存中的全局对象和本地缓存
            app.globalData.sessionId = res.data.sessionId
            wx.setStorageSync('SESSIONID', res.data.sessionId)

            var expiredTime = +new Date() +1*24*60*60*1000 // 设登录有效期为1天
            app.globalData.expiredTime =expiredTime
            wx.setStorageSync('EXPIREDTIME', expiredTime)
          }
        })
      }
    })
  }
})
// 利用本地缓存恢复用户登录状态
App({
  onLaunch: function(options) {
    var sessionId = wx.getStorageSync('SESSIONID')
    var expiredTime = wx.getStorageSync('EXPIREDTIME')
    var now = +new Date()
    if (now - expiredTime <=1*24*60*60*1000) {
      this.globalData.sessionId = sessionId
      this.globalData.expiredTime = expiredTime
    }
  },
  globalData: {
    sessionId: null,
    expiredTime: 0
  }
})


// 每个小程序的缓存空间上限为10MB，存满后再写入将触发fail回调

wx.getStorage/wx.getStorageSync详细参数：

参数名称	类型	必填	描述
key	String	是	本地缓存中指定的key
success	Function	否	异步接口调用成功的回调函数，回调参数格式: {data: key对应的内容}
fail	Function	否	异步接口调用失败的回调函数
complete	Function	否	异步接口调用结束的回调函数（调用成功、失败都会执行）

wx.setStorage/wx.setStorageSync详细参数：

参数名称	类型	必填	描述
key	String	是	本地缓存中指定的key
data	Object/String	是	需要存储的内容
success	Function	否	异步接口调用成功的回调函数
fail	Function	否	异步接口调用失败的回调函数
complete	Function	否	异步接口调用结束的回调函数（调用成功、失败都会执行）

5、设备能力

// 利用wx.scanCode获取二维码的数据
wx.scanCode({
  success: function(res) {
    console.log(res.result)
  }
})

// 利用wx.getNetworkType获取网络状态
wx.getNetworkType({
  success: function(res) {
    if (res.networkType == 'wifi') {  // wifi | 2g | 3g | 4g | unknown | none
      // 从网络上下载pdf文档
      wx.downloadFile({
        url:'http://test.com/somefile.pdf',
        success: function (res) {
          // 下载成功之后进行预览文档
          wx.openDocument({
            filePath: res.tempFilePath
          })
        }
      })
    } else {
      wx.showToast({ title: '建议使用wifi网络进行下载' })
    }
  }
})

// 利用wx.onNetworkStatusChange动态监听网络状态变化
wx.onNetworkStatusChange({ })

shawxlee

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
【学习笔记】微信小程序开发手册

一、小程序代码组成1、工程目录├── pages //页面目录│ │── index //页面index│ │ ├── index.wxml //页面HTML│ │ ├── index.js //页面脚本│ │ ├── index.json //页面配置（可选）│ │ └── index.wxss //页面CSS（可选）│ └── logs //页面logs│ ├── logs.wxml│ └── logs.j
复制链接

扫一扫