uni-app开发微信小程序和h5应用

最近，有个需求需要开发​​H5​​​应用和微信小程序。如果针对不同的平台开发自己的一套代码，那将是一件很糟糕的事情：如果下次需要兼容​​支付宝小程序、快应用​​​，那工作量随着平台的添加而快速增加。所以我们选择了​​uni-app​​开发。

​​uni-app​​​ 是一个使用 ​​Vue.js​​ 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

工具要求

• 安装微信开发者工具稳定版
• 安装HBuilderX极客开发工具
• 谷歌浏览器/火狐浏览器/...

新建项目

这里可直接参考官网的​​创建uni-app​​。

1. 文件 => 新建 => 项目
2. 选择uni-app => 填写项目的名称 => 选择项目的存放位置 => 选择uni-app项目模版 => 点击创建

开启h5和微信小程序

开启​​h5​​：

开启微信小程序：

示例：是​​Mac​​配置

1. 配置微信开发者工具路径

2. 开启微信小程序的安全端口

3. 设置外部web服务调用url，格式：​​http://本地ip:端口号​​

4. 吊起微信开发工具

开发

接下来就是对需求的开发了，嗯～

都是搬砖的事情，我们简单聊聊其中需要注意的点⚠️。

1. ​​尺寸单位​​

​​uni-app​​支持的通用css单位包括 px、rpx。

​​px 和 rpx​​之间的转换关系如下：

​​设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx​​

换言之，页面元素宽度在​​uni-app​​中的宽度计算公式：

​​750 * 元素在设计稿中的宽度 / 设计稿基准宽度​​

举例说明：

1. 若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在​​uni-app​​​ 里面的宽度应该设为：​​750 * 100 / 750​​，结果为：100rpx。
2. 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在​​uni-app​​​ 里面的宽度应该设为：​​750 * 100 / 640​​，结果为：117rpx。
3. 若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在​​uni-app​​​ 里面的宽度应该设为：​​750 * 200 / 375​​，结果为：400rpx。

2. ​​网络请求​​

线上小程序运行时，网络相关的 API 在使用前需要配置域名白名单

使用示例：

uni.request({
    url: 'https://www.example.com/request', // demo url
    method: 'GET',
    data: {},
    header: {},
    success: res => {
        console.log(res.data)
    },
    fail: () => {},
    complete: () => {}
})

3. ​​路由与页面跳转​​

uni.navigateTo: 保留当前页面，跳转到应用内的某个页面，使用​​uni.navigateBack​​可以返回到原页面。

比如：

uni.navigateTo({
    url: 'pages/test?id=1&name=uniapp'

uni.redirectTo: 关闭当前页面，跳转到应用内的某个页面。

比如：

uni.redirectTo({
    url: 'pages/test?id=1&name=uniapp'

uni.reLaunch: 关闭所有页面，打开到应用内的某个页面。

比如：

uni.reLaunch({
    url: 'pages/test?id=1&name=uniapp'

uni.switchTab: 跳转到​​tabBar​​​页面，并关闭其他所有非​​tabBar​​页面。

比如：

uni.switchTab({
    url: 'pages/index/index' // 切换到设置的tabBar首页index页面

uni.navigateBack: 关闭当前页面，返回上一页或多级页面。可通过​​getCurrentPages()​​ 获取当前的页面栈，决定需要返回几层。

比如：

uni.navigateBack()

4. ​​rich-text富文本组件​​

当我们需要展示带有标签名称内容(即富文本)的时候，如果是单纯的使用​​text​​​和​​view​​​的组件，是不能够正确展示出来的，需要使用​​rich-text​​组件。

5. ​​小程序本地开发的模式配置​​

开发调试的时候，需要固定调试一个页面内容。这个配置就很有必要了。

在​​pages.json​​中配置即可，比如：

"condition": { // 模式配置，仅在开发期间生效
    "current": 0, // 当前激活的模式（list索引项）
    "list": [{
        "name": "swiper", // 模式的名称
        "path":"pages/component/swiper/swiper",//启动页面，必选
        "query":"interval=4000&autoplay=false"//启动参数，在页面的onLoad函数里面得到。
    },
    {
        "name":"test",
        "path":"pages/component/switch/switch"
    }]
}

具体实操：

"condition": {
   "current": 0,
   "list": [{
       "name": "首页",
       "path":"pages/index/index"
   },
   {
       "name":"忘记密码",
       "path":"pages/forget/forget"
   },
   {
       "name":"登陆",
       "path":"pages/login/login"
   }]
}

6. 配置底部导航

在项目的​​pages.json​​中配置pages和tabBar字段，如下：

"pages": [
   {
       "path": "pages/index/index",
       "style": {
               "navigationBarTitleText": "uni-app"
       }
   },
   {
       "path": "pages/center/center",
       "style": {}
   }
],
"tabBar": {
   "borderStyle": "black",
   "color": "#8F8F94",
   "list": [{
       "pagePath": "pages/index/index",
       "text": "首页"
   },
   {
       "pagePath": "pages/center/center",
       "text": "我的"
   }]
}

当然，你可以在​​tabBar -> list​​​字段中添加​​iconPath​​​和​​selectedIconPath​​​来表示​​未选中和选中​​状态。

7. 微信小程序报forceUpdate错误

报错信息如下：​​TypeError: Cannot read property 'forceUpdate' of undefined ​​

原因：没有配置​​appId​​​，这里直接使用小程序提供的测试​​appId​​wxa5ed8b26512accd9。

8. 条件编译

在模版​​html​​中使用如下：

<!-- #ifdef H5 -->
<text>h5 content</text>
<!-- #endif -->

<!-- #ifdef MP-WEIXIN -->
<text>wechat content</text>
<!-- #endif -->

在​​javascript​​中使用如下：

onLoad() {
    // #ifdef H5
    console.log("只有h5平台才有console方法")
    // #endif

    // #ifdef MP-WEIXIN
    console.log("只有微信平台才有的console方法")
    // #endif

发布h5和微信小程序

发布​​h5​​：

可参考官网​​发布为H5​​

最后在项目中生成​​dist​​​文件。页面入口路径为​​./unpackage/dist/build/../index.html​​。