一、创建工程项目
1、选择uni-app项目；
2、默认模版，只包含基础结构目录文件；
3、选择Vue3版本，跟随技术更新，版本迭代不落后；
4、选项目存放目录路径和填写项目名称，这步操作放这里是前面的操作清空这里填写的内容，避免反复填写；
5、点击“创建”按钮，完成。
创建项目.png
二、运行项目
在HBuilderX的菜单栏中，选择 运行-运行到小程序模拟器-微信开发者工具，即可调起【微信开发者工具】软件运行。
运行项目.jpg
【HBuilderX】需要配置电脑安装微信开发者工具软件的路径，在uni-app教程中有介绍说明：
偏好设置-运行设置-微信开发者工具路径，去复制安装路径粘贴到这里。
HBuilderX配置微信开发者工具路径.png
【微信开发者工具】需要打开服务端口开关才能被运行项目，在uni-app教程中有介绍说明：
设置-安全设置-服务端口，开启开关。
微信开发者工具配置.png
三、默认运行效果
默认模版运行效果，我们后期就基于这个项目去修改、实现自己的功能。
运行效果.png
四、常用组件库基本配置
4.1 uni-app自带库使用：
- 数据缓存
uni.setStorage(OBJECT)
uni.getStorage(OBJECT) - 网络请求
uni.request(OBJECT) - 透明提示
uni.showToast(OBJECT)
uni.hideToast() - 加装指示器
uni.showLoading(OBJECT)
uni.hideLoading() - 模态弹窗
uni.showModal(OBJECT) - 动作选项面板
uni.showActionSheet(OBJECT)
4.2 npm安装常用依赖库，支持 TypeScript 进行开发。
// Sass（Syntactically Awesome Style Sheets）进行CSS预处理，使开发者能够更加高效地编写样式。
npm i sass
// 状态管理，持久化数据
npm i vuex
// 编码解密/加密解密
npm i crypto-js
// URL解析、序列化
npm i @types/qs
// 格式化日期
npm i @types/dateformat
自动生成 pachage.json文件，node_modules文件夹
tsc -init
自动生成 tsconfig.json文件
4.3 uni-ui扩展组件
五、page.json文件配置
- globalStyle全局样式属性 开发文档
"globalStyle": {
"navigationBarTextStyle": "white", // 文字样式：白色字体white，黑色字体black
"navigationBarTitleText": "WXME", // 导航栏标题
"navigationBarBackgroundColor": "#292929", // 导航栏背景颜色
},
- tabBar：选项卡属性 开发文档
tabBar设置为启动页面，list数组内的数据需要相应去创建：页面.vue、图标.png
"tabBar": {
"backgroundColor": "#333333", // 背景颜色
"color": "#999999", // 文字默认颜色
"selectedColor": "#0ACCAB", // 文字选中颜色
"fontSize": "12px", // 文字大小
"iconWidth": "34px", // 图标宽度
"list": [{
"text": "首页",
"pagePath": "pages/home/home",
"iconPath": "static/tabbar/tabbar_home0.png",
"selectedIconPath": "static/tabbar/tabbar_home1.png"
}, {
"text": "动态",
"pagePath": "pages/moments/moments",
"iconPath": "static/tabbar/tabbar_moment0.png",
"selectedIconPath": "static/tabbar/tabbar_moment1.png"
}, {
"text": "我的",
"pagePath": "pages/mine/mine",
"iconPath": "static/tabbar/tabbar_mine0.png",
"selectedIconPath": "static/tabbar/tabbar_mine1.png"
}]
},
- pages：页面数组属性
当没有上面的tabBar属性时，pages数组中第一项表示应用启动页。
但是，当有tabBar时，需要同时配置上tabBar.list列表所有页面路径，否则运行会提示报错，如下：
[ app.json 文件内容错误] app.json: ["tabBar"][x]["pagePath"]: "xxx" need in ["pages"]
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
- subPackages：分包加载配置属性 开发文档
数组内包含多个分包，每个分包也可以包含多个页面。
因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。
在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。此时终端界面会有等待提示。
"subPackages": [
// 分包1：用户
{
"root": "pagesSubUser",
"pages": [ {
"path": "vip/vip",
"style": {
"navigationBarTitleText": "会员中心",
}
}, {
"path": "wallet/wallet",
"style": {
"navigationBarTitleText": "我的钱包",
}
}]
},
// 分包2：公共页面
{
"root": "pagesSubCommon",
"pages": [{
"path": "settings/settings",
"style": {
"navigationBarTitleText": "设置",
}
}]
},
// 分包3：预加载页面
{
"root": "pagesSubPreload",
"pages": [{
"path": "account/account",
"style": {
"navigationBarTitleText": "账户",
}
}]
}
],
- preloadRule：分包预载配置属性 开发文档
将需要预加载的模块配置到规则内，提高页面启动速度。
当加装pages/mine/mine我的页面时，会预加载自定义文件夹pagesSubPreload里面的页面，如下：
"preloadRule": {
// 当加载完次路径页面时，会预下载分包[分包1, 分包2, ……]，限制累积2M内
"pages/mine/mine": {
"network": "all",
"packages": ["pagesSubPreload"]
}
},
六、修改入口相关文件
- index.html 启动默认打开的页面
根据自己需求修改title、description、keywords之类的。
body标签目前不推荐修改，指定：id="app"，src="/main.js"，是默认文件关联使用的。
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
</body>
- main.js 承上，默认样式文件。主要作用是初始化App.vue实例并导入需要全局使用的插件，Vue3版本可以省略成这样写。
import App from './App'
import {
createSSRApp
} from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
- App.vue 承上，根组件文件。所有页面都是在App.vue下进行切换，监控生命周期等
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style lang="scss">
// 公共样式
@import "@/common/common.scss";
// 设置整个项目的背景色
page {
background-color: #F0F0F0;
}
</style>
网友评论