微信小程序+wepy

小程序

---

框架 WePY

WePY 框架在开发过程中参考了 Vue 等现有框架的一些语法风格和功能特性，对原生小程序的开发模式进行了再次封装，更贴近于 MVVM 架构模式, 并支持 ES6/7 的一些新特性。
wepy 官方文档

快速开始

npm install @wepy/cli -g 全局安装 WePY CLI 工具
wepy init standard [name] 模板初始化项目
npm install 安装依赖
npm run dev 编译项目

初始化时可能会有一个报错wepy-cli ： Failed to download repo standard: getaddrinfo ENOENT raw.githubusercontent.com
解决办法：
1、打开目录：C:/Windows/System32/drivers/etc/
2、找到 hosts 文件，使用管理员模式打开记事本
3、在 hosts 文件尾部添加：185.199.108.133 raw.githubusercontent.com

小程序配置

全局配置

在小程序根目录下的 app.json 文件里面配置（使用 wepy 框架在 app.wpy 文件里面配置）

pages: 用于指定小程序由哪些页面组成，每一项都对应一个页面的路径（含文件名）信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。(未指定 entryPagePath 时，数组的第一项代表小程序的初始页面)
window: 用于设置小程序的状态栏、导航条、标题、窗口背景色。
tabBar: 如果小程序是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
networkTimeout: 各类网络请求的超时时间，单位均为毫秒。
subpackages: 启用分包加载时，声明项目分包结构。
plugins: 声明小程序需要使用的插件。
preloadRule: 声明分包预下载的规则。
permission: 小程序接口权限相关设置。字段类型为 Object
embeddedAppIdList: 指定小程序可通过 wx.openEmbeddedMiniProgram 打开的小程序名单。

// 注意：json文件里面配置的需要遵循json格式
// 配置示例：
  {
    // 用于指定小程序由哪些页面组成
    pages: [
      'pages/index',  //  首页
      'pages/personal',  // 我的
      'pages/login', // 登录
      'pages/phoneLogin'  // 手机号登录
    ],
    // 用于设置小程序的状态栏、导航条、标题、窗口背景色
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    },
    // 通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面
    tabBar: {
      color: 'cdcdcd', // tabBer文字默认颜色
      selectedColor: 'f86552', // tabBer文字选中颜色
      list: [
        {
          pagePath: 'pages/index', // tabBer路径
          text: '首页', // tabBer标题
          iconPath: 'resource/icons/home_light.png', // tabBer默认icon
          selectedIconPath: 'resource/icons/home_light_active.png' // tabBer选中icon
        },
        {
          pagePath: 'pages/personal',
          text: '我的',
          iconPath: 'resource/icons/custom-user.png',
          selectedIconPath: 'resource/icons/custom-user-active.png'
        }
      ]
    },
    // 各类网络请求的超时时间，单位均为毫秒。
    networkTimeout: {
      request: 10000, // wx.request 的超时时间
      downloadFile: 10000 // wx.downloadFile 的超时时间
    },
    // 可以在开发者工具中开启 debug 模式
    debug: true,
    // 声明项目分包结构
    subPackages: [{
			root: 'otherpage',
			pages: [
				'pages/details',
			]
    }],
    // 声明分包预下载的规则: 在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。对于独立分包，也可以预下载主包
    preloadRule: {
			'pages/index': {
				network: 'all',
				packages: ['otherpage']
			}
		},
    // 小程序接口权限相关设置
    permission: {
      // 位置相关权限声明
			'scope.userLocation': {
				desc: '你的位置信息将用于小程序位置展示'
			}
    },
    // 指定小程序可通过wx.openEmbeddedMiniProgram打开的小程序名单
	embeddedAppIdList: ['wx2082cbdc25b3b8e6']
  }

页面配置

navigationBarBackgroundColor: 导航栏背景颜色，如 #000000。
navigationBarTextStyle: 导航栏标题颜色，仅支持 black / white。
navigationBarTitleText: 导航栏标题文字内容

// 配置示例：
{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

分包

介绍分包

什么是分包

分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载

分包的好处

• 可以优化小程序首次启动的下载时间
• 多团队共同开发时可以更好的解耦协作

分包大小限制

• 整个小程序所有分包大小不超过 20M
• 单个分包/主包大小不能超过 2M

结构

每个使用分包小程序必定含有一个主包+多个分包
主包：一般只包含项目的启动页面或 Tabbar 页面，以及一些所有分包都需用到公共资源/JS 脚本
分包：只包含和当前分包有关的页面和私有资源

加载规则

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。

使用分包

打包原则

• 声明 subpackages 后，将按 subpackages 配置路径进行打包，subpackages 配置路径外的目录将被打包到主包中
• 主包也可以有自己的 pages，即最外层的 pages 字段。
• subpackage 的根目录不能是另外一个 subpackage 内的子目录
• tabBar 页面必须在主包内

引用原则

• packageA 无法 require packageB JS 文件，但可以 require 主包、packageA 内的 JS 文件；使用 分包异步化 时不受此条限制
• packageA 无法 import packageB 的 template，但可以 require 主包、packageA 内的 template
• packageA 无法使用 packageB 的资源，但可以使用主包、packageA 内的资源

独立分包

独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。从独立分包中页面进入小程序时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载。

开发者可以按需将某些具有一定功能独立性的页面配置到独立分包中。当小程序从普通的分包页面启动时，需要首先下载主包；而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度。

一个小程序中可以有多个独立分包。

限制

独立分包属于分包的一种。普通分包的所有限制都对独立分包有效。独立分包中插件、自定义组件的处理方式同普通分包。
此外，使用独立分包时要注意：
独立分包中不能依赖主包和其他分包中的内容，包括 js 文件、template、wxss、自定义组件、插件等（使用 分包异步化 时 js 文件、自定义组件、插件不受此条限制）
主包中的 app.wxss 对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式；
App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为；
独立分包中暂时不支持使用插件。

分包预下载

可以通过配置，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。对于独立分包，也可以预下载主包。

限制

同一个分包中的页面享有共同的预下载大小限额 2M，限额会在工具中打包时校验。
如：页面 A 和 B 都在同一个分包中，A 中预下载总大小 0.5M 的分包，B 中最多只能预下载总大小 1.5M 的分包。