微信小程序移植安卓App的一些经验

小程序基于微信平台，用户量庞大，而且微信内置的云端开发和组件系统，不仅免费且极大的提升了开发效率，能让我们在很短的时间内开发出一个完成度较高的产品。但是由于小程序在微信中没有快捷方式，出于用户留存率考虑，一般在发布小程序时还会同步发行一个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> 这个不用管

微信小程序移植安卓App的一些经验