uniApp开发的一些配置

uni-app相关

1. 开发文档

   框架

   组件

   API

2. 编辑器HBuilder X

   下载

   文档

   3.黑马优购

新建项目

1. 文件 -> 新建 -> 项目

2. 填写项目基本信息

代码组成

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置小程序的全局样式、生命周期函数等
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息

代码的运行顺序和机制

启动过程
(1) main.js,程序的入口文件，通过调用new Vue()构造函数来启动整个小程序
(2)运行App.vue,执行全局的样式,应用的生命周期函数
(3) 渲染首页,通过pages.json的*pages属性的第一个页面路径

页面渲染的过程
(1) 加载解析pages.json的pages 属性中页面的 style属性
(2) 加载页面的 template 模板和 style 样式
(3) 执行页面的 script 创建页面实例

运行项目

1. 填写自己的微信小程序的 AppID：

2. 在 HBuilderX 中，配置“微信开发者工具”的安装路径

3. 在微信开发者工具中，通过 设置 -> 安全设置 面板，开启“微信开发者工具”的服务端口：

4. 在 HBuilderX 中，点击菜单栏中的 运行 -> 运行到小程序模拟器 -> 微信开发者工具，将当前 uni-app 项目编译之后，自动运行到微信开发者工具中，从而方便查看项目效果与调试：

全局配置page.json

{
  // 记录当前小程序所有页面的存放路径"  
  "pages": [{
    "path": "pages/home/home",
    "style": {}
  }, {
    "path": "pages/cate/cate",
    "style": {}
  }],
  // 全局设置小程序窗口的外观
  "globalStyle": {
    // 导航栏标题颜色，仅支持 black/white  
    "navigationBarTextStyle": "white",
    // 导航栏标题文本  
    "navigationBarTitleText": "黑马优购",
    // 导航栏标题颜色，仅支持 black/white  
    "navigationBarBackgroundColor": "#C00000",
    // 下拉窗口的背景色  
    "backgroundColor": "#FFFFFF"
  },
  // 分包加载配置  
  "subPackages": [{
    // 子包的根目录
    "root": "subpkg",
    // 子包由哪些页面组成，参数同 pages  
    "pages": [{
      "path": "goods_detail/goods_detail",
      "style": {}
    },{
      "path" : "goods_list/goods_list",
      "style" : {}
    }]
  }],
  "tabBar": {
    //tab 上的文字选中时的颜色  
    "selectedColor": "#C00000",
    "list": [{
        // pagePath指定当前 tab 对应的页面路径
        "pagePath": "pages/home/home",
        // text指定当前 tab 上按钮的文字
        "text": "首页",
        // iconPath指定当前 tab 未选中时候的图片路径
        "iconPath": "static/tab_icons/home.png",
        // selectedIconPath指定当前 tab 被选中后高亮的图片路径
        "selectedIconPath": "static/tab_icons/home-active.png"
      },
      {
        "pagePath": "pages/cate/cate",
        "text": "分类",
        "iconPath": "static/tab_icons/cate.png",
        "selectedIconPath": "static/tab_icons/cate-active.png"
      }
    ]
  }
}

新建页面

普通页面

1. 在 pages 目录上鼠标右键，选择新建页面

2. 在弹出的窗口中，填写页面的名称、勾选 scss 模板之后，点击创建按钮。

分包页面

​ 在 pages 目录上鼠标右键，选择新建页面在弹出的窗口中，填写页面的名称、勾选 scss 模板、选择小程序分包之后，点击创建按钮。

封装消息提示方法

在main.js中

// 封装的展示消息提示的方法
uni.$showMsg = function (title = '数据加载失败！', duration = 1500) {
  uni.showToast({
    title,
    duration,
    icon: 'none',
  })
}

发送请求

1. 安装第三方依赖

npm i @escook/request-miniprogram

2. 初始化

在main.js

import { $http } from '@escook/request-miniprogram'

uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.uinav.com'

// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
  uni.showLoading({
    title: '数据加载中...',
  })
}

// 请求完成之后做一些事情
$http.afterRequest = function () {
  uni.hideLoading()
}

3.发送请求

在pages/home/home.vue中

methods: {
  data() {
    return {
      // 1. 轮播图的数据列表，默认为空数组
      swiperList: [],
    }
  },
  onLoad() {
    // 2. 在小程序页面刚加载的时候，调用获取轮播图数据的方法
    this.getSwiperList()
  },    
  async getSwiperList() {
    // 3.1 发起请求  
    const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata');
    // 3.2 请求失败
    if (res.meta.status !== 200) return uni.$showMsg()
	// 3.4 请求成功，为 data 中的数据赋值
    this.swiperList = res.message
  }
}

页面导航

声明式导航

<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面navigator>


<navigator url="/pages/info/info" open-type="navigate">导航到info页面navigator>

<navigator url="/pages/info/info">导航到info页面navigator>


<navigator open-type="navigateBack" delta="1">后退navigator>

<navigator open-type="navigateBack">后退navigator>

编程式导航

//  1.导航到tabBar页面
uni.switchTab({
    url: '/pages/message/message'
})
// 2.导航到非tabBar页面
uni.navigateTo({
    url: '/pages/info/info'
})
// 3.后退导航 
uni.navigateBack()

API

获取设备可用

在页面script中

  export default {
    data() {
      return {
        wh: 0
      };
    },
    onLoad() {
      // 获取当前系统的信息
      const sysInfo = uni.getSystemInfoSync()
      // 为 wh 窗口可用高度动态赋值
      this.wh = sysInfo.windowHeight //窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度
    }
  }

在页面template中

<scroll-view scroll-y :style="{height: wh + 'px'}">
scroll-view>

数据缓存

// 存储数据
uni.setStorageSync('kw', ['a', 'b', 'c'])
// 获取数据
uni.getStorageSync('kw')

坑

1.双重for循环,变量命名问题

在h5中正常,在小程序当中报错

<view v-for="(item1,index) in item1.children" :key="index">
	<view v-for="(item2,index) in item1.children" :key="index" click="onClick(item2)">
		{{item2.title}}
	view>
view>
<script>
export default {
	methods: {
		onClick(item){
			//报错,获取item出错
			console.log(item)
		}
	}
}
script>

修改代码后正常

 
<view v-for="(item1,index1) in item1.children" :key="index1">
	<view v-for="(item2,index2) in item1.children" :key="index2" click="onClick(item2)">
		{{item2.title}}
	view>
view>

2.在模板中写函数表单式

在h5中正常,在小程序当中报错

<my-goods @click.native.stop="()=>{}">mygoods>

修改之后的代码

<my-goods @click.native.stop="emptyFn">mygoods>
<script>
export default {
    methods: {
        emptyFn(){
            
        }
    }
}
script>

3.后端部分接口需要特定的appId和当前用户是开发者才可以访问

有条件限制的接口,如微信一键登录和微信支付,可以用前端模拟数据代码替代,一旦上线或联调,注释掉模拟代码即可,例如在main.js中

//保存之前的请求方法
let post = $http.post
//替换掉之前的请求方法
$http.post = function(url,data){
  return new Promise((reslove,reject)=>{
    //如果是特定接口,如登录接口  
    if(url==='/api/public/v1/users/wxlogin'){
      setTimeout(()=>{
        //返回模拟的数据  
        reslove({
          data: {
            message: {
              token: 'abc'
            },
            meta: {
              status: 200
            }
          }
        })
      }, 500)
    }else{
      //如果是其他接口,用之前的方法正常访问
      post(url, data).then(res=>{
          reslove(res)
      }).catch(err=>{
          reject(err)
      })
    }
  })
}
uni.$http = $http