以下标签的替换需要注意css中的选择器也需要跟着替换。
h1~5注意字体大小需要调整,具体根据页面大小调整。
注意:text的字体大小,选择器必须选择到text标签才能修改其字体大小。
因为text标签它本身就拥有一个默认字体大小12px的属性。
image需要闭合否则会运行时报错。
请求需要从axios
更换为uni.request
从router
变为pages.json
配置
从router.push
标为uni.navigateTo
,其他的router.go
等等也需要被替换。
路由拦截,可以使用ui组件中的路由拦截,例如uview
的路由跳转uni.$u.route
方法可以配置路由拦截。
此时路由跳转,需要全部更换成改方法
小程序时没有localStorage、sessionStorage和cookies
的,如果需要存缓存就只能用uni.setStorage、uni.setStorageSync
。
项目中ui组件在uniapp中大概率是不兼容的,比如:我们vue移动端常用的组件有vantUI
等等,不兼容uniapp。
这时可以去uniapp官网的插件市场,找到兼容的ui组件,比如uni-ui、uview
然后替换ui组件。
其中大体包括一些标签,例如:
input,textarea,checkbox,radio,button,img
等等,
以上这些需要替换成新替换上去ui组件对应的标签。
1、首先:uniapp项目中可以不用npm install就不用,如果用的话,尽量保持组件的体积不要过大
,因为小程序要发布提交到管理平台的话,整体打包后的代码主包
不能超过2M
,如果组件太大,会导致vendor.js
文件过大。
2、有些组件有包括dom操作根据情况使用,这里是不建议使用的
,因为如果你要兼容小程序的话,小程序中是没有dom操作的
。
遇到这种情况的话:
(1)要么就在uniapp插件市场寻找对应的组件进行替换。
(2)要么就自己写一个,小程序有自己的dom操作api,uni.createSelectorQuery
,可去官网搜索这个api进行查看。
有时候运行到h5是正常的,
运行到小程序就被吃掉了,直接不见。
(重要)
H5我们使用::v-deep一般就能穿透到组件内部去影响样式。
但是小程序光有这个还不行,得在methods同级加上:
options: {
styleIsolation: "shared"
}
^^
H5上数据能够用state或getters中的数据进行数据的实时渲染。
但小程序不行
,永远是旧的数据,无法进行实时渲染。
小程序得借助页面中的computed属性,来实现vuex数据在dom上的实施渲染,例如:
computed: {
username() {
return this.$store.getters.user.username;
}
}
H5中,如果在main.js中使用Vue.prototype.定义一个属性,这时候如果把这个属性使用在视图上,当属性变化的时候,视图也会跟着变化。
但是在小程序上却不行
,永远是旧的数据,无法进行实时变化。
解决办法:
(1)尽量不设置Vue.prototype属性,把变换的属性放到Vuex中。
(2)使用方法的形式,例如:
Vue.prototype.getData = () => {
return Vue.prototype.data;
}
通过方法的形式,再每次执行方法的时候重新获取数据。
但也有情况不建议使用
,如果你停留在这个页面,又去改变了Vue.prototype.data,视图还是不会刷新。
这种方法仅仅适用于,获取一次性的数据。
例如:进入项目时获取用户信息。
主包
体积大于2M
就无法上传发布。这时候我们就要进行分包,分包有几个注意的点:
(1)通常我们写代码每个文件夹里面的文件可能与其他文件夹里的文件有有依赖关系,这时需要注意:主包、分包无法引用其他分包中的文件
,主包、分包可以引用主包中的文件
。
(2)分包数量没有上限。
(3)每个分包的大小不可大于2M
。
(4)tabbar页面组件必须在主包中。
(5)技巧:
如果多个分包的内容相互依赖了,那么为了可以将这多个分包整合成一个分包。这样能避免分包不能引用分包的问题。