Quartz 4

N_Wechat_小程序开发

7 min read

2021-10-11

小程序 配置

官方文档 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象，有以下属性：

属性类型必填描述最低版本
entryPagePathstring否小程序默认启动首页
pagesstring[]是页面路径列表
windowObject否全局的默认窗口表现
tabBarObject否底部 tab 栏的表现
networkTimeoutObject否网络超时时间
debugboolean否是否开启 debug 模式，默认关闭
functionalPagesboolean否是否启用插件功能页，默认关闭2.1.0
subpackagesObject[]否分包结构配置1.7.3
workersstring否Worker 代码放置的目录1.9.90
requiredBackgroundModesstring[]否需要在后台使用的能力，如「音乐播放」
requiredPrivateInfosstring[]否调用的地理位置相关隐私接口
pluginsObject否使用到的插件1.9.6
preloadRuleObject否分包预下载规则2.3.0
resizableboolean否PC 小程序是否支持用户任意改变窗口大小（包括最大化窗口）；iPad 小程序是否支持屏幕旋转。默认关闭2.3.0
usingComponentsObject否全局自定义组件配置开发者工具 1.02.1810190
permissionObject否小程序接口权限相关设置微信客户端 7.0.0
sitemapLocationstring是指明 sitemap.json 的位置
stylestring否指定使用升级后的weui样式2.8.0
useExtendedLibObject否指定需要引用的扩展库2.2.1
entranceDeclareObject否微信消息用小程序打开微信客户端 7.0.9
darkmodeboolean否小程序支持 DarkMode2.11.0
themeLocationstring否指明 theme.json 的位置，darkmode为true为必填开发者工具 1.03.2004271
lazyCodeLoadingstring否配置自定义组件代码按需注入2.11.1
singlePageObject否单页模式相关配置2.12.0
supportedMaterialsObject否聊天素材小程序打开相关配置2.14.3
serviceProviderTicketstring否定制化型服务商票据
embeddedAppIdListstring[]否半屏小程序 appId2.20.1
halfPageObject否视频号直播半屏场景设置2.18.0
debugOptionsObject否调试相关配置2.22.1
enablePassiveEventObject或boolean否touch 事件监听是否为 passive2.24.1
resolveAliasObject否自定义模块映射规则
rendererstring否全局默认的渲染后端2.30.4
rendererOptionsObject否渲染后端选项2.31.1
componentFrameworkstring否组件框架，详见相关文档2.30.4
miniAppObject否多端模式场景接入身份管理服务时开启小程序授权页相关配置，详见相关文档
staticObject否正常情况下默认所有资源文件都被打包发布到所有平台，可以通过 static 字段配置特定每个目录/文件只能发布到特定的平台(多端场景) 相关文档
convertRpxToVwboolean否配置是否将 rpx 单位转换为 vw 单位，开启后能修复某些 rpx 下的精度问题3.3.0

entryPagePath

指定小程序的默认启动路径（首页），常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填，将默认为 pages 列表的第一项。不支持带页面路径参数。

pages

用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

{
  "pages": ["pages/index/index", "pages/logs/logs"]
}

数据绑定

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

<view> {{ message }} </view>
Page({
  data: {
    message: 'Hello MINA!'
  }
})

组件属性(需要在双引号之内)

<view id="item-{{id}}"> </view>
Page({
  data: {
    id: 0
  }
})

条件

<view wx:if="{{condition}}"> True </view>

小程序 API

官方文档

小程序 组件

官方文档

全局状态管理 (一个比较好开发方式)

westore

传统的MVC架构 Model View Controller, 我们把业务逻辑放到C层（ios的ViewController,android的Activity&Fragment）, 但是这里会引入另外一个问题, 所有的逻辑都在C层, 不可避免的会造成C层非常复杂, 如果项目越来越大, C层的代码会更加臃肿, 维护起来也非常麻烦

MVP 模型 : 简而言之: 就是在View 和Model 加了一层 Presenter; View <= Presenter => Model MVP分离了view和model层, Presenter层充当了桥梁的角色, View层只负责更新界面即可

  1. 安装

npm i westore --save

  1. UserStore
const { Store } = require('westore')
const User = require('../models/user')
 
class UserStore extends Store {
  constructor(options) {
    super()
    this.options = options
    //这里是 View data 的根节点
    this.data = {UserStore: {} }
    this.init();
  }
 
  init() {
      //远程获取数据
    request({
      url: "http://xxx/data_open_api/auth/vCode"
    }).then(res=>{
      console.log(res);
      this.modify(res)
    })
  }
 
   modify(data) {
    this.data["UserStore"] = data;
    //更新视图
    this.update()
  }
}
 
module.exports = new UserStore
  1. 页面使用
const userStore = require('../../stores/user-store')
 
Page({
  data: {
    UserStore: userStore.data
  },
 
  onLoad() {
    /* 绑定 view 到 store 
      也可以给 view 取名 userStore.bind('userPage', this)
      取名之后在 store 里可通过 this.update('userPage') 更新 view
      不取名可通过 this.update() 更新 view
    */
    userStore.bind(this)
  },
 
  saveNickName(newNickName) {
    userStore.saveNickName(newNickName)
  },
 
  onInputChange(evt) {
    userStore.modifyInputNickName(evt.currentTarget.value)
  },
 
  clearInput() {
    userStore.modifyInputNickName('')
  }
})

安装 npm 第三方包

官方文档

  1. 初始化项目 npm init

  2. 执行 npm install *此处要求参与构建 npm 的 package.json 需要在 project.config.js 定义的 miniprogramRoot 之内; *

  3. 点击开发者工具中的菜单栏: 工具 ⇒ 构建 npm

  4. 勾选”使用 npm 模块”选项

使用 vant UI库

vant

  1. 通过 npm 安装 npm i @vant/weapp -S --production

  2. 步骤二 修改 app.json 将 app.json 中的 “style”: “v2” 去除

  3. 修改 project.config.json

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  }
}

Graph View

Backlinks