云闪付小程序 转 微信小程序 ( vue ＞＞ mpvue ＞＞ wxApplets ) 记录

创建mpvue项目

引入脚手架
npm install vue-cli -g

创建基于mpvue的项目 ，选项全部回车Yes，ESLint 选 No
vue init mpvue/mpvue-quickstart projectName

· VScode 打开项目， cnpm install 安装依赖，npm run dev 编译

· 会发现文件夹内多出 dist 文件夹，里面的 wx 就是 run dev 编译出的 微信小程序代码

· 使用微信开发者工具导入 wx ，将开发者工具设置为保存时自动编译

· 尔后在 VScode 里编写代码保存会自动编译到 dist 的 wx ，小程序开发工具会同步更新页面

适用依赖迁移

配置 less 编译环境

cnpm install less --save
cnpm install less-loader --save

在 webpack.base.conf.js 的 rules 节点下新增

{
    test: /.less$/,
    loader: “style-loader!css-loader!less-loader”
}

配置 vant 组件，旧项目使用的是 vant UI库 ，这里入乡随俗使用 vant-weapp ，拉取下方链接

git clone https://gitee.com/vant-contrib/vant-weapp.git

下载完 UI 库后将里面的 dist 文件夹改名 vant 放到 项目的 static 文件夹下

在需要使用 vant 组件的页面 mian.json 文件中像下方一样引入即可，或是在 app.json 中全局引入 ，全局引入的话路径改成 /static 开头就可以

‘usingComponents’ : {
    ‘van-button’ : ‘…/…/static/vant/tabs/index’
}

配置Axios

cnpm install axios --save
cnpm install qs --save

下面是 axios 请求和拦截函数，在 main 中引入 ，尔后在页面中使用 this.$call 调用 。

	import Vue from 'vue';
	import axios from 'axios';
	import qs from 'qs';
	import store from "@/store"
	import global from '../config/config';
	
	axios.defaults.timeout = 1000000;                      // 请求熔断时间
	axios.defaults.baseURL = global.baseUrl;               // 请求前缀
	axios.defaults.headers = {                             // 请求头内容
	   "content-type": "application/json"
	};
	
	
	axios.interceptors.request.use(
	   function (config) {
	      // ...
	      return config;
	   }, function (error) {
	      // ...
	      return Promise.reject(error);
	   });
	
	
	axios.interceptors.response.use(
	   function (response) {
		  // ...
	      return response;
	   }, function (error) {
	      // ...
	      return Promise.reject(error);
	   })
	
	
	axios.defaults.adapter = function (config) {
	   return new Promise((resolve, reject) => {
	      // get请求 参数序列化
	      let data = config.method === 'get' ? config.params : qs.stringify(config.data)
	      
	      wx.request({
	         url: config.baseURL + config.url,
	         method: config.method,
	         header: config.headers,
	         data: data,
	         success: (res) => { return resolve(res) },
	         fail: (err) => { return reject(err) }
	      })
	   })
	}
	
	// 封装 外部请求函数
	function call(config) {
	
	   if (!config.hide) {
	      wx.showLoading({
	         title: '加载中',
	      })
	   }
	   
	   return new Promise((resolve, reject) => {
	      axios({
	         method: config.method,
	         url: config.url,
	         params: config.params
	      }).then(res => {
	         !config.hide && wx.hideLoading();
	         if (res.status) {
	            resolve(res.data);
	         } else {
	            reject(res.data);
	         }
	      }).catch(err => {
	         !config.hide && wx.hideLoading();
	         reject(err);
	      })
	   })
	}
	
	export default {
	   call
	}
	
	Vue.prototype.$call = call;
	

下面是迁移过程中遇到的问题

图片没有设置高度会被 wx 默认设置 240px 高度，需要手动赋值高度。

v-show 无法更新配置了display 属性的 dom元素，可以使用 v-if 替代。

map.getCenterLocation API 无法在 vue 生命周期生效，需要放到小程序的生命周期里
( onLoad、onShow)

bind 开头的事件 ( 例如 bindtap ) ， 改成 @ ( @tap )

有些 bind 事件会莫名编译失效，例如 <map> 的 @regionchange 事件失效，得同时加上 @end 绑定事件才可以触发
\

vant-weapp 使用问题

	// 原 vue 中的 vant ，输入框双向绑定
	<van-field
        v-model="name"
        @input="inputFn(name)"
	/>
	
	// 现 mpvue 中的 vant-weapp ，这样写才能双向绑定
	<van-field
        v-model="name"
        @input="
          name = $event.mp.detail;
          inputFn(name);
        "
	/>