微信小程序_指南部分

2021-10-17 15:00:24

微信小程序

下载安装

创建项目

Step 1

Step2

Step3 目录结构

配置

1.我们直接在app.json中的pages写入一下代码

...
  "pages":[
    "pages/welcome/welcome",
    "pages/index/index",
    "pages/logs/logs",
    "palges/home/home",
    "pages/kind/kind",
    "pages/cart/cart",
    "pages/user/user"
  ],
...

保存后会自动生成一下目录结构

其中index 和logs 是微信自带的，其他的只需要你保存代码，就会自动生成目录结构

学习api

小程序配置： app.json
1. 全局配置：小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象
2. 包括页面路径、界面表现、底部tab
  1. pages: 描述小程序所有页面路径，一目了然
  2. window字段 - 定义小程序所有页面背景颜色，文字颜色定义等。
  3. tabBar:
    1. color HexColor tab 上的文字默认颜色，仅支持十六进制颜色
    2. selectedColor HexColor tab 上的文字选中时的颜色，仅支持十六进制颜色
    3. backgroundColor HexColor tab 的背景色，仅支持十六进制颜色
    4. borderStyle String 默认值 black tabbar 上边框的颜色，仅支持 black / white
    5. list Array 必填项 tab 的列表，详见list属性说明，最少 2 个`、最多 5 个 tab
      1. pagePath String 必填 路径
      2. text String 必填 tab 上按钮文字
      3. iconPathString 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon
      4. selectedIconPath String 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片 当 position 为 top 时，不显示 icon
    6. position String 默认值 bottom tabBar 的位置，仅支持 bottom / top
    7. custom boolean 默认值 false 自定义 tabBar
```
"tabBar": {
    "list": [
      {
        "pagePath": "palges/home/home", // 首页路径
        "text": "首页", // tabbar标题
        "iconPath": "./resources/tabBar/home.png",// tabbar 图标
        "selectedIconPath": "./resources/tabBar/home_active.png" // 选中后的的样式
      },
      {
        "pagePath": "pages/kind/kind",
        "text": "详情",
        "iconPath": "./resources/tabBar/kind.png",
        "selectedIconPath": "./resources/tabBar/kind_active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "./resources/tabBar/cart.png",
        "selectedIconPath": "./resources/tabBar/cart_active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "./resources/tabBar/user.png",
        "selectedIconPath": "./resources/tabBar/user_active.png"
      }
    ]
  },
```
    - 这便是效果图其中的resources 是我自己去阿里图标库自己找的icon
  4. entryPagePath: String : 小程序默认启动页设置
```
// 如果不填，将默认为 pages 列表的第一项。不支持带页面路径参数。
"entryPagePath": "palges/home/home", // 表示默认启动为首页
```
  5. pages: String[] 必填项页面路径列表
```
// 用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。
// 未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）
{
  "pages": ["pages/index/index", "pages/logs/logs"]
}
```
  6. window: Object: 非必填全局默认展示
    1. navigationBarBackgroundColor: HexColor #00000
    2. navigationBarTextStyle:String white 导航栏标题颜色，仅支持 black / white
    3. navigationBarTitleText :String 导航栏文字内容
    4. navigationStyle: String 默认值default，仅支持default 和 custom 自定义导航栏
    5. backgroundColor HexColor 默认#ffffff 窗口的背景色就是最下方的，下拉后显示的颜色"backgroundColor": "#000",
    1. backgroundTextStyle String 默认dark 下拉loading 样式，仅支持dark/light
      
      若要开启，需要配合后文提到的api，这里我先写上看一看 enablePullDownRefresh
    2. enablePullDownRefresh Boolean 默认 false
```
onPullDownRefresh()
监听用户下拉刷新事件。

需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
```
    3. onReachBottomDistance number 默认 50 页面上拉触底事件触发时距页面底部距离，单位为 px。
```
onReachBottom()
监听用户上拉触底事件。

可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
在触发距离内滑动期间，本事件只会被触发一次。
```
    4. pageOrientation String 默认值 portrait 屏幕旋转设置，支持 auto/portrait/landscape 横屏
    1. restartStrategy Sting 默认值 homePage 重新启动策略配置
    2. initialRenderingCache String 页面初始渲染缓存配置，支持 static / dynamic
    3. visualEffectInBackground String 默认值 none 切入系统后台时，隐藏页面内容，保护用户隐私。支持 hidden / none
  7. networkTimeout Object 网络超时时间
  8. debug Boolean 开启关闭debug模式，默认关闭
  9. functionalPages Boolean 是否启用插件功能页，默认关闭
  10. subpackages Object[] 分包结构配置
    1. 使用分包
      1. 先在app.json 声明项目分包结构
        
        "subpackages": [ { "root": "searchMode", "name": "search", "pages": [ "pages/search" ] }, { "root": "login", "name": "login", "pages": [ "pages/login" ] }, { "root": "register", "name": "register", "pages": [ "pages/register" ] } ], ├── app.js ├── app.json ├── app.wxss ├── searchMode │ └── pages │ ├── search ├── login │ └── pages │ ├── login ├── register │ └── pages │ ├── register ├── pages │ ├── index │ └── log
      2. 字段：
      3. root String 分包根目录
      4. name String 分包别名，分包预下载时可以使用
      5. pages StringArray 分包页面路径，相对与分包根目录
      6. independent Boolean 分包是否独立分包
      7. 打包原则
        
        声明 subpackages 后将subpackages 配置路径进行打包到app(主包)中
        
        app(主包)可以有自己的pages (最外层的pages字段)
        
        subpackage的根目录不能是另一个subpackage的子目录
        
        tabBar 必须包含在app内
    2. 独立分包
      1. 开发者通过在app.json的subpackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包。
      2. 独立分包属于分包的一种。普通分包的所有限制都对独立分包有效。独立分包中插件、自定义组件的处理方式同普通分包。
        
        此外，使用独立分包时要注意：
        
        独立分包中不能依赖主包和其他分包中的内容，包括 js 文件、template、wxss、自定义组件、插件等（使用分包异步化时 js 文件、自定义组件、插件不受此条限制）
        
        主包中的 app.wxss 对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式；
        
        App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为；
        
        独立分包中暂时不支持使用插件。
        
        与普通分包不同，独立分包运行时，App 并不一定被注册，因此 getApp() 也不一定可以获得 App 对象：
        
        当用户从独立分包页面启动小程序时，主包不存在，App也不存在，此时调用 getApp() 获取到的是 undefined。当用户进入普通分包或主包内页面时，主包才会被下载，App 才会被注册。（不过这里我是获取到app实例了）
    3. 分包预下载
      1. 开发者可以通过配置，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。对于独立分包，也可以预下载主包。
        
        分包预下载目前只支持通过配置方式使用，暂不支持通过调用API完成。
      2. 预下载分包行为在进入某个页面时触发，通过在 app.json 增加 preloadRule 配置来控制。
      3. "preloadRule": { "pages/index/index":{ // 页面路径 "network": "wifi", // 只有两个参数 wifi 和all "packages": ["searchMode", "login", "register"] 可以放单个，也可以放数组， } },
      4. packages 是必填项，类型是String类型，无默认值，进入页面后预下载分包的 root 或 name。__APP__ 表示主包。
        
        ackages StringArray 是无进入页面后预下载分包的 root 或 name。__APP__ 表示主包。
      5. network String 否 wifi 在指定网络下预下载，可选值为： all: 不限网络 wifi: 仅wifi下预下载
    4. 分包异步化
      1. 在小程序中，不同的分包对应不同的下载单元；因此，除了非独立分包可以依赖主包外，分包之间不能互相使用自定义组件或进行 require。分包异步化特性将允许通过一些配置和新的接口，使部分跨分包的内容可以等待下载后异步使用，从而一定程度上解决这个限制。
      2. //app.json { "entryPagePath": "palges/home/home", "pages":[ "pages/welcome/welcome", "pages/index/index", "pages/logs/logs", "palges/home/home", "pages/kind/kind", "pages/cart/cart", "pages/user/user", "pages/detail/detail" ], "subpackages": [ { "root": "searchMode", "name": "search", "pages": [ "pages/search" ] }, { "root": "login", "name": "login", "pages": [ "pages/login" ] }, { "root": "register", "name": "register", "pages": [ "pages/register", "components/simple-list" ], "independent": false }, { "root": "commonPackage", "name": "commonPackage", "pages": ["components/button"] }, { "root": "subPackageB", "name": "subPackageB", "pages": ["components/full-list"] } ], "preloadRule": { "pages/index/index":{ "network": "wifi", "packages": ["searchMode", "login", "register"] } }, "window":{ "navigationBarBackgroundColor": "#f90", "navigationBarTextStyle": "white", "navigationBarTitleText": "Hello World", "navigationStyle": "default", "backgroundColor": "#000", "backgroundTextStyle":"dark", "enablePullDownRefresh": true, "pageOrientation": "portrait" }, "tabBar": { "color": "#f90", "borderStyle": "black", "list": [ { "pagePath": "palges/home/home", "text": "首页", "iconPath": "./resources/tabBar/home.png", "selectedIconPath": "./resources/tabBar/home_active.png" }, { "pagePath": "pages/kind/kind", "text": "详情", "iconPath": "./resources/tabBar/kind.png", "selectedIconPath": "./resources/tabBar/kind_active.png" }, { "pagePath": "pages/cart/cart", "text": "购物车", "iconPath": "./resources/tabBar/cart.png", "selectedIconPath": "./resources/tabBar/cart_active.png" }, { "pagePath": "pages/user/user", "text": "我的", "iconPath": "./resources/tabBar/user.png", "selectedIconPath": "./resources/tabBar/user_active.png" } ] }, "style": "v2", "sitemapLocation": "sitemap.json" } // register/pages/register.json { "usingComponents": { "button": "../../commonPackage/components/button", "list": "../../subPackageB/components/full-list", "simple-list": "../components/simple-list" }, "componentPlaceholder": { "button": "view", "list": "simple-list" } } // 记得上述文件夹。简单来说，保存app.json 在full-list 中创建json文件，配置一下 { "component": true, "usingComponents": {} }
      3. 在这个配置中，button 和 list 两个自定义组件是跨分包引用组件，其中 button 在渲染时会使用内置组件 view 作为替代，list 会使用当前分包内的自定义组件 simple-list 作为替代进行渲染；在这两个分包下载完成后，占位组件就会被替换为对应的跨分包组件。
      4. 一个分包中的代码引用其它分包的代码时，为了不让下载阻塞代码运行，我们需要异步获取引用的结果。
    worker
    
    多线程 Worker
    
    一些异步处理的任务，可以放置于 Worker 中运行，待运行结束后，再把结果返回到小程序主线程。Worker 运行于一个单独的全局上下文与线程中，不能直接调用主线程的方法。
    
    Worker 与主线程之间的数据传输，双方使用 Worker.postMessage() 来发送数据，Worker.onMessage() 来接收数据，传输的数据并不是直接共享，而是被复制的。
    1. 使用 Worker处理多线程任务时，设置 Worker 代码放置的目录
    2. 在app.json 中配置 {“workers”: “workers”}
    3. 添加worker代码文件
```
workers/request/index.js
workers/request/utils.js
workers/response/index.js

├── app.js
├── app.json
├── project.config.json
└── workers
    ├── request
    │   ├── index.js
    │   └── utils.js
    └── response
        └── index.js
```
    4. 编写 Worker 代码
    5. 在 workers/request/index.js 编写 Worker 响应代码
```
const utils = require('./utils')

// 在 Worker 线程执行上下文会全局暴露一个 worker 对象，直接调用 worker.onMessage/postMessage 即可
worker.onMessage(function (res) {
  console.log(res)
})
```
    6. 在主线程中初始化 Worker
```
// +++ app.js中注册一下
const worker = wx.createWorker('workers/request/index.js') // 文件名指定 worker 的入口文件路径，绝对路径
```
    7. 主线程向worker发送消息
```
worker.postMessage({
    msg: 'hello worker'
})
```
    8. 注意：
      1. Worker 最大并发数量限制为 1 个，创建下一个前请用 Worker.terminate() 结束当前 Worker
      2. Worker 内代码只能 require 指定 Worker 路径内的文件，无法引用其它路径
      3. Worker 的入口文件由 wx.createWorker() 时指定，开发者可动态指定 Worker 入口文件
      4. Worker 内不支持 wx 系列的 API
      5. Workers 之间不支持发送消息
      6. Worker 目录内只支持放置 JS 文件，其他类型的静态文件需要放在 Worker 目录外
      7. 基础库 v2.18.1 开始支持在插件内使用 worker。相应地，插件使用worker前需要在plugin.json内配置workers代码路径，即一个相对插件代码包根目录的路径。
  11. requiredBackgroundModes
    1. 声明需要使用运行在后台，如音乐播放，后台定位
    2. ```
    // app.json 声明
    {
      "pages": ["pages/index/index"],
      "requiredBackgroundModes": ["audio", "location"]
    }
```
12. resizable
13. 屏幕旋转
14. 显示区域尺寸
  1. 显示区域指小程序界面中可以*布局展示的区域。在默认情况下，小程序显示区域的尺寸自页面初始化起就不会发生变化。但以下两种方式都可以改变这一默认行为。
  2. ```
  // 手机
  {
    "pageOrientation": "auto"
  }
  
  // iPAd
  {
    "resizable": true
  }
```
  3. Media Query 解决不同尺寸的显示区域，页面的布局会有所差异
  4. ```
  .my-class {
    width: 40px;
  }
  
  @media (min-width: 480px) {
    /* 仅在 480px 或更宽的屏幕上生效的样式规则 */
    .my-class {
      width: 200px;
    }
  }
```
  5. 页面尺寸发生改变的事件，可以使用页面的 onResize 来监听。对于自定义组件，可以使用 resize 生命周期来监听。回调函数中将返回显示区域的尺寸信息。（从基础库版本开始支持。）
  6. ```
  // page 类型处理监听
  Page({
    onResize(res) {
      res.size.windowWidth // 新的显示区域宽度
      res.size.windowHeight // 新的显示区域高度
    }
  })
  
  // 自定义组件Component
  Page({
    onResize(res) {
      res.size.windowWidth // 新的显示区域宽度
      res.size.windowHeight // 新的显示区域高度
    }
  })
```
  15. permission 授权
    1. 部分接口需要经过用户授权同意才能调用。我们把这些接口按使用范围分成多个 scope ，用户选择对 scope 来进行授权，当授权给一个 scope 之后，其对应的所有接口都可以直接使用。
      
      此类接口调用时：
      - 如果用户未接受或拒绝过此权限，会弹窗询问用户，用户点击同意后方可调用接口；
      - 如果用户已授权，可以直接调用接口；
      - 如果用户已拒绝授权，则不会出现弹窗，而是直接进入接口 fail 回调。
    2. 开发者可以使用 wx.getSetting 获取用户当前的授权状态。
    3. 用户可以在小程序设置界面（「右上角」 - 「关于」 - 「右上角」 - 「设置」）中控制对该小程序的授权状态。
      
      开发者可以调用 wx.openSetting 打开设置界面，引导用户开启授权。
    4. 开发者可以使用 wx.authorize 在调用需授权 API 之前，提前向用户发起授权请求。