小程序工程化构建

happyRen
613 阅读3分钟

前言

想自己搭建一套自定义的微信小程序项目，边学边摸索的捣鼓，有不对的地方还希望伙伴们指出来

项目初始化

微信开发者工具 新建小程序项目

选择JS 基础模板以下配置，目前我没有捣鼓TS小程序，TS只学了皮毛。

Tips:如果选择了TS基础模板 则package.json 和项目结构自动生成只需要安装npm包然后 开发工具-npm构建

在工具找到终端执行 npm init 命令，一路回车，生成 package.json文件

package.json 和 node_modules 始终在一个目录下

如果配置多个 package ，比如小程序分包需要单独的package

├── src_node_modules_1
│   ├── node_modules
│   └── package.json
└── src_node_modules_2
    ├── node_modules
    └── package.json

npm包构建

自定义 node_modules 和 miniprogram_npm 位置的构建 npm 方式

project.config.json 配置

"setting": {
  "packNpmManually": true, //为true 开启自定义 node_modules 和 miniprogram_npm 位置的构建 npm 方式
  "packNpmRelationList": [
    {
      "packageJsonPath": "./package.json", //表示 node_modules 源对应的 package.json 相对路径
      "miniprogramNpmDistDir": "./src" //表示 node_modules 的构建结果目标位置，构建npm后，会生成miniprogram_npm目录，这里指定目录所在位置
    }
  ],
}
"miniprogramRoot": "src/", //根目录名称
"srcMiniprogramRoot": "src/",

安装使用npm包

安装相关npm包

npm i axios axios-miniprogram-adapter
npm install 
npm i -- production 
//建议使用--production选项，可以减少安装一些业务无关的 npm 包，从而减少整个小程序包的大小

npm install 的速度显然与它依赖的包的多少是正相关的，那减少包的数量就可以减少装包所花费的时间。

使用 --production 可以只安装 package.json 中 dependencies 中的依赖项，只把要安装在 CI 中需要使用到的依赖。在生产环境部署时可以指定 --production。

npm install --production

参考文章：

z.itpub.net/article/det…

构建npm

开发者工具中的菜单栏：工具 --> 构建 npm

环境变量

wx.getAccountInfoSync()

const accountInfo = wx.getAccountInfoSync();

console.log(accountInfo.miniProgram.envVersion) // 小程序版本 envVersion

develop开发版
trial体验版
release正式版

根据版本值判断环境变量

const {miniProgram: {envVersion, version}} = wx.getAccountInfoSync()
// 开发环境:dev  生产环境:pro  预发布:pre  测试:uat
const env = 'pre'
//开发版
const develop = {
  BASE_URL: 'http://develop-api.saole.com',
  NODE_ENV: `develop`,
  version: '1.0.0',
  envVersion,
}

//体验版
const trial = {
  BASE_URL: 'http://uat-api.saole.com',
  NODE_ENV: `trial`,
  version,
  envVersion,
}

//正式版
const release = {
  BASE_URL: 'http://pro-api.saole.com',
  NODE_ENV: `release`,
  version,
  envVersion,
}

let wx_env = null
switch (envVersion) {
  case develop.NODE_ENV:
    wx_env = env === 'pro' ? release : develop
    break;
  case trial.NODE_ENV:
    wx_env = env === 'pro' ? release : trial
    break;
  case release.NODE_ENV:
    wx_env = release
    break
}

export default {...wx_env, __environment__: env}

使用环境变量

//app.js 引入环境变量文件
import env from "./config/env";

//读取变量
const environment = env.__environment__

引用sass

useCompilerPlugins

编译插件配置，目前支持编译插件有 typescript、less、sass

{
  "setting": {
    "useCompilerPlugins": [
      "typescript",
      "sass"
    ]
  }
}

表示项目支持直接使用 typescript 和 sass

使用WeUI组件库

wechat-miniprogram.github.io/weui/docs/q…

引入组件

  1. 可以通过npm方式下载构建，npm包名为 weui-miniprogram

首先要在 app.wxss 里面引入 weui.wxss，如果是通过 npm 引入，需要先构建 npm（“工具”菜单 --> “构建 npm”）

@import 'weui-miniprogram/weui-wxss/dist/style/weui.wxss';
  1. 通过 useExtendedLib 扩展库 的方式引入，这种方式引入的组件将不会计入代码包大小。

可省略 import 步骤

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。

指定需要引用的扩展库。目前支持以下项目：

指定后，相当于引入了对应扩展库相关的最新版本的 npm 包，同时也不占用小程序的包体积。

{
  "useExtendedLib": {
    "weui": true
  }
}

然后可以在页面中引入 dialog 弹窗组件

首先在页面的 json 文件加入 usingComponents 配置字段

{
  "usingComponents": {
    "mp-dialog": "weui-miniprogram/dialog/dialog"
  }
}

然后可以在对应页面的 wxml 中直接使用该组件

<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">
  <view>test content</view>
</mp-dialog>

Page({
  data: {
    buttons: [{text: '取消'}, {text: '确认'}]
  }
})

修改组件内部样式

每个组件可以设置ext-class这个属性，该属性提供设置在组件WXML顶部元素的class,可以在页面设置wxss样式来覆盖组件的内部样式。需要注意的是，如果要覆盖组件内部样式，必须wxss的样式选择器的优先级比组件内部样式优先级高。

index.json

"usingComponents": {
  "mp-half-screen-dialog": "weui-miniprogram/half-screen-dialog/half-screen-dialog"
},

index.wxml

<mp-half-screen-dialog ext-class="half-only-close"
  class="dialog-bean"
  maskClosable="{{false}}">
  <view slot="title"></view>
  <view slot="desc"></view>
</mp-half-screen-dialog>

全局样式文件 app.wxss

.half-only-close {
  .weui-icon-btn_close {
    top: 20rpx;
    padding: 0;
  }
}
avatar
文章
阅读
粉丝