一.pages.json常用配置总结

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、**底部的原生tabbar **等。

1. pages 设置页面路径及窗口表现

pages节点的第一项为应用入口页（即首页）

应用中新增/减少页面，都需要对 pages 数组进行修改

文件名不需要写后缀，框架会自动寻找路径下的页面资源

pages 节点接收一个数组，数组每个项都是一个对象。该对象的属性值有：

(1) path ：配置页面的路径，字符串类型

(2) style ：配置该页面独有的一些窗口表现，对象类型

2.tabBar 设置底部 tab 的表现

该节点也是一个对象，里面的常用属性有：

(1) color ：tab 上的文字初始的颜色

(2) selectColor ：tab 上的文字选中时的颜色

(3) fontSize ：文字大小，默认10px

(4) height ：tabbar的高度，默认50px

(5)iconWidth 图标默认宽度

(6) list ：tab 的列表，最少2个，最多5个 tab

list 接收一个数组，数组中的每个项都是一个对象。对象的属性有：

pagePath ：页面路径，必须在 pages 中先定义

text ：tab 上按钮文字。不填的话，就是一个图标

iconPath ：图片路径

selectedIconPath ：选中时的图片路径

(7) midButton: 中间按钮

仅在 list 项为偶数时有效,有以下属性：

width ：中间按钮的宽度

height ：中间按钮的高度，可以大于 tabBar 高度，达到中间凸起的效果

text ：中间按钮的文字

iconPath ：中间按钮的图片路径

iconWidth ：中间图标的宽度。(高度等比缩放)

!注意! :midButton没有pagePath，需监听点击事件，自行处理点击后的行为逻辑。监听点击事件为调用API：uni.onTabBarMidButtonTap

3. globalStyle和style的常用属性

globalStyle和style都是对象类型的节点，大部分的样式写在两个节点里都是可行的。主要用于设置窗口的表现，一个是全局的，一个是单独页面的。有如下的属性：

navigationBarBackgroundColor ：导航栏背景颜色（同状态栏背景色）。默认#000000（即黑色）

navigationBarTextStyle ：导航栏标题颜色及状态栏前景颜色，仅支持 black/white。默认white（白色）

navigationBarTitleText ：导航栏标题文字内容

bounce :页面回弹效果，设置为 “none” 时关闭效果。（建议在全局设为"none"）

scrollIndicator : 右侧滚动条显示策略，设置为 “none” 时不显示滚动条。按情况设置。

navigationStyle : 导航栏样式，仅支持 default/custom。默认为"default"。"custom"即取消默认的原生导航栏，使用自定义导航栏。

app-plus ：设置编译到 App 平台的特定样式。是一个对象类型的属性

（1）app-plus常用属性：

bounce : 页面回弹效果，设置为 “none” 时关闭效果。

titleNView : 导航栏。对象格式。如果取为false，则取消导航栏。

titleNView的常用属性：

backgroundColor ：导航栏的背景颜色，会覆盖掉navigationBarBackgroundColor

titleColor ：标题文字颜色，可以设置更多rgb的颜色。

titleText ：标题文字内容

titleSize ：标题文字字体大小

autoBackButton ：标题栏控件是否显示左侧返回按钮

titleIcon :标题图标,位于标题的左部

titleIconRadius : 标题图标圆角，取值格式为"XXpx"，其中XX为像素值（逻辑像素），如"10px"表示10像素半径圆角。

titleAlign ：标题在导航栏上的位置。可取值： (“center”-居中对齐； “left”-居左对齐；)

autoBackButton ：是否显示左侧返回按钮，默认为true，取消返回按钮，设为false

二.常用功能和开发技巧总结

1.关闭导航栏返回按钮

在要关闭返回按钮的style中添加如下的代码：

"app-plus":{
        "titleNView":{
          "autoBackButton":false
        }
      }

2.禁止屏幕旋转时横屏

在App.vue中的onLaunch生命周期函数中添加如下的代码：

onLaunch: function () {  
    // 锁定竖屏  
    plus.screen.lockOrientation("portrait-primary");  
}

3.设置应用的启动时间

在App.vue中的onLaunch生命周期函数中添加如下的代码：

setTimeout(() => {
    plus.navigator.closeSplashscreen();
}, 2000);

4.禁止手机某页面右滑返回

在对应页面的vue文件中添加onBackPress生命周期函数，并返回true。

onBackPress(e) {//禁止返回
      return true;
    }

5.注册功能的总结

当点击注册按钮时，先要判断账号密码的格式是否符合要求。如果判断后，发现格式不符合要求的话，就要弹出Toast消息提示框，提示相应的错误。

消息提示框uni.showToast

uni.showToast({
            title:'提示信息',
            icon:"none",//提示框的类型，一般都为none
            position:"bottom",//提示框的位置。
              duration:600//消息显示时间的毫秒数
          })

如果注册填写的账号密码格式填写正确，点击注册按钮时就向服务器发送请求，如果注册成功的话，就显示Toast消息提示框，消息提示框的icon不用填，设置一个duration显示时间。之后设置一个定时器，用于页面的跳转，跳转到login登录页面。如果账号注册失败也要显示失败的Toast提示。

示例代码如下：

          // 发送注册的请求
          this.$post(api.USER_REGISTER,{
            userName:this.username,
            password:this.password,
            phonenumber:this.phoneNum,
            sex:this.sex
          }).then(res =>{
            //请求成功
            if(res.code == 200){
            //显示成功的Toast
              uni.showToast({
                title:'注册成功!',
                duration:600
              })
              //跳转到注册页面
              setTimeout(function(){
                uni.navigateTo({
                  url:'./login'
                })
              },600)
            }else{
              //显示错误的Toast信息
              uni.showToast({
                title:res.msg,
                icon:"none",
                position:'bottom'
              })
            }
          })

6.封装请求和API

uni-app有提供发起http请求的功能的api但是，应用各页面很多时候要发起非常多的请求，为了简化代码，所以要封装请求和API。把封装的代码放在根目录下的common目录下。

uni-app发起请求的方法uni.request(OBJECT)：

uni.request({
    method:'请求的方式', // GET,POST,PUT等
    url:'请求的url地址',
    header:{}, //请求头,是一个对象类型
    data:{}, //请求的参数
    dataType：'json', //一般都设为json，会尝试对返回的数据做一次 JSON.parse
    success:function(){}, //接口请求成功时执行的回调函数
    fail:function(){} // 接口调用失败时执行时执行的回调函数
})

把请求的代码封装在common下的request.js模块下：

下面是示例代码：

//把模块内定义的方法暴露出去
export default{
  // 封装get请求的发送
  get(url,data){
    // 同步获取本地的token
    let token = uni.getStorageSync('token');
    // 封装get请求
    return new Promise((resolve,reject)=>{
      uni.request({
        method:'GET',
        url:url,
        data:data,
        header:{
          'authorization':token
        },
        dataType:'json',
        success: (res) => {
          console.log("get--success")
          // 401：未授权（登录已过期）
          if(res.data.code === 401){
            // 移除本地的token
            uni.removeStorageSync('token');
            // 显示模态弹窗
            uni.showModal({
              title:'提示',
              content:'登录认证已过期,请重新登录!',
              success: (res) => {
                // 1.如果用户点击了确认,跳转到登录页面
                if(res.confirm){
                  uni.navigateTo({
                    url:'/pages/startUp/login.vue'
                  });
                }else if(res.cancel){
                  // 用户点击了取消,则什么也不做
                  console.log("用户点击了取消")
                }
              }
            });
          }
          resolve(res.data);
        },
        fail: (err) => {
          console.log(err)
          uni.showToast({
            title:"网络连接超时,请下拉刷新！",
            icon:"none",
            duration:1500
          });
          reject(err)
        }
      })
    });
  },
  //封装一个post请求
  post(url,data){
    // 同步获取本地的token指令
    let token = uni.getStorageSync('token')
    return new Promise((resolve,reject)=>{
      uni.request({
        method:'POST',
        url:url,
        data:data,
        header:{
          'content-type':'application/json',
          'authorization':token
        },
        dataType:'json',
        success:function(res){
          console.log("post---success")
          console.log("post---url:"+url)
          console.log("post---code:"+res.data.code)
          if(res.data.code === 401){
            uni.removeStorageSync('token');
            uni.showModal({
              title:'提示',
              content:"登录已过期，请重新登录!",
              success: (res) => {
                if(res.confirm){
                  uni.navigateTo({
                    url:'/pages/startUp/login.vue'
                  })
                }else if(res.cancel){
                  console.log('用户点击取消');
                }
              }
            });
          }
          resolve(res.data)
        },
        fail: (err) => {
          console.log("失败")
          uni.showToast({
            title:"接口请求失败,请稍后再试!",
            icon:"none"
          })
          reject(err)
        }
      });
    });
  },
  // 封装一个put请求
  put(url,data){
    let token = uni.getStorageSync('token');
    return new Promise((resolve,reject)=>{
      uni.request({
        method:'PUT',
        url:url,
        data:data,
        header:{
          'content-type':'application/json',
          'authorization':token
        },
        dataType:'json',
        success: (res) => {
          if(res.data.code === 401){
            uni.removeStorageSync('token')
            uni.showModal({
              title:'提示',
              content:'登录已过期,请重新登录!',
              success: (res) => {
                if(res.confirm){
                  uni.navigateTo({
                    url:'/pages/startUp/login.vue'
                  })
                }else if(res.cancel){
                  console.log("用户点击取消")
                }
              }
            });
          }
          resolve(res.data)
        },
        fail: (err) => {
          uni.showToast({
            title:"接口请求失败,请稍后再试",
            icon:'none'
          })
          reject(err)
        }
      })
    })
  }
}

其中的每一个请求的方法都返回promise。

之后，还要根据接口文档来封装一个apiUtil.js的接口模块，下面是示例代码：

var ip = uni.getStorageSync('serverIp');
var baseUrl = 'http://'+ ip;
export default{
  SERVER_BASE:baseUrl,
  //用户登录
  USER_LOGIN:baseUrl + '/prod-api/api/login',
  //注册
  USER_REGISTER:baseUrl + '/prod-api/api/register',
  // 获取用户个人信息
  GET_USER_INFO:baseUrl+ '/prod-api/api/common/user/getInfo',
  // 获取首页轮播图
  GET_INDEX_BANNER_IMG:baseUrl+'/prod-api/api/rotation/list',
  // 获取所有服务信息
  GET_SERVICE_INFO:baseUrl+'/prod-api/api/service/list'
}

ip是每一个请求都有的IP地址，通过获取注册时的本地存储里面获取。baseurl对ip地址和http请求拼接一下。

最后就是暴露当前封装的API接口。

封装好这两个模块后，还好把这两个模块在main.js中进行导入和对vue的原型进行绑定。示例代码如下

//导入封装好的模块
import request from './common/request.js'
import api from './common/apiUtil.js'
// 将起绑定到Vue的原型上面去
Vue.prototype.$api = api
Vue.prototype.$get = request.get
Vue.prototype.$post = request.post
Vue.prototype.$put = request.put

7.本地数据缓存

(1) uni.setStorage( OBJECT )

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

OBJECT 参数说明：

示例代码：

uni.setStorage({
  key: 'storage_key',
  data: 'hello',
  success: function () {
    console.log('success');
  }
});

(2) uni.setStorageSync( KEY , DATA )

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

参数说明

示例代码：

uni.setStorageSync('storage_key', 'hello');

(3) uni.getStorage( OBJECT )

从本地缓存中异步获取指定 key 对应的内容。

OBJECT 参数说明:

success函数传入的参数说明：

参数名	参数类型	说明
data	Any	key 对应的值

示例代码如下：

uni.getStorage({
  key: 'storage_key',
  success: function (res) {
    console.log(res.data);
  }
});

uni-app移动端开发技巧总结（一）

一.pages.json常用配置总结

1. pages 设置页面路径及窗口表现

2.tabBar 设置底部 tab 的表现

3. globalStyle和style的常用属性

（1）app-plus常用属性：

二.常用功能和开发技巧总结

1.关闭导航栏返回按钮

2.禁止屏幕旋转时横屏

3.设置应用的启动时间

4.禁止手机某页面右滑返回

5.注册功能的总结

6.封装请求和API

7.本地数据缓存

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

uni-app移动端开发技巧总结（一）

一.pages.json常用配置总结

1. pages 设置页面路径及窗口表现

2.tabBar 设置底部 tab 的表现

3. globalStyle和style的常用属性

（1）app-plus常用属性：

二.常用功能和开发技巧总结

1.关闭导航栏返回按钮

2.禁止屏幕旋转时横屏

3.设置应用的启动时间

4.禁止手机某页面右滑返回

5.注册功能的总结

6.封装请求和API

7.本地数据缓存

热门文章

最新文章

相关课程

相关电子书

相关实验场景