基于项目Vue-Shop 到Mini-Shop的开发总结

页面修改

底部导航栏修改

图标全部使用图片，在app.json 中配置

头部标题栏修改

移除后退加标题样式，通过自带的标题加背景颜色的json 配置方式

轮播图修改

使用自带的swiper 进行修改

页面标签及事件修改

标签名	目标标签
img	image
a	navigator
i span strong font em b	text
其他	view

属性名	目标属性
v-if	wx:if="{{ }}"
v-elseif	wx:elif="{{ }}"
v-else	wx:else
v-bind:src	src
href	url
@click	bindtap
v-on:click	bindtap
(click)	bindtap
@touchstart	bindtouchstart
@touchmove	bindtouchmove
@touchend	bindtouchend
:key
v-show	hidden="{{! }}"
v-for	wx:for="{{ }}" wx:for-index=" " wx:for-item=""
v-model	value="{{ }}" bind:input=" Changed"
第一个字符为@且值不为空	bind:
第一个字符为:	={{ }}
其他包含@

样式修改

图标字体修改

将ttf的字体文件转化成base64 放入样式中

import * as fs from 'fs';
export function ttfToBase64(file: string): string {
    const content = fs.readFileSync(file);
    return 'url(\'data:font/truetype;charset=utf-8;base64,'+ content.toString('base64') +'\') format(\'truetype\')';
}

标签样式修改

将文件中的标签选择器进行相应转化

程序修改

页面方法修改

created() 转化为 onLoad

$route 全部转化为 onLoad(query) 的参数

修改属性值，只能通过 setData 修改

接口调用修改

将 axios 改为 wx.request

store 修改

将所有的store 全部放到 app.ts 中 globalData

组件修改

左滑删除

在vue中可以通过$refs 进行排异（只有一个左滑状态，其他自动恢复原状），小程序中可以通过新增自定义组件加入关联关系进行排异

下拉刷新上拉加载更多

启用自定义组件，使用自带的 enablePullDownRefresh: true

地区选择

使用自带的地区选择picker，微信的网络请求有数据大小限制，自定义组件实现无法一次传入所有省市区，

自带地区选择只能获取到省市区名称，因此需要后台接口进行修改

弹出选择

自定义实现监听属性变化

public observe(key: string, callback: (newVal: any, oldVal: any) => void) {
    let val = this.data[key];
    Object.defineProperty(this.data, key, {
        configurable: true,
        enumerable: true,
        set: function(value) {
            // 用page对象调用,改变函数内this指向,以便this.data访问data内的属性值
            callback.call(this, value, val); // value是新值，val是旧值
            val = value;
        },
        get: function() {
            return val;
        }     
    })
}

总结

总的来说，转化过程没有太大的技术难度，就是每个页面都得改，比较繁琐。