开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情
1、官方自带的拓展和插件也有很多的问题，使用每个插件时需要先多了解
2、uni自带的统计在h5里面无法实现自定义事件上报，建议使用友盟或者百度统计
3、无法在app.vue里写模板代码
4、vuex的状态持久化还是可以用vuex-persistedstate,需要自定义存取方法
//数据持久化
createPersistedState({
key:'custom_key',
paths:['user'],
storage:{
getItem:(key)=>uni.getStorageSync(key),
setItem:(key,val)=>uni.setStorageSync(key,val),
removeItem:key=>uni.removeStorageSync(key)
}
})
5、无法根据环境判断打包路径，如果需要修改默认的打包路径，可以手动在manifest.json文件的h5一项中添加publicPath
6、官方没有自带的路由管理工具，可以使用uni-simple-router，但需要注意第一次加载时的状态判断(这时候store还没加载)
7、全局css变量可以写在uni.scss里面，其他文件不需要引入即可使用
8、友盟统计抽取成指令形式如下,事件统计会在点击时触发
//eventLogDirective.js
/***************** 埋点自定义指令 *******************/
// readme: https://open.cnzz.com/a/api/trackevent/
export default {
install (Vue) {
Vue.directive('log', {
bind (el, binding) {
el.addEventListener('click', () => { window._czc.push(['_trackEvent', ...binding.value]) }, false)
},
unbind (el) {
el.removeEventListener('click', () => { console.log('remove') })
}
})
}
}
//mixin
/******************* 友盟埋点 *******************/
const SITE_ID = 123456789 // 替换成自己的站点ID
export default {
mounted () {
this.$nextTick(() => {
const script = document.createElement('script')
script.src = `https://v1.cnzz.com/z_stat.php?id=${ SITE_ID }&web_id=${ SITE_ID }`
script.language = 'JavaScript'
script.id = 'cnzz'
document.body.appendChild(script)
})
},
}
//app.vue
mixins: [mixUmeng]
//模板文件内使用
<button v-log="['category','action','label','id']" @click="clickHandle"></button>
主动触发事件统计
if (window._czc) { window._czc.push(["_trackEvent", ...event]); }
9、小程序内需要canvas绘图，如果图片是远程文件需要注意以下两点：
- 图片域名需要在下载域名
- 图片服务器需要开启跨域支持
- 最好使用服务端绘图服务
10、富文本的使用要克制，在小程序及APP端可能出现意想不到的显示错乱
11、使用easycom可以不需要在使用组件的时候引入，打包时会自动引入并进行treeshaking
//page.json
"easycom": {"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue" }
12、阿里云图片压缩
(w图片宽度，q图片质量)
添加query ?x-oss-process=image/resize,w_100/quality,q_80
13、禁止oss图片旋转，添加query：?x-oss-process=image/auto-orient,1
14、微信内h5调起小程序，使用wx-open-launch-weapp
15、微信外h5调起小程序，使用URL Scheme
