项目从vue转微信小程序体验

Fork Me On Github

基于项目Vue-ShopMini-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 放入样式中

ts
     
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\')';
}
12345

标签样式修改

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

程序修改

页面方法修改

created() 转化为 onLoad

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

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

接口调用修改

axios 改为 wx.request

store 修改

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

组件修改

左滑删除

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

下拉刷新上拉加载更多

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

地区选择

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

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

弹出选择

自定义实现监听属性变化

ts
                
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;
        }     
    })
}
12345678910111213141516

总结

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

点击查看全文
标签: vue小程序
0 1834 0
升级vue3记录
2021年08月
最近有空折腾一下vue3,把以前的vue项目从vue2升级到vue3
滚动加载的页面默认无法后退保存之前的滚动位置,这么解决
vue 实现左滑删除,右滑点赞,一个滑动其他的复原!
Vuex 使用心得
2019年03月
Vuex 使用心得,typescript版。