微信小程序项目移植uniapp

微信小程序目录及文件结构：

app.js ：小程序逻辑
app.json ：小程序公共配置
app.wxss ：小程序公共样式表
js ：页面逻辑
wxml ： 页面结构
json ：页面配置
wxss ：页面样式表

uniapp目录及文件结构：

pages.json：配置页面路由、导航条、选项卡等页面类信息，详见。
manifest.json：配置应用名称、appid、logo、版本等打包信息，详见。
App.vue：应用配置，用来配置App全局样式以及监听应用的生命周期。
main.js：Vue初始化入口文件
static目录：存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此
pages目录：业务页面文件存放目录
components目录：组件文件存放目录

截图

微信小程序：

image.png

uniapp：

image.png

移植过程：

1.首先app.js=====》main.js

将app.js公用方法移植到main.js中，注意添加Vue.prototype.xxxx；
例如小程序方法：app.js

  /**
   * 获取商城ID
   */
  getWxappId() {
    return siteinfo.uniacid || 10001;
  },

移植后的uniapp方法:main.js

/**
 * 获取商城ID
 */
Vue.prototype.getWxappId = function() {
    return siteinfo.wxapp_id = 10001;
}

这里将下uniapp没有的方法setData，可以在这里自己添加一个

// 模拟继承微信setData的方法
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];
        })
    });
}

2.wxml 文件=====》.vue文件的<template>标签下

<template>
    <view>
        <!-- 将.wxml 文件下面内容拷贝到这里 -->
    </view>
</template>

修改的东西：搜索 wx: 替换为 v-，搜索 bind 替换为 @，style、class和uniapp一些属性
不同的地方都修改一下，变量itemStyle={{item.style}}在uni里需要这么表示:itemStyle="item.style"

3.wxss 文件里面的内容直接拷贝到vue的<style>下面

4.js兼容大部分小程序函数，自定义函数需要放在methods下面

5.组件引用

<script>中import移植的组件

import search from './search.vue'
import banner from './banner.vue'
import imageSingle from './imageSingle.vue'
import window from './window.vue'
export default {
        components: {
            search,
            banner,
            imageSingle,
            window,
            divvideo,
            divarticle,
        }
}