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