【无标题】

最新推荐文章于 2024-04-25 21:15:00 发布

八九。

最新推荐文章于 2024-04-25 21:15:00 发布

阅读量2.2k

点赞数

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_51924238/article/details/127906192

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

11月10号

1、uni-app隐藏H5的头部导航栏page-head的两种方式

使用uni-app生成页面时，会发现默认生成的页面是带了导航栏
如果我们想隐藏这个导航栏，可以用如下方式：
1. 如果所有页面都不需要这个导航栏了，可以在App.vue的公共样式代码中添加
  - ```
  /* #ifdef H5 */ 
    uni-page-head { display: none; } 
    /* #endif */
```
2. .如果只是当前页面不需要，可以在pages.json中添加代码
  - 将navigationStyle设置为custom是指自定义导航栏，系统会关闭默认的原生导航栏

2、uniapp路由跳转

关于跳转目标为tabbar页面不生效的问题

一般情况下我们使用uni开发微信小程序和App时，默认登录页（非tabbar页面）登录成功后才会进入到首页（tabbar页面);

 uni.navigateTo({
　　　　　　　　url : 'pages/home/home',
　　　　　　　　success(res) {
　　　　　　　　　　console.log(res);
　　　　　　　　    },
　　　　　　　　fail(err) {
　　　　　　　　　　console.log(err);
　　　　　　　 　}
　　　　});

此方式来进行跳转是无法跳转的

如果想跳转到tabbar页面，就要用下面的方法

 uni.switchTab({
            url: "/pages/home/home",
            success(res) {
                console.log(res);
            },
            fail(err) {
                console.log(err);
            }
    })

3、Content-Type的格式.

3.1、在HTTP协议消息头中，使用Content-Type来表示媒体类型信息

格式
- Content-Type：type/subtype ;parameter
  - type：主类型，任意的字符串，如text，如果是号代表所有；
  - subtype：子类型，任意的字符串，如html，如果是号代表所有，用“/”与主类型隔开；
  - parameter：可选参数，如charset，boundary等。
- 例如:
  - Content-Type: text/html;
  - Content-Type: application/json;charset:utf-8;
    - 现在绝大部分的请求都会以json形式进行传输，post会将序列化后的json字符串直接塞进请求体中。
  - Content-Type: application/x-www-form-urlencoded;charset:utf-8;
    - 这是浏览器原生的form表单类型，或者说是表单默认的类型。

需求一

供应链系统,除登录注册相关流程接口,其他所有接口需在请求头(headers)中携带APISC-AuthToken作为身份令牌,来进行身份的识别和验证.
所有验证码提交接口,需在请求头(headers)中携带VC-Token作为验证码令牌,来进行验证码有效性和正确性的验证
实现
1. 首先我在全局 untils.js中封装了Ajax请求，先拿到token(验证码的)，在做判断

需求二之上传文件

这里用到uniapp的uni.chooseImage和uni.uploadFile我这里判断比较多是因为我的html页面写复杂了

第一布你需要将这个图片给后端传递过去,第二布后端会给你返回来一个http的图片地址,

upload() {
                var that = this;
                console.log(11);
                // 获取token
                var APISC_AuthToken = uni.getStorageSync('APISC-AuthToken')
                console.log(APISC_AuthToken);
                uni.chooseImage({
                    count: 1, //count: 6, //默认9
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], //从相册选择
                    success: (chooseImageRes) => {
                        const tempFilePaths = chooseImageRes.tempFilePaths;
                        // 拿到图片
                        console.log(tempFilePaths);
                        uni.uploadFile({
                            url: 'https://api.sc.ngwh.net.cn/app_upload/uploadFile', //仅为示例，非真实的接口地址
                            filePath: tempFilePaths[0],
                            name: 'file',
                            formData: {
                                'user': 'test'
                            },
                            // 请求头
                            header: {
                                'APISC-AuthToken': APISC_AuthToken,
                            },
                            success: (uploadFileRes) => {
                                console.log(uploadFileRes.data);
                                let files = JSON.parse(uploadFileRes.data);
                                if (files.code == 200) {
                                    that.times++
                                    console.log(that.times)
                                    if (that.times == 1) {
                                        that.types = false
                                        that.imagSrc = files.url
                                        console.log(files.url)
                                    }
                                    if (that.times == 2) {
                                        that.types1 = false
                                        that.imagSrc1 = files.url
                                        console.log(files.url)
                                    }
                                    if (that.times == 3) {
                                        that.types2 = false
                                        that.imagSrc2 = files.url
                                    }
                                    if (that.times == 4) {
                                        that.types3 = false
                                        that.imagSrc3 = files.url
                                    }
                                    if (that.times == 5) {
                                        that.types4 = false
                                        that.imagSrc4 = files.url
                                    }
                                    if (that.times == 6) {
                                        that.types5 = false
                                        that.imagSrc5 = files.url
                                    }
                                    if (that.times == 7) {
                                        that.types6 = false
                                        that.imagSrc6 = files.url
                                    }
                                }
                            }
                        });
                    }
                });
            }

需求三之传值

数据是一个三级分类的数据，跳转分类显示一二级页面，点击二级页面跳转三级，再回显到分类页面
在data里面定义一个空数组list:[]

在一二级页面，先获取数据,记得onLoad

onLoad(){
    this.getlist()
},
methods:{
    //获取数据
getlist(){
    this.$utils.ajax('/app_commodity/getCategory'，{}).then((res)=>{
                    console.log(res)
                    if(res.code == 200){
                        this.list = res.data
                    }
                })
            }
}

页面渲染

<!-- 分类列表 -->
<view class="lists">
    <!-- 分类名称 -->
    <view v-for="(item) in list" v-bind:key="item.id">
        <view class="list-title" >{{ item.name }}</view>
            <!-- 二级 遍历一级的儿子-->
            <view class="list-content">
                <view class="value" v-for="(liser) in item.son" v-bind:key="liser.id">
                <view class="ss" :class="{activer:selected[liser.id]==true}" @click="actinx(liser, liser.id)">
                                {{ liser.name }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>

从二级页面传值到三级页面

点击下一步跳转把数据传过去

// 下一步跳转
        Level(){
                let that=this;
                uni.navigateTo({
                    url:'/pages/categorizelevel/categorizelevel',
                    success:function(res){
                        console.log(that.obj)
                        res.eventChannel.emit('setObj',{data:that.obj})
                    }
                })
            },

三级页面接收数据

 onLoad: function(option) {
            let that=this;
          const eventChannel= this.getOpenerEventChannel();
          eventChannel.on('setObj',function(data){
              console.log(data);
              that.list = data.data
          })

点击三级分类，回显在分类页面

// 这里是function 注意this指向的问题
onLoad() {
            let that = this
            uni.$on('getCategoryID',function(data,value){
                that.info.categoryID = value // 赋值给分类
                this.idrestart = data
                console.log(data)
                that.idrestart = data
            })
            this.getlable()
        },