了解小程序
image.png
image.png
学习内容
image.png
学习目标
image.png
小程序基础
- 注册
image.png
- 小程序id：https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=1774441484&lang=zh_CN
查找方式：微信公众平台 -> 开发 -> 开发设置 - 代码构成
image.png
- 配置文件，页面结构、样式和交互
image.png
project.config.json 配置文件.png
app.json 配置文件.png
page.json 配置文件.png
.wxml 模板文件.png
.js 文件中的数据渲染到 .wxml 文件中.png
.wxss 样式文件.png
image.png
image.png
catch 绑定事件不允许冒泡.png
1/ 项目配置：参考这里
2/ 全局配置、页面配置等：参考这里
3/ wxml 语法：参考这里
4/ wxss：参考这里
5/ 事件系统，dataset 与 data- 自定义属性等：参考这里
6/ 框架-视图层-基础组件
小程序云开发
- 云开发介绍
image.png
image.png
image.png
image.png
image.png
image.png
开通云开发.png
image.png
image.png
- 云数据库
image.png
image.png
image.png
image.png
image.png
数据库的权限管理.png
1/ 云开发文档：SDK API 文档
2/ 数据库的权限管理：权限管理
- 云函数
image.png
image.png
可能提示要额外安装的依赖（服务端sdk）.png
image.png
image.png
image.png
image.png
1/ 云函数文档：云函数定义和调用
2/ 批量删除云数据库中的数据，需要使用云函数进行操作
- 云存储
image.png
image.png
从云存储下载图片到本地.png
/* 存储介绍：
* https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/capabilities.html#%E5%AD%98%E5%82%A8
*/
// 让用户选择一张图片
wx.chooseImage({
success: chooseResult => {
// 将图片上传至云存储空间
wx.cloud.uploadFile({
// 指定上传到的云路径
cloudPath: 'my-photo.png',
// 指定要上传的文件的小程序临时文件路径
filePath: chooseResult.tempFilePaths[0],
// 成功回调
success: res => {
console.log('上传成功', res)
},
})
},
})
1\ 使用接口 wx.chooseImage 进行选择图片的操作，在回调函数中使用存储接口 wx.cloud.uploadFile 进行图片的上传。
2\ 上传图片时，cloudPath 不能写死，否则多次上传将导致覆盖。
3\ 图片上传至云存储成功后，将返回fileid；应在云数据库中新建集合，将fileid 进行保存。
4\ 媒体接口：接口文档
5\ 存储接口文档： 存储接口
More
- 官方文档：framework
- Page 生命周期：reference/api/Page
常见问题
image.png
- API 请求：api/network/request/wx.request
- 基础库兼容
- 描述：
某些 api 不支持低版本，如“设置剪切板”（api/device/clipboard/wx.setClipboardData），因此需要额外做人性化处理。
兼容性处理.png- 介绍两个 API：wx.canIUse 和 wx.getSystemInfo（可根据 success 回调函数中的 SDKVersion 进行兼容性判断）
- 页面传值方式
- 使用
wx.navigateTo进行页面跳转，在 url 后面携带参数；参考文档：api/route/wx.navigateTo- 使用
wx.request进行页面跳转，以在 success 回调函数中为全局变量赋值的形式，完成传参；参考文档：api/network/request/wx.request
定义全局变量.png
注意：在 app.js 文件中定义全局变量；在页面 js 文件中，获取App实例，通过wx.request以 url 的形式发起请求完成页面跳转。// 使用全局函数获取 App 实例 // https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/module.html const app = getApp();
- 以
数据缓存的形式存储（wx.setStorage）和读取数据（wx.getStorage）；参考文档：api/storage/wx.setStorageSync；使用方法：在跳转的方法里，进行变量存储即可
