微信小程序设计指南
网址： https://developers.weixin.qq.com/miniprogram/design/#%E5%9B%BE%E6%A0%87
自定义组件
开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。
自定义组件创建与引用
类似于页面，一个自定义组件由 json wxml wxss js 4 个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）：
- 首先需要观察在 json 中需要有什么
{
"component": true
}
- 在组件 wxml 中编写模板文件。
注意：在组件 wxss 中不应使用 ID 选择器、属性选择器（[attr]）和标签名选择器p, 只能用类选择(.)
- 引用自定义组件，在页面 json 配置文件引用声明。写入自义组件签名和自定义组件的文件路径
使用时节点名即是自定义组件的标签名 “myWelcome”
{
"usingComponents": {
"myWelcome": "/component/welcome/welcome"
}
}
注意事项
节点名只能是小写字母、中划线和下线的组合
自定义组件可以引用自定义组件，方式与页面引用自定义组件一致。
自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。
注意：在引用页面中是否使用 usingComponents 会使的页面的 this 对象的原型指向会有差异
使用 usingComponents 页面的原型与不使用时不一致，即 Object.getPrototypeOf(this) 结果不同。
使用 usingComponents 时会多一些方法，如 selectComponent 。
出于性能考虑，使用 usingComponents 时， setData 内容不会被直接深复制，即 this.setData({ field: obj }) 后 this.data.field === obj 。（深复制会在这个值被组件间传递时发生。）
如果页面比较复杂，新增或删除 usingComponents 定义段时建议重新测试一下。
自定义组件与 template 的区别
微信小程序还有另一种组件化的方式叫 template 模板，这两者之间有什么区别
- template 主要是起展示作用，方法则需要在调用的页面中定义
- component 组件则有自己的业务逻辑，可以看做一个独立的 page 页面
使用场景：
如果只是展示，使用 template 就足够了
如果涉及到业务逻辑交互比较多，就可以使用 component 组件
组件模板与样式
小程序自定义组件模板的写法与页面模板相同。组件模板与组件数据结合生成节点树此节点树会被插入到引用的位置上
在组件模板中可以书写 slot 节点，可以把引用模板页面的子节点插入模板 slot 位置
//这是自定义组件的内部WXML结构
<view class="inner">
{{innerText}}
</view>
<slot></slot>
<!-- 引用组件的页面模板 -->
<view>
<component-tag-name>
<!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
<view>这里是插入到组件slot中的内容</view>
</component-tag-name>
</view>
<!-- 引用组件的页面模板 -->
<view>
<component-tag-name>
<!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
<view>这里是插入到组件slot中的内容</view>
</component-tag-name>
</view>
组件 wxml 的 slot
- 一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时，可以在组件 js 中声明启用。
Component({
options: {
multipleSlots: true, // 在组件定义时的选项中启用多slot支持
},
properties: {
/* ... */
},
methods: {
/* ... */
},
})
- 可以在这个组件的 wxml 中使用多个 slot ，以不同的 name 来区分。
<!-- 组件模板 -->
<view class="wrapper">
<slot name="before"></slot>
<view>这里是组件的内部细节</view>
<slot name="after"></slot>
</view>
<!-- 引用组件的页面模板 -->
<view>
<component-tag-name>
<!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
<view slot="before">这里是插入到组件slot name="before"中的内容</view>
<!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
<view slot="after">这里是插入到组件slot name="after"中的内容</view>
</component-tag-name>
</view>
:host 以及组件样式的隔离
组件中可以指定所在节点的默认样式，便用 :host 选择器
组件样式的隔离
默认的组件样式是收到自定义组件 wxss 的影响
除非： app.wxss 中有定义
70 云开发
微信小程序云开发简介
信小程序云开发特点：
弱化后端运维，无需搭建服务器
使用平台 api 开发，更具安全和便捷
服务器资源托管微信小程序的云端支持功能
云函数：服务器端运行的代码，可以直接在小程序端编写后上传
数据库：直接提供云端数据库，方便数据管理和数据查询，采用 JSON 格式
存储：云端自动开辟空间，给小程序有足够上传保存数据的场所
云调用：微信开辟云端开放接口。无需用户握手，直接调用
创建第一个云开发小程序
微型提供了云开发小程序官方DEMO，可以直接创建
创建云开发有一定的要求：
不能是测试号
在project.config.json中需要有本地云根文件的指向
云目录的标识有特别图案
版本要求：必须在2.2.3基础库之上
创建时选择：小程序 | 云开发
（需要 appid）
[云开发文档]
(https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html)
开通云开发
云开发需要在开始开发之前，开通云开发功能
微信云开发项目的创建步骤
使用云开发与不使用去开发的区别
- 创建一个名命为 cloudfunctions 的文件
- 在配置 Project.config.json 文件里添加"cloudfunctionRoot": “cloudfunctions/”,放在第二行
- cloudfunctionRoot 指定的目录有特殊的图标
小程序使用云能力前，需要调用 wx.cloud.init 方法完成去能力初始化。 放在 app.js
onLaunch: function () {
if (!wx.cloud) {
console.error('请使用 2.2.3 或以上的基础库以使用云能力');
} else {
wx.cloud.init({
// env 参数说明：
// env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
// 此处请填入环境 ID, 环境 ID 可打开云控制台查看
// 如不填则使用默认环境（第一个创建的环境）
// env: 'my-env-id',
traceUser: true,
});
}
}
- 创建云函数
未配云环境时，点击 cloudfunctions 选择
云数据库简介
- 微信云数据库提供了一个 JSON 格式存储数据的场所。在云端可以作为数据库使用。
与其他数据库对照的“表”概念在微信云数据库里以“集合”充当
- 与关系数据库对比
表 table -> 集合 collection
行 row -> 记录 doc
列 column -> 字段 field
- 手动创建云数据库与数据
- 进入 web 开发者工具->点开云开发->进入数据库 ->创建集合
- 权限设置
- 数据的导入导出
- 云函数的调用
- 云函数
// index.js 是入口文件，云函数被调用时会执行该文件导出的 main 方法
// event 包含了调用端（小程序端）调用该函数时传过来的参数，同时还包含了可以通过 getWXContext 方法获取的用户登录态 `openId` 和小程序 `appId` 信息
const cloud = require('wx-server-sdk')
exports.main = async (event, context) => {
let { userInfo, a, b } = event
let { OPENID, APPID } = cloud.getWXContext() // 这里获取到的 openId 和 appId 是可信的
let sum = a + b
return {
OPENID,
APPID,
sum,
}
}
- 云函数的调用
wx.cloud.callFunction({
// 需调用的云函数名
name: 'add',
// 传给云函数的参数
data: {
a: 12,
b: 19,
},
// 成功回调
complete: console.log,
})
// 当然 promise 方式也是支持的
wx.cloud
.callFunction({
name: 'add',
data: {
a: 12,
b: 19,
},
})
.then(console.log)
wx.cloud
.callFunction({
name: 'quickstartFunctions',
config: {
env: this.data.envId,
},
data: {
type: 'getOpenId',
},
})
.then((resp) => {
this.setData({
haveGetOpenId: true,
openId: resp.result.openid,
})
wx.hideLoading()
})
.catch((e) => {
this.setData({
showUploadTip: true,
})
wx.hideLoading()
})
数据库
数据库 API 包含增删改查的能力，使用 API 操作数据库只需三步：获取数据库引用、构造查询/更新条件、发出请求。
// 1. 获取数据库引用
const db = wx.cloud.database()
// 2. 构造查询语句
// collection 方法获取一个集合的引用
// where 方法传入一个对象，数据库返回集合中字段等于指定值的 JSON 文档。API 也支持高级的查询条件（比如大于、小于、in 等），具体见文档查看支持列表
// get 方法会触发网络请求，往数据库取数据
db.collection('books')
.where({
publishInfo: {
country: 'United States',
},
})
.get({
success: function (res) {
// 输出 [{ "title": "The Catcher in the Rye", ... }]
console.log(res)
},
})
环境和配额
环境：每个应用配备一个环境，包括数据库、存储空间、云函数和资源、互相独立。
最多开辟两个环境配额：
存储空间：5G
单次云函数运行内存：256M更多参数
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/concepts/quota.html
云数据库:增、删、改、查
了解数据字段
可以通过 add 方法插入数据
操作步骤
- 创建数据库调用对象
- 通过集合方法找到存储集合
- 通过 add 方法完成数据的录入
- 录入完毕后的成功或失败回调
- 创建第一个集合
打开控制台，选择 “数据库” 标签页，通过 “添加集合” 入口创建一个集合。假设我们要创建一个待办事项小程序，我们创建一个名为 todos 的集合。创建成功后，可以看到 todos 集合管理界面，界面中我们可以添加记录、查找记录、管理索引和管理权限。
- 假设已有一个集合 todos
;[
{
_id: 'todo-identifiant-aleatoire',
_openid: 'user-open-id', // 假设用户的 openid 为 user-open-id
description: 'learn cloud database',
due: Date('2018-09-01'),
progress: 20,
tags: ['cloud', 'database'],
style: {
color: 'white',
size: 'large',
},
location: Point(113.33, 23.33), // 113.33°E，23.33°N
done: false,
},
{
_id: 'todo-identifiant-aleatoire-2',
_openid: 'user-open-id', // 假设用户的 openid 为 user-open-id
description: 'write a novel',
due: Date('2018-12-25'),
progress: 50,
tags: ['writing'],
style: {
color: 'yellow',
size: 'normal',
},
location: Point(113.22, 23.22), // 113.22°E，23.22°N
done: false,
},
// more...
]
初始化
在开始使用数据库 API 进行增删改查操作之前，需要先获取数据库的引用。
const db = wx.cloud.database()假设有一个环境名为 test，用做测试环境，那么可以如下获取测试环境数据库：
const testDB = wx.cloud.database({ env: 'test', })就可以通过数据库引用上的 collection 方法获取一个集合的引用了
const todos = db.collection('todos')可以通过此引用在该集合上进行增删查改的操作，除此之外，还可以通过集合上的 doc 方法来获取集合中一个指定 ID 的记录的引用。同理，记录的引用可以用于对特定记录进行更新和删除操作。
假设我们有一个待办事项的 ID 为 todo-identifiant-aleatoire，那么我们可以通过 doc 方法获取它的引用：
const todo = db.collection('todos').doc('todo-identifiant-aleatoire')获取多个记录的数据
通过调用集合上的 where 方法可以指定查询条件，再调用 get 方法即可只返回满足指定查询条件的记录
db.collection('todos') .where({ _openid: 'user-open-id', done: false, }) .get({ success: function (res) { // res.data 是包含以上定义的两条记录的数组 console.log(res.data) }, })
数据的录入
/**
* 获输入的值
*/
getNewsFieldVal(e){
this.newVal = e.detail.value
},
/*创建数据库对象*/
const db = wx.cloud.database({
env: 'test-jj55w'
})
/*添加数据*/
db.collection('shujuku3').add({
// data 字段表示需新增的 JSON 数据
data:{
name: userInfo.username,
age: userInfo.userage,
createTime: new Date() //创建服务器时间
},
//回调函数
success(res) {
console.log('success', res);
}
//也可以用promise
})
/*更新单条数据*/
db.collection('shujuku3').update({
data:{
age: this.newVal
},
success:console.log,
fail:console.error
})
/**
* 删除数据
*/
db.collection('shujuku3').doc(this.newVal).remove().then(console.log).catch(console.error)
/**
* 获取用户数据 --查
*/
db.collection('shujuku3').get().then(res=>{
that.setData({
userList:res.data
})
})
- 更新多条数据
先创建一个云函数，在 where 语句后同样的调用 update 方法即可
// 使用了 async await 语法
const cloud = require('wx-server-sdk')
const db = cloud.database()
const _ = db.command
exports.main = async (event, context) => {
try {
return await db
.collection('todos')
.where({
done: false,
})
.update({
data: {
progress: _.inc(10),
},
})
} catch (e) {
console.error(e)
}
}
// 在页面js中调用
/**
* 数据全部（年龄）
*/
updateAllData(){
//调用云函数，并传参
wx.cloud.callFunction({
name: "updataInfo",
data:{
age: this.newVal
}
}).then(res => console.log(res));
}.catch(console.log(error));
- 云数据库的查询操作
在记录和集合上提供 get 方法来获取数据记录，可以是单个记录，也可以是集合
可以使用 where 来作为条件查询的关键字，中间采用 json 格式
了解 或、非、与的正确使用方式
数据库指令与 CRUD 操作
地理位置： location: new db.GEO.Point(113, 23)
用户登录与注册
用户登录与注册流程
- 用户没有账户可以进行注册
- 用户有账户后可以直接登录
- 采用输入简单验证判断，是否为空或者长度不够
- 登录成功后做缓存存储，并进入个人中心
- 登录失败后做提示，并重新登录
支付、授权
此接口调用需要有如下条件
微信公众号认证
绑定企业银行账户并签署协议
和微信服务器做合法验签并根据格式做签名算法
调用接口程序
授权
用户权限的请求
wx.authorize
广告组件
在小程序中接入广告 需要开通广告主
案例演示：开通方法和实现方式
- Banner 广告
- 激励式视频
- 插屏广告