干货 | van+mpvue开发微信小程序入门

极乐君

发布于 2020-04-21 16:18:54

2K0

发布于 2020-04-21 16:18:54

文章被收录于专栏：极乐技术社区

基于van、mpvue开发的微信小程序，记录了开发前的技术选型、开发时如何搭建环境、上手项目、踩坑等。

2. 需求

报销单的填写

2.1. 页面

登录
我的-个人信息
首页

nav导航，填写日志、修改日志，填写报销单、报销单审核，把日志导出发送到指定到邮箱,选择日期查看本人的日志

2.2. 前端技术选型

2.2.1. 框架

（上图图来自掘金的一篇技术选型文章。）

我选择的 mpvue，但是GitHub最新的更新记录是在一年前，团队没有怎么维护了，这个问题也需要注意一下。

mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心， mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

使用 mpvue 开发小程序，你将在小程序技术体系的基础上获取到这样一些能力：

Vue.jsVuexwebpackVue.js

2.2.2. UI组件

选择一个合适的 UI 组件，可以帮助我们快速开发项目

将UI组件导入后可在项目册测试，在此之前为了让UI组件生效，我们需要将项目打包一下，即为我们需要打开终端，在项目的根目录下执行一遍（npm run build）,这样vant的UI组件就会在页面中正常发挥作用了

2.2.3. 前后端通信

一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。

目前Fly.js支持的平台包括：Node.js 、微信小程序、 Weex 、 React Native 、 Quick App 和浏览器，这些平台的 JavaScript 运行时都是不同的。

简介

Fly.js 是一个基于 promise 的，轻量且强大的Javascript http 网络库，它有如下特点：

提供统一的 Promise API。
浏览器环境下， 轻量且非常轻量 。
支持多种JavaScript 运行环境
支持请求／响应拦截器。
自动转换 JSON 数据。
支持切换底层 Http Engine，可轻松适配各种运行环境 。
浏览器端支持全局Ajax拦截。
H5页面内嵌到原生 APP 中时，支持将 http 请求转发到 Native。支持直接请求图片。

定位与目标

Fly 的定位是成为 Javascript http请求的终极解决方案。也就是说，在任何能够执行 Javascript 的环境，只要具有访问网络的能力，Fly都能运行在其上，提供统一的API。

官网

详细的文档请移步：Flyio官网文档。官网http请求使用的正是fly，为了方便大家验证fly功能特性，官网对fly进行了全局引入，您可以在官网页面打开控制台直接验证。

安装

使用NPM
npm install flyio
使用CDN(浏览器中)<script src="https://unpkg.com/flyio/dist/fly.min.js"></script>UMD（浏览器中）
https://unpkg.com/flyio/dist/umd/fly.umd.min.js
复制代码

2.3. 服务端框架技术选型

Nodejs

3. 快速上手

本文假设你既不会 vue 也不会小程序，如嫌拖沓，请直接快进跳读。

3.1. 初始化一个 mpvue 项目

现代前端开发框架和环境都是需要 Node.js 的，如果没有的话，请先下载 nodejs 并安装。

然后打开命令行工具：

# 1. 先检查下 Node.js 是否安装成功$ node -vv8.9.0$ npm -v5.6.0# 2. 由于众所周知的原因，可以考虑切换源为 taobao 源$ npm set registry https://registry.npm.taobao.org/# 3. 全局安装 vue-cli# 一般是要 sudo 权限的$ npm install --global vue-cli@2.9# 4. 创建一个基于 mpvue-quickstart 模板的新项目# 新手一路回车选择默认就可以了$ vue init mpvue/mpvue-quickstart my-project# 5. 安装依赖，走你$ cd my-project$ npm install$ npm run dev复制代码

随着运行成功的回显之后，可以看到本地多了个 dist 目录，这个目录里就是生成的小程序相关代码。

3.2. 搭建小程序的开发环境

小程序自己有一个专门的 微信开发者工具 ， 最新版本下载地址 。

这一步比较简单，按照提示一步步安装好就行，然后用微信扫描二维码登陆。至此小程序的开发环境差不多完成。

3.3. 调试开发 mpvue

选择 小程序项目 并依次填好需要的信息：

项目目录：就是刚刚创建的项目目录（非 dist 目录）
AppID：没有的话可以点选体验“小程序”，只影响是否可以真机调试。
项目名称。

如图：

点击“确定”按钮后会跳到正式的开发页面，点击“编辑器”按钮，关闭自带的小程序编辑器。然后如图：

此时，整个 mpvue 项目已经跑起来了。

用自己趁手的编辑器（或者IDE）打开 my-project 中的 src 目录下的代码试试。

到此，上手完毕。

3.4. 分包机制

mpvue-loader 1.1.2-rc.2 之后，优化了 build 后的文件生成结构，生成的目录结构保持了源文件夹下的目录结构，有利于对分包的支持。

3.5. webpack 配置

注意事项

新增的页面需要重新 npm run dev 来进行编译

温馨提示

在开发小程序之前,第1步、需要准备电脑上的开发环境有 > node 、 > npm 、 > git ，通过 > git 工具创建一个新项目，克隆已有代码。第2步、安装微信开发者工具，比如我们平时是在浏览器控制台上调试代码，微信小程序是通过在开发者工具调试代码的。如果是新项目在开发者工具中点击创建即可，如果是已有项目，点击导入即可。

4. 开发代码

我开发代码是基于 mpvue + van 的,新增页面需要 npm run dev 重启一下记录一些常用的编码、以及注意事项

4.1. mpvue

4.1.1. for循环嵌套

<template>
<ul v-for="(card, index) in list">
<li v-for="(item, itemIndex) in card">
            {{item.value}}        </li>
</ul></template>复制代码

4.1.2. 页面跳转

小程序不支持路由，因此，路由跳转使用小程序的页面导航api代替this.router.replace-->wx.reLaunch()//打开新页面获取当前页面地址this.$route.fullPath-->getCurrentPages()[0].route

4.1.3. 表单双向数据绑定与事件绑定

在mpvue中使用如 label="{{name}}"会报错

<van-cell-group>
  <van-field
             label="用户名"
             :value="userInfo.name"
             placeholder="请输入用户名"
             v-bind:border="false"
             @change="onChange($event,'name')"
             />
  <van-field
             label="密码"
             :value="userInfo.password"
             placeholder="请输入密码"
             v-bind:border="false"
bind:change="onChange($event,'password')"
             />
</van-cell-group>
复制代码

4.1. mock数据与真实接口如何设计

4.2. api封装

设置首次加载页面

在编译的地方设置，你只需要设置页面的路径，勾选上“使用以上条件编译”，如果页面需要参数，那可以把参数也传上。这样启动的就是你设置的页面。

小程序首次页面加载，可以在app.json中设置，第一个即为首次加载页面

后期考虑加入启动页面（第一次打开小程序会加载）=》登录页面=》首页

4.3. 引入阿里云图标

不引入阿里云图标了，改为使用本地静态图片。

注意事项：记得删除无用文件，否则手机预览时会出现白屏，因为报错啦。

因为小程序没有document，我引入了阿里云图标，里面有document.getElementsByTagName的代码，

到体验版时出现这个问题. 原来是 /static/iconfont/里的 iconfont.js+demo.html....这些无关文件引起的;iconfont文件夹如下即可

4.4. 跳转路由和路由传参数

列表页面向详情页面传参数

4.5. 自定义nav-bar头部

小程序里面也可以自定义nav-bar,但是没有必要，小程序有自带的头部

4.6. 动态设置title

wx.setNavigationBarTitle({      title: "登录XX管理系统"});
复制代码

4.7. 循环渲染过多数据出现卡顿

滚动滑动，虚拟dom

5. 小程序常见问题

跳过域名校验

在微信开发者工具中，可以临时开启 开发环境不校验请求域名、TLS版本及HTTPS证书 选项，跳过服务器域名的校验。此时，在微信开发者工具中及手机开启调试模式时，不会进行服务器域名的校验。

在服务器域名配置成功后，建议开发者关闭此选项进行开发，并在各平台下进行测试，以确认服务器域名配置正确。

如果手机上出现 “打开调试模式可以发出请求，关闭调试模式无法发出请求” 的现象，请确认是否跳过了域名校验，并确认服务器域名和证书配置是否正确。

网络

在小程序/小游戏中使用网络相关的 API 时，需要注意下列问题，请开发者提前了解。

1. 服务器域名配置

每个微信小程序需要事先设置通讯域名，小程序 只可以跟指定的域名进行网络通信 。包括普通 HTTPS 请求（ wx.request ）、上传文件（ wx.uploadFile ）、下载文件（ wx.downloadFile ) 和 WebSocket 通信（ wx.connectSocket ）。

从基础库 2.4.0 开始，网络接口允许与局域网 IP 通信，但要注意 不允许与本机 IP 通信 。

从 2.7.0 开始，提供了 UDP 通信（ wx.createUDPSocket )。

配置流程

服务器域名请在「小程序后台-开发-开发设置-服务器域名」中进行配置，配置时需要注意：

域名不能使用 IP 地址（小程序的局域网 IP 除外）或 localhost；
域名仅支持https ( wx.request 、 wx.uploadFile 、 wx.downloadFile ) 和 wss ( wx.connectSocket ) 协议；
可以配置端口，如 myserver.com:8080 ，但是配置后只能向 myserver.com:8080 发起请求。如果向 myserver.com 、 myserver.com:9091 等 URL 请求则会失败。
如果不配置端口。如 myserver.com ，那么请求的 URL 中也不能包含端口，甚至是默认的 443 端口也不可以。如果向 myserver.com:443 请求则会失败。
域名必须经过 ICP 备案；
出于安全考虑， api.weixin.qq.com 不能被配置为服务器域名，相关API也不能在小程序内调用。开发者应将 AppSecret 保存到后台服务器中，通过服务器使用 getAccessToken 接口获取 access_token ，并调用相关 API；
对于每个接口，分别可以配置最多 20 个域名。

2. 网络请求

超时时间

默认超时时间和最大超时时间都是 60s ；
超时时间可以在 app.json 或 game.json 中通过networktimeout配置。

使用限制

网络请求的 referer header 不可设置。其格式固定为https://servicewechat.com/{appid}/{version}/page-frame.html ，其中 {appid} 为小程序的 appid， {version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本；
wx.request 、 wx.uploadFile 、 wx.downloadFile 的最大并发限制是 10 个；
wx.connectSockt 的最大并发限制是 5 个。
小程序进入后台运行后，如果 5s 内网络请求没有结束，会回调错误信息 fail interrupted ；在回到前台之前，网络请求接口调用都会无法调用。

返回值编码

建议服务器返回值使用 UTF-8 编码。对于非 UTF-8 编码，小程序会尝试进行转换，但是会有转换失败的可能。
小程序会自动对 BOM 头进行过滤（只过滤一个BOM头）。

回调函数

只要成功接收到服务器返回，无论 statusCode 是多少，都会进入 success 回调。请开发者根据业务逻辑对返回值进行判断。

3. 常见问题

HTTPS 证书

小程序必须使用 HTTPS/WSS 发起网络请求。请求时系统会对服务器域名使用的 HTTPS 证书进行校验，如果校验失败，则请求不能成功发起。由于系统限制，不同平台对于证书要求的严格程度不同。为了保证小程序的兼容性，建议开发者按照最高标准进行证书配置，并使用相关工具检查现有证书是否符合要求。

对证书要求如下：

HTTPS 证书必须有效；
- 证书必须被系统信任，即根证书被已系统内置
- 部署 SSL 证书的网站域名必须与证书颁发的域名一致
- 证书必须在有效期内
- 证书的信任链必需完整（需要服务器配置）
iOS 不支持自签名证书;
iOS 下证书必须满足苹果 App Transport Security (ATS) 的要求;
TLS 必须支持 1.2 及以上版本。部分旧 Android 机型还未支持 TLS 1.2，请确保 HTTPS 服务器的 TLS 版本支持 1.2 及以下版本;
部分 CA 可能不被操作系统信任，请开发者在选择证书时注意小程序和各系统的相关通告。
- Chrome 56/57 内核对 WoSign、StartCom 证书限制周知

证书有效性可以使用 openssl s_client -connect example.com:443 命令验证，也可以使用其他在线工具。

除了网络请求 API 外，小程序中其他 `HTTPS` 请求如果出现异常，也请按上述流程进行检查。如 https 的图片无法加载、音视频无法播放等。

6. 我的踩坑记录

记录耗费我时间比较久的一些问题，也附上我的踩坑时间，希望能帮助到有需要的人。

小程序坑在哪里？选择第三方框架mpvue,van，那么要注意写法的问题，开发者工具要更新到最新版本，编译时没有出现期望的效果，可能需要清除开发者工具的缓存，或者rm -rf dist,运行npm run dev 命令重新编译，遇到问题先解决控制台的报错，根据提示到微信开发社区、或者其他搜索引擎去搜索问题，一个一个的解决，不要慌。

usingComponents全局引入van组件不起效果

** 2020-03-02: **使用mpvue搭建的项目，在app.json中，全局引入 van 组件不生效，其实和有赞的组件没有关系，是因为我电脑上的开发者工具很早之前就安装了，而 usingComponents 是新版本才支持的，那么开发者工具也要更新到最新版本啦

iphone8Plus预览模式van组件页面出现空白

**2020-03-13: **调试环境：iPhone8plus，开发者工具V1.02.1911180,在开发者工具中预览、真机调试都能正常显示，但是真机扫描预览模式的二维码，只能看见底部的tabbar,内容区是空白的，如图：

因为小程序没有document，引入了阿里云图标，里面有document.getElementsByTagName的代码，

到体验版时出现这个问题. 原来是 /static/iconfont/里的 iconfont.js+demo.html....这些无关文件引起的;iconfont文件夹如下即可

删除无关文件后，需要执行

sudo rm -rf dist
npm run dev复制代码

删除整个dist文件=》重新编译=》在开发者工具中清除缓存=》点击编译=》点击预览=》手机扫码=》正常显示

把这个问题解决了，我的手机预览白屏问题也解决了，开发小程序的时候一定要控制台报错解决了，再去定位一些奇怪的问题。

重启电脑后，启动开发者工具报错

**解决方案：**关闭V**或者抓包工具=》关闭开发者工具=》重启开发者工具=》清除全部缓存=》点击预览=》ok

因为微信开发者工具采用了Https连接，所以任何可能会影响网络的应用程序都应该关闭。

否则可能会对开发者工具造成影响。

does not have a method "onClickLeft" to handle event "click-left".

跳转的页面不可以在app.json中定义，比如说绝对不可以在tabbar的path中定义

wx.nextTick is not a function

解决方案：因为设置了基础库，一直没更新基础库，把基础库改成最新的了2.10.2，就可以正常运行了。

iOS上https网络请求出现request begin，获取不到数据

二维数组的对象共享一个内存地址

导致填写报销明细表单时，双向数据绑定的值会影响其他明细表单的值，导致提交失败，通过动态创建内存地址不指向一个地址解决问题。

mpvue嵌套组件数据无法实时更新

解决方案1：将两个组件合并成一个组件

最简单、最粗糙的方式，将两个组件合并成一个组件，在一个组件内进行数据更新，就不会出现组件之间数据不同步的问题了。

不过这样的的问题就是，当前组件会很大，本来我们就是为了解耦功能，才要拆分组件的，不能再次回到过去吧。

解决方案2： `watch`

在unit.vue组件中，使用watch监听某个属性的变化，这样外部的数据发生变化时，watch就能监听到：

解决方案3: 采用vuex状态管理数据

多维数组改变长度视图不更新

解决方案：

this.businesstypes = [...this.businesstypes];
复制代码

7. 构建与发布流程

7.1. 上传代码

在微信开发者工具中上传代码的前提是，该项目导入时，绑定到appid（非测试的appid）与开发者后台到appid一致，上传代码后才能在后台看见提交记录

7.2 开发者后台提交审核

上传代码提交审核申请后，审核时间一般在7个工作日，如现在也想体验线上版本，那么我们可以在后台设置一个线上体验版本，并且设置体验成员（没有设置为体验成员扫码二维码是无法打开小程序的），这样内部的开发人员、测试等成员可以提前体验线上版本。

8. 用户体验

8.1. 不自定义nav-bar

不自定义

微信本身有自带的nav-bar，也支持返回上一个页面，我没有选择自定义nav-bar，而是选择微信自带的导航栏和动态设置title。

**我的出发点：**小程序，越轻量级越好，不追求花枝招展，在于功能的易用性、流畅性、便捷性、即用即走。

8.2. 提交按钮固定在底部

**我的出发点：**用户在填写表单过程中，不用再次滚动也能操作提交按钮，按钮明显、易用。

8.2. 登录按钮禁用

如果用户名或者密码为空，直接禁用按钮，而不是通过文字提示用户用户名或者密码不能为空

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-04-19，如有侵权请联系 cloudcommunity@tencent.com 删除

小程序

本文分享自极乐技术社区微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度