| 小程序入门

了解小程序

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
• 基础库兼容

1. 描述：
   某些 api 不支持低版本，如“设置剪切板”（api/device/clipboard/wx.setClipboardData），因此需要额外做人性化处理。
   
   兼容性处理.png
2. 介绍两个 API：wx.canIUse 和 wx.getSystemInfo（可根据 success 回调函数中的 SDKVersion 进行兼容性判断）

• 页面传值方式

1. 使用wx.navigateTo进行页面跳转，在 url 后面携带参数；参考文档：api/route/wx.navigateTo
2. 使用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();

3. 以数据缓存的形式存储（wx.setStorage）和读取数据（wx.getStorage）；参考文档：api/storage/wx.setStorageSync；使用方法：在跳转的方法里，进行变量存储即可