uniapp笔记
常用:
链接组件:<navigator url="detail?id=5" open-type="跳转方式" >详情页</navigator>
页面跳转js:
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});
网络请求js:
const requestTask = uni.request({ url: 'https://www.abc.com/getUser', data: { id: 5 }, method: 'POST', success: function(res) { console.log(res.data); } });
页面设置标题:
<page-meta> <navigation-bar :title="title"></navigation-bar> </page-meta>
底部导航:tabBar
开发记录:
1、查看uni.ttf字体图标对应的Unicode编码:使用软件fontcreator,打开字体文件,就可以看到图标对应的Unicode编码。
2、使用字体图标:
CSS中:.test{font-family: uniicons;} .test::before{font-size: 60rpx;content: "\e563";}
顶部导航中,pages.json:
"titleNView": {
"buttons": [{
"text": "\ue563",
"fontSrc": "/static/uni.ttf",
"fontSize": "22px"
}]}
需要使用\ue
3、uni-app H5跨域问题解决方案:https://ask.dcloud.net.cn/article/35267
4、hbuilder自带游览器的编码为en-us,英文,需要改为中文,否则thinkphp后台会读取英文语言文件:
uni.request中设置:
header:{
'Accept-Language':'zh-cn'
}
5、uni-app 全局变量的几种实现方式: https://ask.dcloud.net.cn/article/35021
6、@click方法中如何传递事件参数:@click=“goToPage(12,$event)”
7、当数据为空时,设置默认值:{{data || '默认值' }}
8、v-show在小程序中失效,可以使用v-if或者css:display:none 替代
9、使用uni.$emit和uni.$on之后,要在onUnLoad中进行关闭:uni.$off;
10、使用this.$emit('input',value) 给父组件v-model绑定的变量传值;
11、给style 节点加 scoped 属性:<style scoped>,表示当前css只属于当前模块或组件,这在单页面项目中可以使各个组件相互独立;
12、uniicons图标字库对应的代码:https://blog.csdn.net/www_rsqdz_net/article/details/117415157
13、微信新版画布,跟html的画布保持一致了,旧方法比如ctx.draw()不再支持;画布保存为图片时,旧方法需要在draw中调用canvasToTempFilePath,还要传入this,而新版则在调用canvasToTempFilePath时,传入canvas即可。
常用代码:
1、富文本前端显示时,控件rich-text中的html字符串的样式替换,img标签添加style="width:100%;height:auto;"
function formatRichText(html) { return html.replace(/<img[^>]*>/gi, function (mats) { if (mats.indexOf('style') < 0) { return mats.replace(/<\s*img/, '<img style="width:100%;height:auto;"'); } else { return mats.replace(/style=("|')/, ' style=$1width:100%;height:auto;') } }); }
技巧方法:
1、关于uniapp自动获取焦点的处理:参考:https://blog.csdn.net/m0_37602317/article/details/116921656
需要使用 this.$nextTick/setTimeout 进行赋值focus赋值,同时失去焦点时focus=false
注意事项:
1、win7支持微信开发者工具1.05版本,1.06以上不支持;如果win7上安装1.06版本,hbuilderx则无法启动微信开发工具。