页面修改
底部导航栏修改
图标全部使用图片，在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;
}
})
}
总结
总的来说，转化过程没有太大的技术难度，就是每个页面都得改，比较繁琐。
转载请保留原文链接： https://zodream.cn/blog/id/55.html