uni-app 微信小程序项目创建步骤和基本配置

2023-06-25 本文已影响0人 CarrySniper

一、创建工程项目

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>