uniapp开发整理

1.导航自定义
如果用默认的tabBar导航，需要在pages.json中设置
    iconWidth和fontSize这两项图标尺寸和文字尺寸在生成的app里是没有用的
    spacing间距设置应该是有用的，但是app是上下结构，h5是左右结构，设置了没有实际意义
    在list中设置需要显示导航的页面，相当于添加路由，并且可以设置图标（点击前点击后）但是只能是static中的图片不能用阿里样式图标
    这里的图标和文字排列在app中是上下结构，在h5中是左右结构，不能统一
如果用自定义的插件导航，不需要在pages.json中设置，直接在index中写，应该也可做成组件
    在index中将导航写在最下面，顶上的栏目都是组件（应该也可把导航做成组件，在需要的页面注册使用）
    这里的做法应该是固定的浮动层
2.pages.json规则
    不要放重复的页面，不要放没有的页面，pages文件夹里的文件最好和pages.json一一对应，否则在生成app时出现空白页面情况
    pages.json的第一项是起始页，一般是登录页，
    可以设置标题栏右侧图标按钮，使用阿里图标但必须加u，例如：\e681,
    "buttons": [{
       "text": "\ue681",
       "fontSrc": "/static/fonts/iconfont.ttf",
       "fontSize": "22px",
       "color": "black"
    }]
    在页面上通过onNavigationBarButtonTap事件监听
    onNavigationBarButtonTap(e) {
        //console.log(e)
        this.flag=1;
        if(this.flag==1){
           this.gradeshow=false;
           this.questionshow=true;
        }
        this.$refs.popup.show()
    },
3.设置全局变量（修改无效，跳页还原）
在main.js中设置全局变量，但是这个值应该是个常量，不能被改变，因为跳转页面重新加载js后值还是原来的值
4.缓存不能用异步
因为从缓存拿东西要后续使用，不能使用异步，最好用同步才能真正拿到，如果有记住密码功能就不能用清空方法
uni.setStorageSync('name',‘123’);//存
uni.getStorageSync('name');//取
uni.removeStorageSync('name');//删
uni.clearStorageSync();//清空
5.发请求用的uni，没有用axios
    uni.request({
        url: self.domainUrl + '/api/StoreSystem/ImportServe_GetModel',
        data: {'':this.FMID},//如果没有属性名要传空字符串
        method:'POST',
        header: {//token
            'Content-Type': 'application/x-www-form-urlencoded',
            'token':self.record,
        },
        success: (res) => {//得到JSON格式字符串需要解析
            let info = JSON.parse(res.data)
            if(info.status.code == 1){

            } else if (info.status.code == -1000) {
                //token失效跳转登录页
                uni.showModal({
                    content: info.status.msg,
                    showCancel: false,
                    success:(res=>{
                        if (res.confirm) {
                            uni.navigateTo({
                                url: '/pages/login/login'
                            });
                        }
                    })
                });
            } else{
                //报错
                uni.showModal({
                    content: info.status.msg,
                    showCancel: false
                });
            }
        }
    });
6.不能用jQuery，生产的app会出现空白页
7.表单页提交——提交成功页（返回后退2步到栏目选择页），历史表单——进入修改表单提交——提交成功（返回历史表单）
    表单提交有两种情况：
    1.新增时缓存存1，进入提交成功后再返回到表单的上一级子栏目选择页
    2.从历史表单提交为修改操作，缓存存2，进入提交成功页后再返回到历史表单页，此时历史表单页会重新获取数据，刚刚改的会在最顶部，因为获取数据是在onShow生命周期下的
    历史表单这里也分两种情况：
    只要是提交成功后的表单都会在缓存中存num标记，再进入历史表单会判断缓存中有没有这个标记，
    如果有就要重新获取数据，
    如果没有说明没提交过表单或者提交不成功，此时返回历史表单可以回到原来的位置并且没有刷新数据
8.不应使用@click，应该用@tap
9.通过导航或修改返回历史表单的时候都是重新获取数据，通过后退键回到历史表单的可以在原来的列表位置
10.表单的选项都是自定义的数据，而不是获取的数据
11.使用uniapp的生命周期函数onShow（页面出现就执行）和onLoad可以不使用created和mounted
    onLoad : 监听页面加载，参数为上一个页面传递的数据，类型为Object 。
    onShow：监听页面的显示，页面每次出现在屏幕上都会触发。
    onReady：监听页面初次完成。
    onHide：监听页面隐藏。
    onUnload：监听页面卸载。
    onResize：监听窗口尺寸变化。
    onPullDownRefresh：监听用户下拉动作，一般用于下拉刷新。
    onReachBottom：页面上拉触底事件的处理函数。
    onTabItemTap：点击tab时触发，参数为Object，为当前tab信息。
        // 参数：{index: 0, text: “bar1”, pagePath: “pages/index/index”}
    onShareAppMessage：监听用户点击右上角分享。
    onPageScroll：监听页面滚动，参数为Object。// {scrollTop: 89}
执行顺序是：
    onLoad(){console.log('1')},
    onShow(){console.log('2')},
   created(){console.log('3')},
   onReady(){console.log('4')},
   mounted(){console.log('5')},

12.右侧箭头修改了文件uni-list-item.vue不确定真机是否好用[type="right"]
13.使用新插件在uni_modules文件夹，原components中的uni-***全部删除
14.地址页面保存后执行this.$Router.back(1)返回，保持路由栈顺序，页面显示就重新加载，默认地址在第一个
15.列表每次获取数据之前都把已有列表放缓存备份一遍，还有获取数据之后的页码，再返回列表时把缓存数据拿出了，再请求离开时的页码获取当前页最新数据并拼接到列表上，这样保持跳出列表页进入详情页修改后返回来还是最新值，可能还要记录滑动高度还原位置，初始时先清空缓存里的
16.暂时先不用自定义顶部，开发者工具有错位问题，每个页面都要定义返回箭头可能更乱，暂时先保证路由栈正常，微信小程序不能监听返回按钮(https://ask.dcloud.net.cn/article/id-35120__page-5#reply)
17.自带的回退可以退回到当前位置，自定义顶部如果用页面跳转还需要记录浏览位置和以获取数据
18.微信开发者工具要开启：安全中的端口服务
19.微信小程序不支持new URL
20.顶部导航栏：微信小程序全都居左，不能修改，使用自定义的需要在uni_modules/uni-nav-bar修改顶部间距，留出手机日期时间wifi电量的位置.uni-navbar__content {padding-top: 40rpx;｝
21.typeError: Cannot read property 'setValidInit' of undefined 微信开发者工具—设置—项目设置—本地设置—调试基础库选择2.29.2
22.小程序的uni-easyinput，点击切换不同的文本框不能弹出键盘，需要点两次，官方案例也这样
23.小程序顶部有搜索input，获取焦点时唤起键盘会使里面的文字上移，设置:adjust-position="false"(变量控制)，不能用uni-search-bar了
<input confirm-type="search" class="search" type="text" v-model="keyword" :placeholder="place" @confirm="search" :adjust-position="adjustPos" cursor-spacing="100"/>

【https://www.jianshu.com/p/e7452221c7b8】

还有个滚动页面，输入框内容错位问题，设置always-embed=“true”可能管用【https://developers.weixin.qq.com/community/develop/article/doc/000a00e1fd0790488e6a034f156813?page=1#comment-list】

24. H5 不支持动态切换input类型，用v-if进行整体切换

25.获取dom：uni.createSelectorQuery().select(selector)
26.全局变量是global没有document

 

 

 

#ifdef ：      if defined  仅在某个平台编译
#ifndef ：     if not defined  在除里该平台的其他编译
#endif ：      end if 结束条件编译
%PLATFORM%     需要编译的平台，上面的MP就是各个小程序的意思

//等同于 uni.navigateTo() 向 history 栈添加一个新的记录
this.$Router.push({
    name:'csvideo',
    params:{
        id:'asd122',
        oid:'99'
    }
})        
//等同于 uni.redirectTo() 替换掉当前的 history 记录
this.$Router.replace({
    name:'csvideo',
    params:{
        id:'asd122',
        oid:'99'
    }
})
//等同于 uni.reLaunch() 将所有的页面都关掉，打开一个新的页面
this.$Router.replaceAll({
    name:'csvideo',
    params:{
        id:'asd122',
        oid:'99'
    }
})
//等同于 uni.switchTab() 打开 tab 菜单
this.$Router.pushTab({
    name:'csvideo',
    params:{
        id:'asd122',
        oid:'99'
    }
})
//等同于 uni.navigateBack() 后退 2 步记录，记录不够用失败
this.$Router.back(2,{
    success:(...arg)=>{
        console.log(arg)
    }
})
    
uni.setNavigationBarTitle({
    title: '修改导航文字'
});

传一个值
data:{
    '':this.curTid
},
header:{
    'Content-Type': 'application/x-www-form-urlencoded',
    'token':this.$utils.getToken(),
},

传JSON
data: JSON.stringify(obj),
header:{
    'token':this.$utils.getToken(),
},

什么都不传
method:'POST',
header:{
    'Content-Type': 'application/x-www-form-urlencoded',
},