Loading... ## 概述 **uni-app**是使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台。 本篇文章主要讲解如何在电脑中创建一个uni-app程序，且发布至微信小程序中。 在学习之前你需要对JavaScript、html、css以及vue.js有一定的了解，还需要对node.js的有一定的了解。 ## 准备开发环境 下载并安装**HBuilderX**开发工具，下载地址：[https://www.dcloud.io/hbuilderx.html](https://www.dcloud.io/hbuilderx.html) 下载并安装**Node.js**，下载地址：[https://nodejs.org](https://nodejs.org/) 下载并安装微信**微信开发者工具**，下载地址：[微信小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html) 前往**[微信公众平台](https://mp.weixin.qq.com/)**注册开发者信息，注册地址：[微信公共平台小程序注册入口](https://mp.weixin.qq.com/wxopen/waregister?action=step1) 注册成功且通过相关验证后，按微信公众平台的页面提示依次完成小程序信息填写，并获取**AppID(小程序ID)**。 ## 创建项目 打开**HBuilderX**，开始新建项目，项目配置下图所示：  项目创建完毕后，修改项目相关配置，点击：**manifest.json**文件，在**基础配置**中获取“uni-app应用标识(AppID)”【此操作需要使用账户登录】、在**微信小程序配置**中填写“微信小程序AppID”【在微信公众平台获取】。 打开**微信开发者工具**，打开工具后需要使用微信扫码登录，修改如下配置：  修改设置后，返回HBuilderX开发工具，点击“运行”，选择“微信开发者工具”，查看项目是否能够正常运行。项目运行后，不需要关闭“微信开发者工具”，当我们在HBuilderX中做出更改时，微信开发者工具将会自动刷新。 ## 项目结构讲解  **pages.json文件中的常见配置：** ```json { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationStyle": "custom", //标题栏自定义 "navigationBarTitleText": "首页", //页面标题 "navigationBarBackgroundColor": "#FFFFFF", //标题背景颜色 "navigationBarTextStyle": "black" ,//标题字体颜色 "enablePullDownRefresh": false //是否启用下拉加载 } } ], "globalStyle": { //全局样式配置 "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", //标题栏背景颜色 "backgroundColor": "#F8F8F8" //背景颜色 } } ``` ## 安装uView框架 帮助文档：[https://www.uviewui.com/components/intro.html](https://www.uviewui.com/components/intro.html) 打开uni-app插件市场：[https://ext.dcloud.net.cn/plugin?id=1593](https://ext.dcloud.net.cn/plugin?id=1593)，点击右侧“使用 HBuilderX 导入插件”按钮（此操作需要登录HBuilder账户） 导入成功后，你将会在项目中看到“uni_modules”文件夹，接着我们还需要继续配置相关依赖。 选择对应项目，点击底部**终端**图标，如果项目中没有"`package.json`"，则需使用命令：`npm init -y` 初始化。 安装scss/css插件： ```css // 安装sass npm i sass -D // 安装sass-loader npm i sass-loader -D ``` 引入uView主JS库： 在项目根目录中的 `main.js`中，引入并使用uView的JS库，注意这两行要放在 `import Vue`之后。 ```javascript // main.js import uView from '@/uni_modules/uview-ui' Vue.use(uView) ``` 引入uView的全局SCSS主题文件： 在项目根目录的 `uni.scss`中引入此文件。 ```css /* uni.scss */ @import '@/uni_modules/uview-ui/theme.scss'; ``` 在App.vue引入uView基础样式： ```html <style lang="scss"> /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */ @import "@/uni_modules/uview-ui/index.scss"; /*每个页面公共css */ </style> ``` ## 封装常规配置以及服务器请求方法 在uni-app中有对应的请求方法，为了更好的使用，我们将其封装成对应的方法。 新建**appSetting.js**文件，将系统的相关配置定义在里面，并导出。 ```javascript //服务器名称 export const apiUrl = "https://xxxx"; ``` 新建**util.js**文件，用于存放通用方法，可以参考如下形式创建。 ```javascript /** * 添加请求头 */ export const addHeader = (header, _header) => { for (let key in _header) { header[key] = _header[key] } return header } /** * 添加缓存数据 */ export const setStorage = (key, data) => { uni.setStorageSync(key, data); } /** * 获取缓存数据 */ export const getStorage = (key) => { try { const value = uni.getStorageSync(key); if (value) { return value } else { return "" } } catch (e) { return "" } } /** * 删除缓存数据 */ export const removeStorage = (key) => { uni.removeStorageSync(key); } ``` 新建**request.js**文件，创建get、post请求方法，并导出。 ```javascript import { apiUrl } from './appSetting.js' import { getStorage, addHeader } from './util.js' /** * 默认请求头 */ var Header = { "content-type": "application/json", "Accept-Language": "zh-cn,zh;q=0.5" } /** * get请求 * @param url api接口访问地址 * @param data 参数 * @param _header 请求头 * @returns 执行结果 */ export const Get = (url, data = {}, _header = {}) => { //获取token var token = getStorage('token') if (token != "") { Header = addHeader(Header, { "Authorization": "xxx" + " " + token, }) } return new Promise((resolve, reject) => { uni.request({ url: apiUrl + "/" + url, data: data, header: addHeader(Header, _header), success: (res) => { if (res.statusCode == 200) { if (res.data.successed == false) { // 异常和验证处理 reject(res.data) return } resolve(res.data) } else if (res.statusCode == 401) { //没有访问权限 } else { //其他异常 reject(res) } }, fail: (err) => { //请求失败 reject(err) }, complete: () => { //请求执行完毕 } }); }) } /** * post请求 * @param url api接口访问地址 * @param data 参数 * @param _header 请求头 * @returns 执行结果 */ export const Post = (url, data = {}, _header = {}) => { //获取token var token = getStorage('token') if (token != "") { Header = addHeader(Header, { "Authorization": "xxxx" + " " + getStorage('token'), }) } return new Promise((resolve, reject) => { uni.request({ url: apiUrl + "/" + url, data: data, method: "POST", header: addHeader(Header, _header), success: (res) => { if (res.statusCode == 200) { if (res.data.successed == false) { // 异常和验证处理 reject(res.data) return } resolve(res.data) } else if (res.statusCode == 401) { //没有访问权限 } else { //其他异常 reject(res) } }, fail: (err) => { //请求失败 reject(err) }, complete: () => { //请求执行完毕 } }); }) } /** * put请求 * @param url api接口访问地址 * @param data 参数 * @param _header 请求头 * @returns 执行结果 */ export const Put = (url, data = {}, _header = {}) => { //获取token var token = getStorage('token') if (token != "") { Header = addHeader(Header, { "Authorization": "xxxx" + " " + getStorage('token'), }) } return new Promise((resolve, reject) => { uni.request({ url: apiUrl + "/" + url, data: data, method: "PUT", header: addHeader(Header, _header), success: (res) => { if (res.statusCode == 200) { if (res.data.successed == false) { // 异常和验证处理 reject(res.data) return } resolve(res.data) } else if (res.statusCode == 401) { //没有访问权限 } else { //其他异常 reject(res) } }, fail: (err) => { //请求失败 reject(err) }, complete: () => { //请求执行完毕 } }); }) } /** * delete请求 * @param url api接口访问地址 * @param data 参数 * @param _header 请求头 * @returns 执行结果 */ export const Delete = (url, data = {}, _header = {}) => { //获取token var token = getStorage('token') if (token != "") { Header = addHeader(Header, { "Authorization": "xxxx" + " " + getStorage('token'), }) } return new Promise((resolve, reject) => { uni.request({ url: apiUrl + "/" + url, data: data, method: "DELETE", header: addHeader(Header, _header), success: (res) => { if (res.statusCode == 200) { if (res.data.successed == false) { // 异常和验证处理 reject(res.data) return } resolve(res.data) } else if (res.statusCode == 401) { //没有访问权限 } else { //其他异常 reject(res) } }, fail: (err) => { //请求失败 reject(err) }, complete: () => { //请求执行完毕 } }); }) } ``` 在**main.js**中注册全局事件： ```javascript //注册全局方法 Vue.prototype.$utils = require("@/common/util.js"); //注意，文件路径为您的文件所在目录 Vue.prototype.$api = require("@/common/request.js") //通用方法都可以写在这个文件中 ``` 发送post或get请求模板： ```javascript //包装数据，并发送请求 let data = {}; //需要提交至服务端的数据 this.$api.Post("url", data).then((data) => { //请求成功 console.log(data) }, (err) => { //请求失败 console.log(err) }).catch((err) => { //发生异常 console.log(err) }); ``` 在小程序中创建一个底部导航栏（原生），当然也可以使用uView-tabbar组件（[Tabbar 底部导航栏](https://www.uviewui.com/components/tabbar.html)）。 ```json "tabBar": { "color": "#616161", //字体颜色 "selectedColor": "#e66667", //选中的颜色 "borderStyle": "black", //边框 "backgroundColor": "#ffffff", //背景颜色 "list": [{ "pagePath": "pages/tabbar/index", //页面路径，此路径必须出现在pages列表中 "iconPath": "static/tabbar/home.png", //默认图标 "selectedIconPath": "static/tabbar/home_select.png", //选中图标 "text": "首页" //描述文字 }, { "pagePath": "pages/tabbar/index_2", "iconPath": "static/tabbar/home-2.png", "selectedIconPath": "static/tabbar/home-2_select.png", "text": "TabBar-2" } ] } ``` --- 好了，恭喜你现在可以完成项目的创建了，后续可以根据uView的官方文档开发自己的相关页面吧。 最后修改：2022 年 11 月 09 日 © 允许规范转载 赞 2 都滑到这里了，不点赞再走！？
