开发工具下载和安装

uni-app官方推崇HBuilderX作为开发工具，该工具拥有众多显著特点，包括多样的项目模板、周到的智能提示服务以及便捷的一键运行调试功能。开发者在使用前，需先行至官方网站下载相应的压缩文件，然后将其解压至仅包含英文的路径目录中，此举旨在防止中文路径可能引发的兼容性问题。

开发工具的配置

3.1 安装scss/sass编译

操作流程共分为两个阶段，首先需要在插件平台上创建账户，接着在平台上进行搜索，找到并安装scss/sass编译插件；待项目成功导入后，即可对样式预处理的文件进行编译处理。

3.3 修改编辑器基本设置

请调整文本的显示尺寸及颜色搭配，并启动“自动保存格式化”这一功能，以保证代码呈现统一风格。

项目开发

1. 网络请求配置

1.1 第三方包选择

鉴于wx.request()原生方法存在某些限制，且不具备拦截器功能，故我们建议采用@escook/request-miniprogram这一库。该库具备全局的请求与响应拦截功能，并能自动对Promise进行封装，拥有众多实用特性。

1.3 配置方法

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

在main.js文件里，我们引入并运用了请求插件，借助uni.$http这一方法来执行接口的调用操作。此外，我们还对接口的基础路径进行了设定，例如baseURL: 'https://example.com/api'，并且明确了超时的时长限制。

2. 小程序分包加载

// 按需导入 $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.1 分包优势

将非核心信息拆分，各自独立，这一做法有利于减小主单元的文件容量，并且还能提高首次启动的速度。以电商类小程序为例，可以将“商品详细信息”和“订单展示页面”各自设定为独立的模块，而主模块只需包含“主页”和“登录页面”。

2.3 分包规则

结构对比在任务分配前，必须对所需资源进行全面梳理，同时注意文件总容量不得超出2MB的上限；任务分配完成后，主包将被整合进启动界面和公共资源库，包括utils等；而独立的子包则主要负责私有页面及其相关资源的独立应用。

加载逻辑当用户点击查看分包页面时，系统便会自动启动下载动态文件的作业；在此操作环节中，整个包的大小，包括主体包和附加分包，必须被严格限制在20MB的容量之内。

2.3.2 实现步骤

1. 根目录新建subPackages文件夹存放分包。

2. 在pages.json中配置分包路径：

"subPackages": [{
  "root": "subPackages/user",
  "pages": ["address/list"]
}]

3. 自定义组件使用

3.1 创建组件

在components文件夹中，您只需右击鼠标，选择“创建新组件”这一选项，接着输入组件的名称，例如“video-card”。完成这一系列步骤后，系统便会自动为您创建一个包含.vue、.js以及.json三个文件的组件套件。必须注意，注册此组件需借助name属性，且在调用该组件的页面中，需在components标签内予以清晰标明。

4. 组件功能实现

4.1 动态获取页面高度

通过执行uni.getSystemInfoSync()函数以获取windowHeight的值，然后从该值中扣除导航栏的高度，经过这样的计算，便可以准确得知内容区域的确切高度。

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

4.3 图片预览

借助uni.previewImage这一功能，我们能够输入一个包含图片网址的数组，从而使用户能够通过滑动操作来浏览这些图片。

4.7 获取用户地址

通过调用wx.chooseAddress函数激活本地的地址选择功能，务必在manifest.json配置文件中明确标记出所需的requiredPrivateInfos权限项。

解决问题总结

分包白屏核对pages.json文件里的路径是否准确无误，同时要验证分包的顶级目录名称是否符合既定的命名规范，严禁使用中文字符。

组件样式隔离在配置文件options中，务必将styleIsolation这一属性设定为'shared'，唯有如此，方能保证主页面的样式实现共享。

const sysInfo = uni.getSystemInfoSync()

请求拦截失效必须确认uni.$http是否已经于main.js文件中进行了全局的注册，同时，确保拦截器的设置工作在建立请求实例之前就已经妥善地完成了。

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