Uni-App开发小程序的完整过程记录
更新：2024年11月4日10:30:43作者：＆＆
本文介绍了将Uni-App详细介绍的整个过程，包括引入Uni-App框架，开发工具的下载，安装和配置，项目开发中的网络请求配置，MINI- 分包加载，自定义组件使用，组件使用技能等。它还在开发中遇到了一些问题。需要它的朋友可以参考它。
目录
1。项目准备工作1。Uni-App简介（地址）
Uni-App是使用vue.js开发所有前端应用程序的框架。开发人员编写了一组代码，可以发布给iOS，Web（响应式）以及各种Mini程序（微信/////qq/qq///），和其他平台。
2。开发工具简介下载和安装2.1
Uni-App正式建议开发Uni-App型项目。
主要好处：丰富的模板，完整的智能提示，一键操作
2.2下载
1。下载地址
2。下载官方版本 - >应用程序开发版本
2.3安装
1。解压缩下载的ZIP软件包
2。将未拉链的文件放入纯英语目录中
3。双击.exe开始
3。开发工具的配置3.1安装SCSS/SASS编译
介绍
为了促进写作样式，建议安装“ SCS/SASS编辑”插件
下载地址（SCSS/SASS编译 - 插件市场）
操作步骤：1。注册第一2。单击以下载插件并导入
3.2开关快捷键键方案
操作步骤：工具 - >预设快捷方式关键方案切换 - > VS代码
3.3修改编辑器的基本设置
操作步骤：工具 - >设置，单击源代码视图
2。项目开发1。网络请求配置1.1。简介（@/ - - NPM）
由于平台限制，不支持它，并且本机WX。（）API函数相对简单，并且不支持诸如之类的全局自定义功能。因此，建议使用 @/ - 第三方软件包在Uni-App项目中启动网络数据请求
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分包的好处
一个。可以在第一个启动时优化小程序的下载时间
b。多团队联合开发方法可以更好地解决问题并进行协作
2.3。分包加载
2.3.1分包加载前后项目的结构
1。在分包之前，将Mini计划项目中的所有页面和资源都包装在一起，从而导致整个项目的大小，从而首次影响迷你程序的下载时间。
2。分包后，Mini计划项目由一个主要软件包 +多重分包组成：
主包：通常仅包含项目的启动页面或页面，以及所有主要软件包都需要使用的一些公共资源。
分包合同：仅包含与当前分包合同有关的页面和私人资源
2.3.2分包合同的加载规则
1。当小程序开始时，默认情况下将下载主软件包，并且将启动主包中的页面。
2。当用户输入分包合同中的页面时，客户将下载相应的分包合同并在下载完成后显示。
注意：
可以根据不同的功能将非页面分为不同的分包合同，并按需下载。
2.3.3分包合同的体积限制
整个小程序的所有分包合同均不超过20m（主包 +所有分包合同）
单个分包/主包的大小不能超过2m
3.4分包合同
3.4.1定义
1。在项目的根目录中，创建分包的根目录并命名
2。in .json，数据节点在与该字段相同的水平上声明，并用于定义与分包有关的结构：
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。创建组件
在项目根目录中的目录上，右键单击，选择创建新组件，填写组件信息，最后单击“创建”按钮
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- NAV
地址：导航组件
影响
4.5。设置数字徽标
// 调用 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。数字输入框
地址：数字输入框
影响
使用
属性 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。获取由微信登录返回的代码信息
// 调用微信登录接口 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解决了无法正常在iOS设备上显示WebP格式图像的问题
// 使用字符串的 replace() 方法，将 webp 的后缀名替换为 jpg 的后缀名 .replace(/webp/g, 'jpg')
5.2。确定对象是否为空
JSON.stringify(对象) === '{}'
总结
这就是有关Uni-App开发迷你计划的本文。有关更多相关的Uni-App开发迷你程序，请搜索脚本Home的先前文章或继续浏览以下相关文章。我希望每个人将来都会支持脚本回家！