新建页面
app.json 中 pages 增加页面路径
会自动生成页面路径下的文件(.js .wxml .wxss .json)
第三方库使用
1. 工具-终端打开
- npm init
- yarn add
- 右上角-详情-勾选使用npm模块
- 按照官方文档使用
- json 文件中设置 usingComponents 调用组件
- wxml 文件中使用
调用外部接口
- app.js 中设置云环境 ID
- 小程序调用
- 小程序 wx.request()
- https
- 云函数第三方调用
云函数,第三方axios,不限https
- 创建云函数
- 上传并部署到云端,确认“上传环境”是否对应
- 安装第三方依赖
- 云函数中使用依赖编写请求代码
- 上传云函数(云函数目录右键选择上传并部署:云端安装依赖)
- 应用页面 onLoad 使用 wx.cloud.callFunction 调用云函数,为 data 赋值
- 编译执行
事件及传参
- 点击事件 bindtap
- catchtap 禁止冒泡的点击事件
- 传参 data-name
- 获取参数 event.target.dataset.name
- 跳转 wx.navagateTo
- 加载中状态显示 wx.showLoading||wx.hideLoading
- model:value 值的动态双向绑定
编译测试
- 普通编译位置
- 添加编译模式,将当前开发页面保存为编译刷新页面
图片上传功能
- wx.chooseImage() 选择本地图片,返回缓存图片地址
- wx.cloud.uploadFile() 上传到云服务器
- wx.cloud.database().collection(‘dbcollectionname’).add({data:{}}) 保存到云数据库中,集合名要存在
云函数
- cloud.getWXContext() 返回值
{“UNIONID”:””,”CLIENTIP”:”110.249.133.138″,”CLIENTIPV6″:”::ffff:110.249.133.138″,”FROM_APPID”:””,”FROM_OPENID”:””,”FROM_UNIONID”:””,”OPEN_DATA_INFO”:””,”APPID”:”wxd7727412806648f8″,”OPENID”:”o0QCB4qzXT57kes2tRno7dKNGtNI”,”ENV”:”notes-tes-989e03″,”SOURCE”:”wx_devtools”}
- js文件调用云函数 wx.cloud.callFuntion 传参 data:{}
- 云函数获取参数 event
小程序调用公众号云调用接口
- 互相关联
- 云开发控制台-环境共享,添加公众号到共享列表,
设置参考:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/web.html
- 小程序就可以调用公众号的云调用接口了(无需获取token)
语法参考:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/web/openapi.html
- 云调用需要配置云函数的config云调用
配置参考:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/openapi/openapi.html#%E4%BA%91%E8%B0%83%E7%94%A8
获取用户信息
- open-data 标签
- open-type=”getUserInfo” 的 button 绑定点击事件 bindgetuserinfo 获取
云开发数据库操作
- const db = wx.cloud.database()
- db.collection(“name”).where({}).get() 查找
- doc(‘_id’) 获取某一条数据
- add() 新增
- update(”) 更新
- remove() 删除
- 云函数中批量删除