小程序技术总结参考

多端比较 #

框架名称	h5	小程序	weex	Native	可否使用其它ui
taro	Y	Y	N	Y	ui根据修改就可以适配taro如 vant,light-ui,WeUI,Antd Design Mobile,自带的,京东ui等
uniapp	Y	Y	Y	N	只能用它自己的
Chameleon	Y	Y	Y	N	ui根据修改就可以适配Chameleon light-ui,自带的,滴滴ui
mpvue	Y	Y	N	N	只能使用自己的例如美团外卖

weex和Native 可以以一定的方式转为app 比如android ios

Chameleon #

CML (Chameleon) 是一个跨多端开发的统一解决方案，它可以像变色龙一样适应不同的环境。一次开发，多端运行，一端所见即多端所见。

base64A1

点评

滴滴的开源小程序框架 使用的是类vue语法 安装它自己的规范开发
比如 c-model 和v-model功能差不多但是不能直接使用v-model,一定要使用得这样
//注意这个 lang='vue'
<template lang='vue'>
  <page title="chameleon">
       <view><text>message:{{message}}</text></view>
       <input v-model="message"></input>
  </page>
</template>
实际上uniapp照样也是使用的类vue 只不过uniapp模拟了几乎绝大多数的vue api
其实这种类vue挺恐怖的  框架自己把vue拿来魔改或者自己研发了一种数据驱动的响应式js框架

uniapp #

uni-app 是一个使用 Vue.js 开发小程序、H5、App的统一前端框架。开发者使用 Vue 语法编写代码，uni-app 框架将其编译到小程序（微信/支付宝/百度/字节跳动/QQ/钉钉）、App（iOS/Android）、H5等多个平台，保证其正确运行并达到优秀体验

点评

类vue语法目前有说法是已经用的全套vue语法了 ,支持多端 比如 小程序,h5,app 可以以一定的约束下达成一次编写多端运行  但是前提条件你必须用它的组件,
否则就会出问题

taro #

Taro 一套遵循React 语法规范的多端开发解决方案。使用 Taro，只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、App 端等）运行的代码。同时 Taro 还提供了开箱即用的语法检测和自动补全等功能

点评

支持非常多的数据驱动响应式js框架如vue,react,Nerv
也可以从某程度上支持android和ios 目前是转为Native应用然后到android和ios
然后就是ui 支持非常的多  可以使用非自带的ui,目前它的设计的框架和理念在小程序框架应该是最好的,有很多人看好它
最好当你使用vue的时候你基本上可以使用任何vue语法使用react也是如此  似乎没做这些限制  对开发极其的友好

taro ui 参考demo
Antd Design Mobile
WeUI
vant UI
Taro UI 可以一定程度的定制化定制化
taro 内置组件

经验总结 #

法律法规微信小程序总结 #

最开始的时候我们都没有做过微信小程序 然后到网上去调研了下
其实用原生微信小程序的逻辑写的项目其实很少的,因为很多企业都认为是没有必要为了微信小程序就单独去学习 
小程序编写页面的那种规范,大多是选择使用第三方的框架然后反编译为微信小程序格式
最开始是选择的 chameleon 然后在看chameleon 的时候发现的taro  然后相比较之下觉得taro更适合一点
taro 接入的成本也比较低  也利于后续升级  假如项目性能不够了 还可以改为react模型的应用

期间的话 也需要一些东西  没接触过的比如获取手机号码，获取微信小程序 以及和后端联调所幸都依依解决了
也有一些问题比如vuex在h5调试的刷新F5刷新页面 变量状态就消失和环境变量只能在linux下才行,打包后应用体积超过2M等  后面陆续的把这些都处理了

本次应用是vue2+vuex+taro+vant

Taro Vant开发配置攻略 #

Taro v3.3+

在 Taro 中使用有赞前端团队开源的移动端组件库Vant。

Vant 官方示例：https://vant-contrib.gitee.io/vant/mobile.html#/zh-CN。

能直接兼容使用的组件大概为 70%，具体适配情况请见下文。

Getting Start #

# 安装 CLI
npm i @tarojs/cli@alpha -g

# 启动项目
cd taro-vant
npm i
taro build --type weapp --watch

# 预览项目时需要以 prod 模式打包
taro build --type weapp

目录结构 #

项目目录结构 #

├── dist                        编译结果目录
|
├── config                      项目编译配置目录
|   ├── index.js                默认配置
|   ├── dev.js                  开发环境配置
|   └── prod.js                 生产环境配置
|
├── src                         源码目录
|   ├── pages                   页面文件目录
|   |   └── index               index 页面目录
|   |       ├── index.js        index 页面逻辑
|   |       ├── index.css       index 页面样式
|   |       └── index.config.js index 页面配置
|   |
|   ├── app.js                  项目入口文件
|   ├── app.css                 项目总通用样式
|   └── app.config.js           项目入口配置
|
├── project.config.json         微信小程序项目配置 project.config.json
├── project.tt.json             字节跳动小程序项目配置 project.tt.json
├── project.swan.json           百度小程序项目配置 project.swan.json
├── project.qq.json             QQ 小程序项目配置 project.qq.json
|
├── babel.config.js             Babel 配置
├── tsconfig.json               TypeScript 配置
├── .eslintrc                   ESLint 配置
|
└── package.json

编译配置

└── config                      项目编译配置目录
    ├── index.js                默认配置
    ├── dev.js                  开发环境配置
    └── prod.js                 生产环境配置

用于配置 Taro 项目的编译行为、修改 Webpack 配置等，详情请参考编译配置和编译配置详情。
源码组织
和小程序规范一样，Taro 包含一个描述整体程序的 app 和多个描述各自页面的 page。

app
└── src                         源码目录
    ├── app.js                  项目入口文件
    ├── app.css                 项目总通用样式
    └── app.config.js           项目入口配置

小程序的主体由下面三个文件组成： #

文件必须作用
app.js 是小程序入口逻辑
app.css 否小程序全局样式
app.config.js 是小程序全局配置
代码示例请根据你选择的框架进行查看：React, PReact, Vue, Vue3。
1. 小程序全局配置
app.config.js 对应小程序规范的全局配置文件 app.json，优势在于它是 JS 文件可以编写逻辑。配置以微信小程序的全局配置为规范。详情请参考全局配置。
1. 小程序全局样式
小程序全局样式文件可以通过 ES6 规范的 import 进行引入。

app.js
import './app.css';

page

└── src                         源码目录
    └── pages                   页面文件目录
        └── index               index 页面目录
            ├── index.js        index 页面逻辑
            ├── index.css       index 页面样式
            └── index.config.js index 页面配置

一个小程序页面由三个文件组成，如下： #

文件必须作用
page.js 是页面入口逻辑
page.css 否页面样式
page.config.js 否页面配置
1. 页面配置
page.config.js 对应小程序规范的页面配置文件 page.json，优势在于它是 JS 文件可以编写逻辑。配置以微信小程序的页面配置为规范。详情请参考页面配置。
1. 页面样式
页面的样式文件可以通过 ES6 规范的 import 进行引入。

pages/index/index.js
import './index.css';

1. 页面路由
页面路由与小程序规范一致，需要在小程序全局配置 app.config.js 中进行配置。
项目配置

└──project.config.json         微信小程序项目配置 project.config.json

各类小程序平台均有自己的项目配置文件，Taro 支持对它们进行适配，详情请参考项目配置。
Babel 配置

└── babel.config.js             Babel 配置

请参考 Babel 配置
ESLint 配置

└── .eslintrc                   ESLint 配置

建议的配置 #

打包压缩

//config -> dev.js
module.exports = {
  env: {
    NODE_ENV: '"development"'
  },
  defineConstants: {
  },
  mini: {
    webpackChain: (chain, webpack) => {
      chain.merge({
        plugin: {
          install: {
            plugin: require('terser-webpack-plugin'),
            args: [{
              terserOptions: {
                compress: true, // 默认使用terser压缩
                // mangle: false,
                keep_classnames: true, // 不改变class名称
                keep_fnames: true // 不改变函数名称
              }
            }]
          }
        }
      })
    }
  },
  h5: {}
}

环境变量 (taro原生只能是linux)
考虑使用 cross-env
关于分享好友和朋友圈可以考虑用一个公共js 来处理这些便于加密和后续的解密等操作

当环境不一致参考package.json #

{
  "name": "kbs_station_weapp",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "templateInfo": {
    "name": "default",
    "typescript": true,
    "css": "less"
  },
  "scripts": {
    "build:weapp": "cross-env NODE_ENV=development taro build --type weapp",
    "build:weapp:p": "cross-env NODE_ENV=production taro build --type weapp",
    "build:p": "cross-env NODE_ENV=production taro build --type weapp",
    "build:d": "cross-env NODE_ENV=development taro build --type weapp",
    "build:p:linux": "set NODE_ENV=production && taro build --type weapp",
    "build:d:linux": "set NODE_ENV=development && taro build --type weapp",
    "build:swan": "taro build --type swan",
    "build:alipay": "taro build --type alipay",
    "build:tt": "taro build --type tt",
    "build:h5": "cross-env NODE_ENV=development taro build --type h5",
    "build:h5:p": "cross-env NODE_ENV=production taro build --type h5",
    "build:rn": "taro build --type rn",
    "build:qq": "taro build --type qq",
    "build:jd": "taro build --type jd",
    "build:quickapp": "taro build --type quickapp",
    "dev:weapp": "cross-env NODE_ENV=development taro build --type weapp --watch",
    "dev:weapp:p": "cross-env NODE_ENV=production taro build --type weapp --watch",
    "dev:swan": "npm run build:swan -- --watch",
    "dev:alipay": "npm run build:alipay -- --watch",
    "dev:tt": "npm run build:tt -- --watch",
    "dev:h5": "cross-env NODE_ENV=development taro build --type h5 --watch",
    "dev:h5:p": "cross-env NODE_ENV=production taro build --type h5 --watch",
    "dev:rn": "npm run build:rn -- --watch",
    "dev:qq": "npm run build:qq -- --watch",
    "dev:jd": "npm run build:jd -- --watch",
    "dev:quickapp": "npm run build:quickapp -- --watch"
  },
  "browserslist": [
    "last 3 versions",
    "Android >= 4.1",
    "ios >= 8"
  ],
  "author": "",
  "dependencies": {
    "@babel/runtime": "^7.7.7",
    "@tarojs/cli": "3.4.12",
    "@tarojs/components": "3.4.12",
    "@tarojs/plugin-framework-vue2": "^3.4.12",
    "@tarojs/plugin-html": "3.4.12",
    "@tarojs/runtime": "3.4.12",
    "@tarojs/taro": "3.4.12",
    "qrcode": "^1.5.1",
    "vant": "^2.12.13",
    "vue": "^2.5.0",
    "vue-template-compiler": "^2.5.0",
    "vuex": "^3.0.0",
    "vuex-persist": "^3.1.3"
  },
  "devDependencies": {
    "@babel/core": "^7.8.0",
    "@tarojs/mini-runner": "3.4.12",
    "@tarojs/plugin-less": "^2.2.10",
    "@tarojs/webpack-runner": "3.4.12",
    "@types/webpack-env": "^1.13.6",
    "@typescript-eslint/eslint-plugin": "^4.15.1",
    "@typescript-eslint/parser": "^4.15.1",
    "babel-plugin-import": "^1.13.3",
    "babel-preset-taro": "3.4.12",
    "cross-env": "^7.0.3",
    "eslint": "^6.8.0",
    "eslint-config-taro": "3.4.12",
    "eslint-plugin-vue": "^6.x",
    "less": "^4.1.3",
    "less-loader": "^11.0.0",
    "sass": "^1.25.0",
    "sass-loader": "^8.0.2",
    "stylelint": "9.3.0",
    "typescript": "^4.1.0",
    "vue-loader": "^15.9.2",
    "webpack": "^4.26.1"
  }
}