小程序基于微信平台，用户量庞大，而且微信内置的云端开发和组件系统，不仅免费且极大的提升了开发效率，能让我们在很短的时间内开发出一个完成度较高的产品。但是由于小程序在微信中没有快捷方式，出于用户留存率考虑，一般在发布小程序时还会同步发行一个App版本。下面我分享一下如何使用uniApp将小程序移植到安卓平台。
环境搭建建议：
建议在chrome中安装Inspect Devices和Allow-Control-Allow-Origin: *两个插件，这样，我们除了必要的硬件测试要使用模拟器和真机外，其余的大部分逻辑都可以在chrome中调试，这能大幅提高调试效率，同时Allow-Control-Allow-Origin: *允许在前端跨域(注意Allow-Control-Allow-Origin: *只是作用于chrome,安卓中不存在跨域的问题)
微信小程序移植：
uniAPP采用vue实现前端，所以小程序中绝大部分代码只需要简单更改即可使用。
template中普遍需要更改的部分：
- wx:if改成v-if，wx:else改成v-else，wx:for改成v-for
- 去掉标签中变量所有的{{}}，同时标签改成v-bind:
- 标签中bindtap改成@tap，catchtap改成@tap
- v-key='*this'改成:key='idx'
- data-url="{{item.url}}" data-name='{{item.style}}'传值方法失效，要把这些data-改成函数的参数来实现传值
- v-for="{{XX}}"改成v-for="(item,index) in XX"
script中普遍需要更改的部分：
- 所有的引用全部改成相对引用，本层目录前必须加./
- data{}改成data(){ return {} }
- this.data改成this. ，that.data 改成 that.
- Component({})和Page({})都改成export default{}
- triggerEvent改成$emit
- 安卓平台所有的Oeject方法都失效，例如
Obeject.keys要用for( let key in obj)代替，Obeject.assign({},XX)要用JSON.parse(JSON.stringify(XX))代替 - 安卓平台不支持对象比较，比如我在写修改微博功能时，习惯，先保存一个
oldWeibo={}，然后再生成一个newWeibo={}，这样方便回滚与控制状态，但是在安卓中oldWeibo==newWeibo是不起作用的，必须精确到键值oldWeibo.msg==newWeibo.msg - properties改成props (注意，在小程序中properties是可以被赋值的，而在vue中props 是只读的，如果你在小程序中对properties有赋值操作，那么在vue中要对props 用watch进行改写)
//修改前小程序中的写法
properties: {
shops: Array,
}
//修改后vue中的写法
props: {
pshops: Array,
}
pshops: { // 监视props变化
handler(val) {
this.shops = val; // 将变化的值赋给shops
},
immediate: true, // 初始化时也触发该函数
deep: true // 深度监控，即对象深复制也可以触发该函数
},
data(){
return {
shops:[] // 接收本页面中的赋值
}
}
- 微信小程序中还有个
selectComponent函数，他的本意是为了弥补自己没有watch的缺陷，该函数可以使得父组件可以在任意时刻调用子组件中的方法。比如在父组件中
this.sub= this.selectComponent('#sub') // sub为子组件id
this.sub.init(params) // init为子组件中的方法，但params来自父组件
但是在vue中selectComponent必须使用watch对其改写，思路是将params作为props传递给子组件，然后在子组件中使用watch监听该props，写法见上一条
入口文件中需要添加的部分：
在main.js中，对Vue的原型进行扩展，使其能够支持store和setData方法。
import Vue from 'vue'
import App from './App'
import store from './store'
Vue.config.productionTip = false
Vue.prototype.$store = store
Vue.prototype.setData = function(obj) {
let that = this;
let keys = [];
let val, data;
Object.keys(obj).forEach(function(key) {
keys = key.split('.');
val = obj[key];
data = that.$data;
keys.forEach(function(key2, index) {
if (index + 1 == keys.length) {
that.$set(data, key2, val);
} else {
if (!data[key2]) {
that.$set(data, key2, {});
}
}
data = data[key2];
});
});
};
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
可以忽视的错误：
微信小程序中的<icon> 标签在uni平台会被编译成<v-uni-icon>，由于chrome不认识这个图标标签，所以会报错Unknown custom element: <v-uni-icon>， 这个不用管，等最后编译成安卓App后图标就正常了
报错Unknown custom element: <v-uni-icon> 这个不用管
网友评论