一.微信小程序
小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
二.开放注册范围
1.企业 2.政府 3.媒体 4.其他组织
三.接入流程
1. 注册
在微信公众平台注册小程序,完成注册后可以同步进行信息完善和开发。
2. 小程序信息完善
填写小程序基本信息,包括名称、头像、介绍及服务范围等。
3. 开发小程序
完成小程序开发者绑定、开发信息配置后,开发者可下载开发者工具、参考开发文档进行小程序的开发和调试。
4. 提交审核和发布
完成小程序开发后,提交代码至微信团队审核,审核通过后即可发布(公测期间不能发布)。
1. 获取微信小程序的 AppID
登录 https://mp.weixin.qq.com ,就可以在网站的“设置”-“开发者设置”中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID 。
注意:如果要以非管理员微信号在手机上体验该小程序,那么我们还需要操作“绑定开发者”。即在“用户身份”-“开发者”模块,绑定上需要体验该小程序的微信号。本教程默认注册帐号、体验都是使用管理员微信号。
2. 创建项目
我们需要通过开发者工具,来完成小程序创建和代码编辑。
开发者工具安装完成后,打开并使用微信扫码登录。选择创建“项目”,填入上文获取到的 AppID ,设置一个本地项目的名称(非小程序名称),比如“我的第一个项目”,并选择一个本地的文件夹作为代码存储的目录,点击“新建项目”就可以了。
为方便初学者了解微信小程序的基本代码结构,在创建过程中,如果选择的本地文件夹是个空文件夹,开发者工具会提示,是否需要创建一个 quick start 项目。选择“是”,开发者工具会帮助我们在开发目录里生成一个简单的 demo。
项目创建成功后,我们就可以点击该项目,进入并看到完整的开发者工具界面,点击左侧导航,在“编辑”里可以查看和编辑我们的代码,在“调试”里可以测试代码并模拟小程序在微信客户端效果,在“项目”里可以发送到手机里预览实际效果。
3. 编写代码
创建小程序实例
点击开发者工具左侧导航的“编辑”,我们可以看到这个项目,已经初始化并包含了一些简单的代码文件。最关键也是必不可少的,是 app.js、app.json、app.wxss 这三个。其中,.js
后缀的是脚本文件,.json
后缀的文件是配置文件,.wxss
后缀的是样式表文件。微信小程序会读取这些文件,并生成小程序实例。
下面我们简单了解这三个文件的功能,方便修改以及从头开发自己的微信小程序。
app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。想了解更多可用 API,可参考 API 文档
//app.jsApp({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, getUserInfo:function(cb){ var that = this; if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo) }else{ //调用登录接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo; typeof cb == "function" && cb(that.globalData.userInfo) } }) } }); } }, globalData:{ userInfo:null }})
app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。更多可配置项可参考配置详解
{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }}
app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。
/**app.wxss**/.container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box;}
创建页面
在这个教程里,我们有两个页面,index 页面和 logs 页面,即欢迎页和小程序启动日志的展示页,他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。
每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js
后缀的文件是脚本文件,.json
后缀的文件是配置文件,.wxss
后缀的是样式表文件,.wxml
后缀的文件是页面结构文件。
index.wxml 是页面的结构文件:
<!--index.wxml--><view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view></view>
本例中使用了<view/>
、<image/>
、<text/>
来搭建页面结构,绑定数据和交互处理函数。
index.js 是页面的脚本文件,在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。
//index.js//获取应用实例var app = getApp()Page({ data: { motto: 'Hello World', userInfo: {} }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) }})
index.wxss 是页面的样式表:
/**index.wxss**/.userinfo { display: flex; flex-direction: column; align-items: center;}.userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%;}.userinfo-nickname { color: #aaa;}.usermotto { margin-top: 200px;}
页面的样式表是非必要的。当有页面样式表时,页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。
index.json 是页面的配置文件:
页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用 app.json 中的默认配置。
logs 的页面结构
<!--logs.wxml--><view class="container log-list"> <block wx:for="{{logs}}" wx:for-item="log"> <text class="log-item">{{index + 1}}. {{log}}</text> </block></view>
logs 页面使用 <block/>
控制标签来组织代码,在 <block/>
上使用 wx:for
绑定 logs
数据,并将 logs
数据循环展开节点
//logs.jsvar util = require('../../utils/util.js')Page({ data: { logs: [] }, onLoad: function () { this.setData({ logs: (wx.getStorageSync('logs') || []).map(function (log) { return util.formatTime(new Date(log)) }) }) }})
运行结果如下:
4. 手机预览
开发者工具左侧菜单栏选择"项目",点击"预览",扫码后即可在微信客户端中体验。
五.框架
小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。
响应的数据绑定
框架的核心是一个响应的数据绑定系统。
整个系统分为两块视图层(View)和逻辑层(App Service)
框架可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。
通过这个简单的例子来看:
<!-- This is our View --><view> Hello {{name}}! </view><button bindtap="changeName"> Click me! </button>
// This is our App Service.// This is our data.var helloData = { name: 'WeChat'}// Register a Page.Page({ data: helloData, changeName: function(e) { // sent data change to view this.setData({ name: 'MINA' }) }})
- 开发者通过框架将逻辑层数据中的
name
与视图层的name
进行了绑定,所以在页面一打开的时候会显示Hello WeChat!
- 当点击按钮的时候,视图层会发送
changeName
的事件给逻辑层,逻辑层找到对应的事件处理函数 - 逻辑层执行了
setData
的操作,将 name 从WeChat
变为MINA
,因为该数据和视图层已经绑定了,从而视图层会自动改变为Hello MINA!
。
页面管理
框架 管理了整个小程序的页面路由,可以做到页面间的无缝切换,并给以页面完整的生命周期。开发者需要做的只是将页面的数据,方法,生命周期函数注册进 框架 中,其他的一切复杂的操作都交由 框架 处理。
基础组件
框架 提供了一套基础的组件,这些组件自带微信风格的样式以及特殊的逻辑,开发者可以通过组合基础组件,创建出强大的微信小程序 。
丰富的 API
框架 提供丰富的微信原生 API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。
六.基础组件
框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。
什么是组件:
- 组件是视图层的基本组成单元。
- 组件自带一些功能与微信风格的样式。
一个组件通常包括
开始标签
和结束标签
,属性
用来修饰这个组件,内容
在两个标签之内。<tagname property="value"> Content goes here ...</tagename>
注意:所有组件与属性都是小写,以连字符
-
连接
属性类型
类型 | 描述 | 注解 |
---|---|---|
Boolean | 布尔值 | 组件写上该属性,不管该属性等于什么,其值都为true ,只有组件上没有写该属性时,属性值才为false 。如果属性值为变量,变量的值会被转换为Boolean类型 |
Number | 数字 | 1 , 2.5 |
String | 字符串 | "string" |
Array | 数组 | [ 1, "string" ] |
Object | 对象 | { key: value } |
EventHandler | 事件处理函数名 | "handlerName" 是 Page中定义的事件处理函数名 |
Any | 任意属性 |
共同属性类型
所有组件都有的属性:
属性名 | 类型 | 描述 | 注解 |
---|---|---|---|
id | String | 组件的唯一标示 | 保持整个页面唯一 |
class | String | 组件的样式类 | 在对应的 WXSS 中定义的样式类 |
style | String | 组件的内联样式 | 可以动态设置的内联样式 |
hidden | Boolean | 组件是否显示 | 所有组件默认显示 |
data-* | Any | 自定义属性 | 组件上触发的事件时,会发送给事件处理函数 |
bind* / catch* | EventHandler | 组件的事件 | 详见事件 |
特殊属性
几乎所有组件都有各自定义的属性,可以对该组件的功能或样式进行修饰,请参考各个组件的定义。
组件列表
基础组件分为以下七大类:
视图容器(View Container):
组件名 | 说明 |
---|---|
view | 视图容器 |
scroll-view | 可滚动视图容器 |
swiper | 滑块视图容器 |
基础内容(Basic Content):
组件名 | 说明 |
---|---|
icon | 图标 |
text | 文字 |
progress | 进度条 |
表单(Form):
标签名 | 说明 |
---|---|
button | 按钮 |
form | 表单 |
input | 输入框 |
checkbox | 多项选择器 |
radio | 单项选择器 |
picker | 列表选择器 |
picker-view | 内嵌列表选择器 |
slider | 滚动选择器 |
switch | 开关选择器 |
label | 标签 |
导航(Navigation):
组件名 | 说明 |
---|---|
navigator | 应用链接 |
多媒体(Media):
组件名 | 说明 |
---|---|
audio | 音频 |
image | 图片 |
video | 视频 |
地图(Map):
组件名 | 说明 |
---|---|
map | 地图 |
画布(Canvas):
组件名 | 说明 |
---|---|
canvas | 画布 |
客服会话:
组件名 | 说明 |
---|---|
contact-button | 进入客服会话按钮 |
七.API
框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。
说明:
- wx.on 开头的 API 是监听某个事件发生的API接口,接受一个 CALLBACK 函数作为参数。当该事件触发时,会调用 CALLBACK 函数。
- 如未特殊约定,其他 API 接口都接受一个OBJECT作为参数。
- OBJECT中可以指定
success
,fail
,complete
来接收接口调用结果。
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
API列表:
网络 API 列表:
API | 说明 |
---|---|
wx.request | 发起网络请求 |
wx.uploadFile | 上传文件 |
wx.downloadFile | 下载文件 |
wx.connectSocket | 创建 WebSocket 连接 |
wx.onSocketOpen | 监听 WebSocket 打开 |
wx.onSocketError | 监听 WebSocket 错误 |
wx.sendSocketMessage | 发送 WebSocket 消息 |
wx.onSocketMessage | 接受 WebSocket 消息 |
wx.closeSocket | 关闭 WebSocket 连接 |
wx.onSocketClose | 监听 WebSocket 关闭 |
媒体 API 列表:
API | 说明 |
---|---|
wx.chooseImage | 从相册选择图片,或者拍照 |
wx.previewImage | 预览图片 |
wx.startRecord | 开始录音 |
wx.stopRecord | 结束录音 |
wx.playVoice | 播放语音 |
wx.pauseVoice | 暂停播放语音 |
wx.stopVoice | 结束播放语音 |
wx.getBackgroundAudioPlayerState | 获取音乐播放状态 |
wx.playBackgroundAudio | 播放音乐 |
wx.pauseBackgroundAudio | 暂停播放音乐 |
wx.seekBackgroundAudio | 控制音乐播放进度 |
wx.stopBackgroundAudio | 停止播放音乐 |
wx.onBackgroundAudioPlay | 监听音乐开始播放 |
wx.onBackgroundAudioPause | 监听音乐暂停 |
wx.onBackgroundAudioStop | 监听音乐结束 |
wx.chooseVideo | 从相册选择视频,或者拍摄 |
wx.saveFile | 保存文件 |
数据 API 列表:
API | 说明 |
---|---|
wx.getStorage | 获取本地数据缓存 |
wx.setStorage | 设置本地数据缓存 |
wx.clearStorage | 清理本地数据缓存 |
位置 API 列表:
API | 说明 |
---|---|
wx.getLocation | 获取当前位置 |
wx.openLocation | 打开内置地图 |
设备 API 列表:
API | 说明 |
---|---|
wx.getNetworkType | 获取网络类型 |
wx.getSystemInfo | 获取系统信息 |
wx.onAccelerometerChange | 监听重力感应数据 |
wx.onCompassChange | 监听罗盘数据 |
界面 API 列表:
API | 说明 |
---|---|
wx.setNavigationBarTitle | 设置当前页面标题 |
wx.showNavigationBarLoading | 显示导航条加载动画 |
wx.hideNavigationBarLoading | 隐藏导航条加载动画 |
wx.navigateTo | 新窗口打开页面 |
wx.redirectTo | 原窗口打开页面 |
wx.navigateBack | 退回上一个页面 |
wx.createAnimation | 动画 |
wx.createContext | 创建绘图上下文 |
wx.drawCanvas | 绘图 |
wx.hideKeyboard | 隐藏键盘 |
wx.stopPullDownRefresh | 停止下拉刷新动画 |
开放接口:
API | 说明 |
---|---|
wx.login | 登录 |
wx.getUserInfo | 获取用户信息 |
wx.requestPayment | 发起微信支付 |
为了帮助开发者简单和高效地开发微信小程序,我们推出了全新的 开发者工具 ,集成了开发调试、代码编辑及程序发布等功能。
扫码登录
启动工具时,开发者需要使用已在后台绑定成功的微信号扫描二维码登录,后续所有的操作都会基于这个微信帐号
不能直接操作 Page.data
避免在直接对 Page.data 进行赋值修改,请使用 Page.setData 进行操作才能将数据同步到页面中进行渲染
怎么获取用户输入
能够获取用户输入的组件,需要使用组件的属性bindchange
将用户的输入内容同步到 AppService。
<input id="myInput" bindchange="bindChange" /><checkbox id="myCheckbox" bindchange="bindChange" />
var inputContent = {}Page({ data: { inputContent: {} }, bindChange: function(e) { inputContent[e.currentTarget.id] = e.detail.value }})
为什么脚本内不能使用window
等对象
页面的脚本逻辑是在JsCore
中运行,JsCore
是一个没有窗口对象的环境,所以不能在脚本中使用window
,也无法在脚本中操作组件
为什么 zepto/jquery 无法使用
zepto/jquery 会使用到window
对象和document
对象,所以无法使用。
wx.navigateTo
无法打开页面
一个应用同时只能打开5个页面,当已经打开了5个页面之后,wx.navigateTo
不能正常打开新页面。请避免多层级的交互方式,或者使用wx.redirectTo
样式表不支持级联选择器
WXSS支持以.
开始的类选择器。如:
.normal_view { color: #000000; padding: 10px;}
可以使用标签选择器,控制同一类组件的样式。如:使用input标签选择器控制<input/>
的默认样式。
input { width: 100px;}
本地资源无法通过 css 获取
background-image
:可以使用网络图片,或者 base64,或者使用<image/>
标签
如何修改窗口的背景色
使用 page 标签选择器,可以修改顶层节点的样式
page { display: block; min-height: 100%; background-color: red;}
为什么上传不成功
为了提升体验流畅度,编译后的代码包大小需小于 1MB ,大于 1MB 的代码包将上传失败。
HTTPS 请求不成功
tls 仅支持 1.2 及以上版本
网络请求的 referer
网络请求的 referer 是不可以设置的,格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html
,其中 {appid}
为小程序的 appid,{version}
为小程序的版本号,版本号为 0 表示为开发版。
为什么 map 组件总是在最上层
map
、canvas
、video
、textarea
是由客户端创建的原生组件,原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index
为多少,都无法盖在原生组件上。 原生组件暂时还无法放在 scroll-view
上,也无法对原生组件设置 css
动画。