uni-app开发小程序

一、项目准备工作

1.uni-app 介绍（ 地址 ）

​        uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信 / 支付宝 / 百度 / 头条 / 飞书 /QQ/ 快手 / 钉钉 / 淘宝）、快应用等多个平台。

2. 开发工具下载和安装

        2.1 介绍

uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目,
主要好处：模板丰富、完善的智能提示、一键运行 

        2.2 下载 HBuilderX

1. 下载的地址 https://www.dcloud.io/hbuilderx.html
2. 下载 正式版 ->App 开发版 

        2.3 安装 HBuilderX

1. 将下载的 zip 包进行解压
2. 将解压的文件放到一个纯英文的目录下
3. 双击 HBuilderX.exe 即可启动 HBuilderX

3. 开发工具的配置

     3.1 安装 scss/sass 编译    

        介绍

 为了方便编写样式, 建议安装 'scss/sass 编辑' 插件 

        下载地址 (scss/sass 编译 – DCloud 插件市场)

                操作步骤：1. 先注册 2. 点击下载插件并导入 HBuilderX

        3.2 快捷键方案切换

                操作步骤: 工具 -> 预设快捷键方案切换 ->vs Code

        3.3 修改编辑器的基本设置

                操作步骤：工具 -> 设置，点击源码视图

二、项目开发

1. 网络请求配置

        1.1. 介绍 (@escook/request-miniprogram – npm)

 由于平台限制，小程序不支持 axios，而且原生的 wx.request()API 功能较为简单, 不支持拦截器等全局定制的功能，因此建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求 

        1.2. 添加依赖

npm init -y // 初始化 npm 项目
npm install @escook/request-miniprogram

        1.3. 配置网络请求

// 按需导入 $http 对象
import {$http} from '@escook/request-miniprogram'
// 配置网络请求库
$http.baseUrl = '' // 请求根路径
// 请求拦截器
$http.beforeRequest = function (options) {
  // 展示 loading 框
  uni.showLoading({title:'数据加载中...'})
}
// 响应拦截器
$http.afterRequest = function () {
  // 隐藏加载框
  uni.hideLoading()}

// 在 uni-app 项目中，可以把 $http 挂载到 uni 顶级对象之上，方便全局调用
uni.$http = $http

  2. 小程序分包加载

         2.1. 介绍

 分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载 

        2.2 分包的好处

a. 可以优化小程序首次启动时下载时间
b. 在多团队共同开发式可以更好的解藕协作 

        2.3. 分包加载

                2.3.1 分包加载前后项目的结构

1. 分包前，小程序项目中所有的页面和资源都被打包到一起，导致整个项目体积过大，影响小程序首次启动的下载时间

2. 分包后，小程序项目由一个主包 + 多个分包组成：主包：一般只包含项目的启动页面或 TabBar 页面，以及所有主包都需要用到的一些公共资源
	分包：只包含和当前分包有关的页面和私有资源 

                2.3.2 分包的加载规则

1.  在小程序启动时，默认会下载主包并启动主包内页面
2.  当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示
注意：非  tabBar 页面可以按照功能的不同，划分为不同的分包之后，进行按需下载

                2.3.3 分包的体积限制

 整个小程序所有分包大小不超过  20M（主包 + 所有分包）单个分包 / 主包大小不能超过  2M

        3.4 分包的配置

                3.4.1 定义

1. 在项目的根目录中，创建分包的根目录，命名为 subpkg
2. 在 pages.json 中，和 pages 字段平级的位置声明 subPackages 数据节点中，用来定义分包相关的结构：

                 3.4.2 使用

1.pages.json 配置
  {
	"subPackages": [{
		"root": "subpkg",
		"pages": []}],
  }
2. 创建目录 subpkg
3. 在 subpkg 目录下页面
4. 配置页面后会在 pages.json 中 subPackages.pages 中自动填写创建的页面信息 

                3.4.3 新建分包文件

3. 自定义组件使用

        3.1. 创建组件

 在项目根目录的 components 目录上，鼠标右键，选择 新建组件，填写组件信息，最后点击 创建 按钮 

       3.2. 使用

 直接以标签的形式使用不需要引入 

4. 组件使用

        4.1 获取页面可用高度

const sysInfo = uni.getSystemInfoSync()

        4.2 数据保存到本地

uni.setStorageSync('定义参数', 保存的值) // 保存
uni.getStorageSync('定义参数')  // 获取 

        4.3. 图片预览功能

1. 使用
    // 调用 uni.previewImage() 方法预览图片
        uni.previewImage({
            // 预览时，默认显示图片的索引
            current: 1,
            // 所有图片 url 地址的数组
    		urls: []})

        4.4 商品导航组件 uni-goods-nav

                地址：导航组件

                效果

                         

        4.5. 为 tabBar 设置数字徽标

 // 调用 uni.setTabBarBadge() 方法，设置购物车右上角徽标
      uni.setTabBarBadge({
        index: 2,  // 位置
        text: 2 + '', // 注意：text 的值必须是字符串，不能是数字，显示的图标
      })

                效果

                        

        4.6. 混入功能

1. 新建一个 mixins 文件夹
2. 文件下创建一个.js 文件
3. 配置内容
export default {computed: {},
  methods: { },
  data:{return{}
  }
}
4. 在需要的 vue 文件中使用
// 导入自己封装的 mixin 模块
import badgeMix from '@/mixins/xxxx.js'
export default {
  // 将 badgeMix 混入到当前的页面中进行使用
  mixins: [badgeMix],
  // 省略其它代码...
}

        4.7 调用小程序的方法获取用户地址

// 1. 调用小程序提供的 chooseAddress() 方法，即可使用选择收货地址的功能
//    返回值是一个数组：第 1 项为错误对象；第 2 项为成功之后的收货地址对象
const [err, succ] = await uni.chooseAddress()
// 2. 用户成功的选择了收货地址
if (err === null) {
	// 为 data 里面的收货地址对象赋值
	this.address = succ
}

        4.8.NumberBox 数字输入框

                地址: 数字输入框

                效果    

                使用

属性
min 最小
max 最大
change 数据发生变化触发
step 一次加多少 

        4.9 获取微信用户信息

// desc 为必填字段，用于声明获取用户个人信息后的用途，不超过 30 个字符
const [err, res] = await uni.getUserProfile({desc: '完善个人资料'})
// 用户拒绝授权
if (err) return uni.$showMsg('您拒绝授权！')
// 用户同意授权，保存用户信息
console.log(res)

        4.10. 获取微信登录返回的 code 信息

// 调用微信登录接口
 const [err, res] = await uni.login()
// 判断微信登录 uni.login() 是否调用失败
if (err) return uni.$showMsg('微信登录失败！')
console.log(res.code) // 微信登录返回的 code

        4.11. 退出登录

const [err, succ] = await uni.showModal({
	title: '提示',
	content: '确认退出登录吗？'
})
if (succ && succ.confirm) {// 用户确认了退出登录的操作}

        4.12. 微信支付功能

// 调用 uni.requestPayment() 发起微信支付
const [err, succ] = await uni.requestPayment(payInfo)

5. 解决问题

        5.1 解决 .webp 格式图片在 ios 设备上无法正常显示的问题

 // 使用字符串的 replace() 方法，将 webp 的后缀名替换为 jpg 的后缀名
 .replace(/webp/g, 'jpg')

        5.2. 判断对象是否为空

JSON.stringify(对象) === '{}'