云闪付小程序转微信小程序 ( 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-fieldv-model="name"@input="inputFn(name)"/>// 现 mpvue 中的 vant-weapp ，这样写才能双向绑定<van-fieldv-model="name"@input="name = $event.mp.detail;inputFn(name);"/>

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

微信支付携手云闪付APP上线支付立减新优惠
3月24日消息,随着数字经济.数字金融的高速发展,支付领域的互联互通不断深化.近日,微信支付联合银联云闪付APP更新上线了"助力抗疫·微信小程序多重礼"活动,新增"满10 ...
云闪付小程序开发1.1---(@像极了人生、有喜有悲....)
经过上一节云闪付1.0的铺垫,这里说明一个道理,生活嘛,还是要多去发现身边的东西,万一奇迹再现了呢!是吧! 看了<云闪付小程序的官方>开发文档之后,我受益匪浅,有一个好消息跟一个坏消息.. ...
第三方移动支付类产品竞品分析：支付宝VS微信支付VS云闪付
第三方移动支付类产品竞品分析:支付宝VS微信支付VS云闪付文章目录第三方移动支付类产品竞品分析:支付宝VS微信支付VS云闪付一.分析背景与竞品选择 1.竞品分析目的 2.行业研究与市场趋势分析 ...
年初五，迎财神 | 一张码如何实现多渠道(微信、支付宝、云闪付...)收款
大家好,我是小悟今天是正月初五,天气超级好,也是迎财神的日子,祝大家顺风顺水,财源滚滚,钱兔似锦. 既然要发财,那自然少不了收款咯.如果你是一个商家,肯定是想收款的方式越方便越好,但支付渠道有那么多 ...
云闪付和微信支付达成“条码支付互通”，二者支付功能有何不同？
对于第三方支付行业而言,支付宝.微信支付早就占据了大部分市场,消费者的选择都是哪个方便用哪个,云闪付作为后来者,可以说再想抢占市场已经失去先机,它聚集多个银行,如果早个几年,那就完全没有微信和支付宝什 ...
银联云闪付产品分析报告
银联云闪付产品分析报告一.云闪付产品银联云闪付是银联专为移动互联网打造的统一品牌(图1),旗下各产品使用了NFC.二维码等技术,可实现手机等移动设备在具有银联"QuickPass&quo ...
2 华为云闪付_教你区分信用卡刷卡、挥卡、插卡、云闪付等支付方式！
信用卡交易的N种方式总有很多小伙伴分不清刷卡?挥卡?插卡?闪付?云闪付等等......啥啥啥?这都是啥?? 在区别这几种刷卡方式之前,首先我们区分"持卡"交易和"无卡& ...
从0到1学习云闪付开发，云闪付小程序崛起之玩转云闪付小程序
一.技术探索云闪付小程序开发,也是最近两年才发展起来,对于绝大多数人来说是一个新的起点.新的领域,然鹅,对于一个开发老兵来说一切都如履平地. 废话不多说,直入主题,让我带领大家一起探索云闪付开发技术 ...
云闪付小程序实现分享转发
实现页面点击打开分享功能小程序是嵌套的vue开发接口文档地址 https://opentools.95516.com/applet/#/ upsdk.showSharePopup({title: ...
云闪付小程序吃坑，太坑了，整个人都要烧了，找遍全网都找不到这么详细的开发资料了
因为公司需要让研究云闪付小程序,一开始以为像微信小程序一样.打包后基本能改主体类名放各个平台上跑,然后在研究中发现云闪付官方开发者工具难用的一匹,简直找不出哪个IDE能与此匹敌了.首先找遍全网也查不到 ...

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

创建mpvue项目

适用依赖迁移

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

vant-weapp 使用问题

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

最新文章

热门文章

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

创建mpvue项目

适用依赖迁移

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

vant-weapp 使用问题

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

最新文章

热门文章

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

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