微信公众平台
体验小程序
微信开发者工具
小程序项目结构
代码构成
pages/ ---------------- 页面（组件），所有页面都应该放到这个目录中
index/ ------------- index页面文件夹
index.js ---------- index页面的逻辑代码
index.wxml -------- index页面的HTML结构
index.wxss -------- index页面的CSS样式
index.json -------- 页面配置（可选）
utils/ ---------------- 公共工具（函数）
app.js ---------------- 入口文件
app.json -------------- 全局配置（包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等）
app.wxss -------------- 全局样式（CSS）
project.config.json --- 开发工具配置（例如ES6转ES5、界面颜色、编译配置等）
|
配置
全局配置: app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等
页面配置 配置本页面的窗口表现 ， 同全局配置中的 window 项配置，如果页面中的配置与全局配置冲突，是以页面配置为准
页面路径列表-pages 配置项
- 所有需要展示的页面都要在
app.json 中进行配置，pages 数组的第一项表示进入小程序的默认页面
- 每一项开头不需要添加
/，否则报错
- 推荐：所有页面放到
pages 目录中，文件名称与文件夹名称相同
- 说明：在
app.json 中配置 pages，可以快速创建页面
标签栏 - tabBar 配置
- 当设置 position 为 top 时，将不会显示 icon
- tabBar 中的 list 是一个数组，只能配置最少 2 个、最多 5 个 tab，tab 按数组的顺序排序
- list 中每一个菜单项的
pagePath属性必须在 pages 中配置
- 文字颜色以及选中项文字颜色，只能统一设置不能单独设置
- 注意：没有出现在
tabBar.list 的 pagePath 页面不展示标签栏
WXML
https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/
数据绑定
Page({
data: {
msg: 'hello',
isCheck: true
}
})
|
<text>{{ msg }}</text>
<input type="text" value="{{ msg }}" />
<checkbox checked="{{isCheck}}"></checkbox>
|
绑定数据的具体类型(Booleal)
<checkbox checked="false"></checkbox>
<checkbox checked="{{false}}"></checkbox>
<checkbox checked="{{'false'}}"></checkbox>
|
运算
Page({
data: {
flag: 0,
a: 1,
b: 2,
c: 4,
d: 8,
length: 3,
name: 'zs'
}
})
|
<view hidden="{{flag === 0 ? true : false}}">hidden</view>
<view>{{ 10 + a + b}} + {{c}} + d</view>
<checkbox checked="{{a > b}}"></checkbox>
<checkbox checked=" {{a > b}}"></checkbox>
<view wx:if="{{length > 5}}">逻辑判断</view>
<view>{{ 'name:' + name }}</view>
|
注意： 花括号与引号间不要有空格，否则被解析成字符串
条件渲染
https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html
wx:if
<view wx:if="{{ isLoading }}">
<text>数据加载中...</text>
</view>
<view wx:else>
<text>搞定啦~</text>
</view>
<block wx:if="{{ isLoading }}">
<text>小明</text>
<text>小红</text>
</block>
|
hidden
<view hidden="{{ isLoading }}">
<text>搞定啦~</text>
</view>
|
列表渲染
https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html
wx:for：遍历数组，在元素中通过 index 获取索引号，通过 item 获取当前项wx:for-index="i"：替换默认的 indexwx:for-item="v"：替换默认的 item- 注意：遍历时，需要添加
wx:key 属性，来提高渲染性能 (wx:key 的值不需要添加 item.)，如 wx:key="id"，如果 item 本身是一个唯一的字符串或者数字，可以使用保留关键字 *this(代表在 for 循环中的 item 本身) 作为 key 值
<view wx:for="{{ list }}" wx:for-index="i" wx:for-item="v" wx:key="id">
{{i}}: {{v.message}}
</view>
|
注意：1. 也可以用来渲染一个对象，index 表示 key，item 表示 value。2. 可以用一个 block 标签包裹，将循环写在 block 标签上，且 block 标签并不会渲染到 dom 中
<block wx:for="{{[1, 2, 3]}}">
<view>{{index}}:</view>
<view>{{item}}</view>
</block>
|
模板
https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/template.html
定义模板
<template name="msgItem">
<view>
<text>{{index}}: {{msg}}</text>
</view>
</template>
|
可以将模板写在单独的一个 wxml 文件中，并通过 import 导入使用
使用模板
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入
注意：is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板
<template is="msgItem" data="{{...item}}" />
|
Page({
data: {
item: {
index: 0,
msg: 'this is a template'
}
}
|
模板的作用域
模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 <wxs /> 模块
引用
https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/import.html
import
import可以在该文件中使用目标文件定义的template，如：
在 item.wxml 中定义了一个叫item的template：
<template name="item">
<text>{{text}}</text>
</template>
|
在 index.wxml 中引用了 item.wxml，就可以使用item模板：
<import src="item.wxml" />
<template is="item" data="{{text: 'forbar'}}" />
|
import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。
include
include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置
WXSS
WXSS(WeiXin Style Sheets)，用于描述 WXML 的组件样式
与 css 相比，WXSS 扩展的特性有：
WXSS 中的注释需要使用多行注释
全局样式、局部样式： app.wxss page.wxss
动态样式：
style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
如果通过 wxss 使用背景图片，不能使用本地资源图片，可以使用网络图片，或者 base64；推荐使用<image/>标签来展示图片
<view style="color:{{color}};" />
<view class="{{myclass}}" />
|
选择器
目前支持的选择器有：.class #id element ::after ::before
基本组件
https://developers.weixin.qq.com/miniprogram/dev/component/
view 组件（标签）
类似于 HTML 中的 div，用来布局
hover-class 属性，指定按下去的样式类，其他属性使用见：https://developers.weixin.qq.com/miniprogram/dev/component/view.html
text 组件
类似于 HTML 中的 span，行内元素
| 属性 |
类型 |
默认值 |
必填 |
说明 |
| selectable |
boolean |
false |
否 |
文本是否可选（长按文本） |
| space |
string |
|
否 |
显示连续空格 |
| decode |
boolean |
false |
否 |
是否解码 |
详细使用文档： https://developers.weixin.qq.com/miniprogram/dev/component/text.html
注意：如果想要文本选中功能，必须使用 text 标签，并且添加 selectable 属性，除了文本节点以外的其他节点都无法长按选中
text 标签中只能嵌套 text 标签
decode 可以解析的有 < > & '    
可以使用 \n 来换行，在编辑器中按回车键换行也会解析出换行
icon 组件
https://developers.weixin.qq.com/miniprogram/dev/component/icon.html
使用 type 指定 icon 的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
https://developers.weixin.qq.com/miniprogram/dev/component/button.html
注意：如果设置了 type 属性，hover-class 属性会失效
输入框。该组件是原生组件
属性：
placeholder-style: 指定 placeholder 的样式
placeholder-class: 默认值 input-placeholder 指定 placeholder 的样式类
maxlength: 默认 140，设置最大输入长度，设置为 -1 的时候不限制最大长度
cursor-spacing: 默认 0，指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
confirm-type: 默认 done，设置键盘右下角按钮的文字，仅在 type=’text’时生效
adjust-position: 默认 true，键盘弹起时，是否自动上推页面
image 图片组件
https://developers.weixin.qq.com/miniprogram/dev/component/image.html
image 标签是 web 中 img 标签和背景图片的结合体
常用属性
src：图片资源地址
mode：图片裁剪、缩放的模式
lazy-load：图片懒加载，在即将进入一定范围（上下三屏）时才开始加载
show-menu-by-longpress: 开启长按图片显示识别小程序码菜单
binderror: 当错误发生时触发，用于图片加载失败时显示默认图片
注意：图片有默认宽高，默认宽高为：320 * 240 px；默认不会保持宽高比
swiper 轮播组件
默认宽度 100%，高度 150px
https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
navigator
https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html
| 属性 |
类型 |
默认值 |
必填 |
说明 |
| target |
string |
self |
否 |
在哪个目标上发生跳转，默认当前小程序 |
| url |
string |
|
否 |
当前小程序内的跳转链接 |
| open-type |
string |
navigate |
否 |
跳转方式 |
open-type 的合法值
| 值 |
说明 |
| navigate |
对应 wx.navigateTo |
| redirect |
对应 wx.redirectTo |
| switchTab |
对应 wx.switchTab |
| reLaunch |
对应 wx.reLaunch |
| navigateBack |
对应 wx.navigateBack |
| exit |
退出小程序，target="miniProgram" 时生效 |
wx.navigateTo ，保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
wx.redirectTo 的功能，关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.switchTab 的功能，跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.reLaunch 的功能，关闭所有页面，打开到应用内的某个页面
wx.navigateBack 的功能，关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
getCurrentPages
url 可以使用绝对路径或相对路径，使用绝对路径时需要添加 /
<navigator url="/pages/index/index" open-type="navigate">sdfsf</navigator>
<navigator url="./index/index" open-type="navigate">sdfsf</navigator>
|
自定义组件
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html
普通页面也可以使用 Component 构造器来创建，提供 observers 支持数据监听，类似 vue 中的 watch
还可以扩展 conputed，类似 vue 计算属性
数据操作
全局数据
app.js
App({
globalData: {
url: 'hhh'
}
})
|
在 app.js 文件中，直接使用
this.globalData.url
this.globalData.url = 'qqq'
|
在其他非 app.js 文件中使用
let App = getApp()
let url = App.globalData.url
App.globalData.url = 'hhh'
App.globalData.name = 'zs'
|
页面内数据
获取数据
getMsg () {
console.log(this.data.msg)
}
|
修改数据
- setData
setData()：更新数据
- 说明：将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）
- 修改 data 中的数据
- 更新视图，也就是说：视图中使用该数据的地方会重新渲染
changeMsg () {
this.setData({
name: "jack"
}, function () {
})
}
|
注意：小程序中的数据不是双向绑定的，而是单向的！！！所以，无法直接修改 data 中的数据来将数据的变化显示在页面中，即通过 this.data.msg = '修改后的数据' 方式修改数据后，页面中不会显示该数据的变化
<input value="{{ input }}" bindinput="inputChangeHandle" />
|
Page({
inputChangeHandle: function(e) {
this.setData({ input: e.detail.value })
}
})
|
事件处理
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
- 绑定事件：
bindtap、catchtap
- 说明：bind 事件绑定不会阻止冒泡事件向上冒泡，catch 事件绑定可以阻止冒泡事件向上冒泡
事件对象可以携带额外信息，如 id, dataset, touches：通过标签的自定义属性data-*，实现给事件传递参数（不能使用函数调用的形式）
连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符：data-element-type ，最终会呈现为 event.currentTarget.dataset.elementType，data-elementType ，最终会呈现为 event.currentTarget.dataset.elementtype
mark 也可以用于承载一些自定义数据（类似于 dataset ）
<button bindtap="sayHi" data-msg="zs">按钮</button>
|
Page({
sayHi(event) {
console.log(event)
console.log('单击事件触发了', event.currentTarget.dataset.msg)
}
})
|
WXS
作用： 辅助构建页面结构的
不支持 es6 语法
<!-- 语法结构 -->
<wxs module="tools">
function fn (arg) {
return arg + 10
}
// 导出一个对象
module.exports = { fn: fn }
</wxs>
<!-- 使用 -->
<view>使用wxs：{{ tools.fn(8) }}</view>
|
UI 库
生命周期
两个生命周期：应用生命周期、页面生命周期
小程序发送请求
wx.request(Object object)
关于小程序中网络相关 API 的说明
在实际的项目中需要在 开发设置 中配置 服务器域名，然后小程序才能发送请求获取数据，但在开发期间，可以忽略这一步，在开发工具右上角的 详情 菜单中，勾选 不校验安全域名、TLS版本以及HTTPS证书
在小程序不用考虑跨域的问题，因为小程序是基于微信这个客户端
无法在小程序中使用 XHR 对象，发送请求
api
wx.previewImage(Object object) 全屏预览图片
https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html
<image src="{{tools.replace(src)}}" bindtap="previewImage" data-current="{{ src }}" data-urls="{{ item.images }}"></image>
|
previewImage (e) {
let {dataset: { current, urls}} = e.currentTarget
current = current.replace('w.h', '1000.1000')
urls = urls.map(item => {
return item.replace('w.h', '1000.1000')
})
wx.previewImage({
current,
urls
})
}
|
wx.saveImageToPhotosAlbum 保存图片到相册
https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.saveImageToPhotosAlbum.html
wx.pageScrollTo(Object object)
将页面滚动到目标位置
选择节点 wx.createSelectorQuery()
https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html
https://developers.weixin.qq.com/miniprogram/dev/framework/view/selector.html
返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用 this.createSelectorQuery() 来代替
文件系统
文件系统
https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.saveFile.html
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/file-system.html
上传文件
https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html
文件管理器
https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.getFileSystemManager.html
页面事件处理函数
onPageScroll(Object)
https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onPageScroll-Object-object
监听用户滑动页面事件。
Object 参数说明：
scrollTop Number 页面在垂直方向已滚动的距离（单位 px）
onPageScroll(scroll) {
console.log(scroll.scrollTop)
}
|
小程序中授权功能
- 打开小程序设置页（wx.openSetting）接口调整
- openSetting 的问题
- wepy 爬坑记 - openSetting
wx.getSetting({
success(res) {
console.log('success: ', res)
if (res.authSetting['scope.address'] === true) {
wx.chooseAddress({
success(res) {
console.log('是否确认同意授权：', res)
}
})
} else if (res.authSetting['scope.address'] === false) {
wx.showModal({
title: '温馨提示',
content: '您需要授权后，才能使用收获地址功能，是否打开授权界面',
success(res) {
if (res.confirm) {
wx.openSetting({
success(res) {
if (res.authSetting['scope.address']) {
wx.chooseAddress({
success(res) {
console.log('是否确认同意授权：', res)
}
})
} else {
console.log('用户本次还是不同意小程序使用通讯地址')
}
}
})
} else {
console.log('取消')
}
}
})
} else {
wx.chooseAddress({
success(res) {
console.log('是否确认同意授权：', res)
}
})
}
}
})
|
分包加载
https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html
与 vue 的区别
<view>{{[1, 2].join('-')}}</view>
|
小程序中的数据操作
- 获取数据
this.data.msg
- 更新数据
this.setData({ msg: 'something' })
绑定布尔值
<xx :xx="true"></xx>
<xx xx="{{true}}"></xx>
|
todomvc 案例
- 每个框架或库都应该写一个 todomvc，来了解这个框架的使用模式是怎样的
功能
- 1 欢迎界面（没有任务就展示欢迎界面，有任务就展示任务列表）
- 2 展示任务列表
- 3 添加任务
- 4 任务状态切换（完成和未完成）
- 剩余任务数量会改变
- 当所有的任务都完成，隐藏剩余任务数量展示
- 5 删除任务
- 6 切换所有任务的选中状态
- 7 展示清除已完成任务按钮
- 1 当有已完成的任务，就展示
- 2 单击清除已完成任务按钮，会清除所有已完成的任务
任务中需要频繁处理的操作：
1 清除已完成任务按钮 的展示和隐藏
2 剩余任务（未完成任务）的展示和隐藏
|
other
微信小程序 —— button 按钮去除 border 边框：使用 button::after{ border: none; } 来去除边框
button navogator 组件默认有点击态，可以添加 hover-class="none" 去除
getCurrentPages() 方法
https://developers.weixin.qq.com/miniprogram/dev/reference/api/getCurrentPages.html
获取当前页面栈。数组中第一个元素为首页，最后一个元素为当前页面。
页面间数据传递
let page = getCurrentPages()
console.log(page)
let prevPage = page[page.length - 2]
prevPage.setData({ msg: 'hehehe' }, () => {
wx.navigateBack()
})
|
