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则无法启动微信开发工具。


posted on 2021-03-06 09:20  飞哥100  阅读(342)  评论(0)    收藏  举报

导航