# 前言大家好，我是虚竹。如何快速学会一门新派武功，如果是我会怎么做，从哪里下手？是有师傅带领指导，还是自我琢磨？天下武功 BUG 多，唯有修炼内外功。边学边做，动手实操项目，快速（别犹豫干就对了）与反应（发现问题及时消灭）。最近接到一个新项目，要求开发安卓版 APP 应用，指定技术栈 uni-app 框架。对于从未接触或使用过，甚至比较陌生的前端技术工具，不知从何下手，是有哪些坑，心里惶恐，没有把握。一想到俺们程序员都有打不死的小强精神，遇到问题和困难从不退缩大胆求证。一句话干就对了。 > 废话有点多，今天给大家分享一篇不咋地的技术水文。主题是如何快速上手学会 uniapp 开发一个多端应用的实战项目（环境搭建、配置、开发、自测、部署、编译、打包、发布等），以及补充开发中容易遇到的一些小坑小洼。 # 介绍 uni-app uni-app 是一个使用 Vue.js 开发所有前端应用的开源框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）等多个平台。 uni-app 使用 vue 的语法、小程序的标签和API。具有 vue 和微信小程序的开发经验，可快速上手 uni-app。 ## 优点 * 兼容性好 uni-app 最大的特点就是一套代码编译以后多端通用，开发人员不需要在每个平台都单独开发一套代码就可以同时生成安卓、iOS、H5、百度小程序等等。节省了大量的成本。 * 学习成本低 uni-app 是基于 vue.js 开发，因此对于前端开发人员比较友好，学习 uni-app 的门槛也相应降低。尤其是封装的插件与微信端小程序的组件相同。 * 开发速度快 uni-app 使用 HBuilderX 进行开发，所以支持 vue 的语法。同时 HBuilderX 的开发和编译速度都很快，这也是很多人选择 uni-app 的理由之一。 * 扩展能力强 uni-app 支持 nvue，封装了 H5+。同时，还支持原生的 iOS 和安卓开发。因此将原有的H5和移动端 APP 转移到 uni-app 上面十分方便。 ## 缺点 * 文档不太友好，学习运用起来会有点吃力（不过大佬们已默默的在完善优化中） * 平板支持不太给力，主导还是微信小程序、APP移动端 # 开发规范为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范： * 页面文件遵循 `Vue 单文件组件 (SFC) 规范`^[1] * 组件标签靠近小程序规范，详见 `uni-app 组件规范`^[2] * 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见 `uni-app 接口规范`^[3] * 数据绑定及事件处理同 Vue.js 规范，同时补充了 App 及页面的生命周期 * 为兼容多端运行，建议使用 flex 布局进行开发 # 环境搭建安装编辑器 HBuilderX 3.2.12：`官方 IDE 下载地址`^[4] HBuilderX 是通用的前端开发工具，但为 uni-app 做了特别强化。下载 App 开发版，可开箱即用。安装微信开发者工具（已安装过可忽略）：`官方下载地址`^[5] # 初始化项目利用 HBuilderX 工具初始化项目，其实官方文档有介绍，但重要的事情还得重复操作如下：在点击菜单栏文件 -> 创建 -> 项目，如下图所示： ![1.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/20f4b324bc8640a6992e5a3888c042f6~tplv-k3u1fbpfcp-watermark.image?) 选择 uni-app，填写项目名称，选择模板，点击创建，即可成功创建，如下图所示： ![2.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4bdb5e7d7fdf444aa2ab2d0c5e4e5a7d~tplv-k3u1fbpfcp-watermark.image?) ![3.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/80a9bbda87ff45cc97037b31db5338bf~tplv-k3u1fbpfcp-watermark.image?) # 运行项目 * 浏览器运行 ![4.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7294fc2d514d4e88bd662ca4830e64ae~tplv-k3u1fbpfcp-watermark.image?) ![5.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a99bd7ff362946c9afdbf24a25e01e16~tplv-k3u1fbpfcp-watermark.image?) * 真机运行（手机、平板开启调试模式后，运行操作一致） ![6.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/49d4beaf6b9647b3aa2ab6f7a7a0420f~tplv-k3u1fbpfcp-watermark.image?) 手机桌面会自动安装 HBuilderX 工具，并启动界面，如下图所示： ![9.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/72c220d20dc04fe4a38e747dc34c5930~tplv-k3u1fbpfcp-watermark.image?) ![8.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b86328990a05457a9e05167d3f0e796e~tplv-k3u1fbpfcp-watermark.image?) * 微信小程序运行 ![10.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/910dda0a4da04196af4d88cfa4151d4e~tplv-k3u1fbpfcp-watermark.image?) ![11.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/456782d78b6a4dadac6aa678844cf7f9~tplv-k3u1fbpfcp-watermark.image?) **注意：** 如果是第一次使用，需要先配置小程序 IDE 的相关路径，才能运行成功。如下图，需在输入框填入微信开发者工具的安装路径。若 HBuilderX 不能正常启动微信开发者工具，需要开发者手动启动，然后将 uni-app 生成小程序工程的路径拷贝到微信开发者工具里面，在 HBuilderX 里面开发，在微信开发者工具里面就可看到实时的效果。 ![13.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/74aa07b986c24be2abf0f46ebf3c88b3~tplv-k3u1fbpfcp-watermark.image?) # 发布项目 ## 打包原生 APP ![14.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5f5d577a91b048b7b4c9b90628aead2e~tplv-k3u1fbpfcp-watermark.image?) ![15.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0c5edcc743594ac9a6715bf2e45d8f0b~tplv-k3u1fbpfcp-watermark.image?) 打包选择发行 -> 原生APP-云打包 -> 勾选安卓APK包，选择自有证书（输入证书密钥），勾选打正式包 -> 点击打包按钮即可。 **使用自有 Android 证书**生成签名证书操作如下： ### 安装JAVA环境（推荐使用JRE8环境） Oracle 官方下载地址：`JAVA JRE8`^[6] ![jre.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b4a414bb4b4241e7b3297125231a34e7~tplv-k3u1fbpfcp-watermark.image?) 下载到本地，双击安装成功后，默认安装目录为“C:\Program Files\Java\jre1.8.0_202\bin”，如下图所示： ![jre2.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e57bd12b7a394e5d80787c8f6e9e756e~tplv-k3u1fbpfcp-watermark.image?) ### 生成签名证书命令如下： ```js // 进入默认安装JRE目录路径 cd C:\Program Files\Java\jre1.8.0_202\bin // 使用keytool -genkey命令生成证书 .\keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore D:\test.keystore ``` * testalias是证书别名，可修改为自己想设置的字符，建议使用英文字母和数字 * test.keystore是证书文件名称，可修改为自己想设置的文件名称，也可以指定完整文件路径 * 36500是证书的有效期，表示100年有效期，单位天，建议时间设置长一点，避免证书过期回车后会提示如下： ![keystore.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e3cc6daeb60144ea809e1b258e0d498b~tplv-k3u1fbpfcp-watermark.image?) 以上命令运行完成后就会生成证书，路径为“D:\test.keystore”。 ### 查看证书信息 ```js .\keytool -list -v -keystore D:\test.keystore ``` ## 发布 H5 1. 在 manifest.json 的可视化界面，进行如下配置（发行在网站根目录可不配置应用基本路径），此时发行网站路径是 www.baidu.com/h5 ![17.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/298261bf4dd345b2a1d185b7f55ee541~tplv-k3u1fbpfcp-watermark.image?) 2. 在 HBuilderX 工具栏，点击发行，选择网站-PC 或 H5 手机版，如下图，点击即可生成 H5 的相关资源文件，保存于 unpackage 目录。 ![16.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1bdf1eef30dc4aadbb81538da5c2d19b~tplv-k3u1fbpfcp-watermark.image?) ## 发布微信小程序 1. 申请微信小程序AppID，参考：`微信官方教程`^[7]。 ![18.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/965fef3fd54e4c239360212de0f05818~tplv-k3u1fbpfcp-watermark.image?) 2. 在 HBuilderX 中顶部菜单依次点击 "发行" => "小程序-微信"，输入小程序名称和 AppId 点击发行即可在 unpackage/dist/build/mp-weixin 生成微信小程序项目代码。 ![19.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/772bb546755d4cf784c0bd591f1f497c~tplv-k3u1fbpfcp-watermark.image?) ![20.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a7bf9d6032b43b8949ec1dbd8492a24~tplv-k3u1fbpfcp-watermark.image?) 3. 在微信小程序开发者工具中，导入生成的微信小程序项目，测试项目代码运行正常后，点击"上传"按钮，之后按照 "提交审核" => "发布" 小程序标准流程，逐步操作即可，详细查看`微信官方教程`^[8]。 # 目录结构 ```js ┌─components 符合vue组件规范的uni-app组件目录 │ ├─hello-update 版本更新 │ │ └─hello-update.vue │ └─hello-modal 可复用的hello-modal模态框组件 │ └─hello-modal.vue ├─api 统一封装API接口调用方法 ├─pages 业务页面文件存放的目录 │ ├─index │ │ └─index.vue 首页 │ ├─login │ │ └─Login.vue 登录 │ └─my │ └─My.vue 我的 ├─static 存放应用引用的本地静态资源（如图片、视频等）的目录，静态资源只能存放于此 ├─uni_modules 存放[uni_module](/uni_modules)规范的插件。 ├─wxcomponents 存放小程序组件的目录 ├─utils │ ├─validate.js 工具函数校验 │ └─request.js 封装拦截器方法 ├─main.js Vue初始化入口文件 ├─App.vue 应用配置，用来配置App全局样式以及监听应用生命周期 ├─manifest.json 配置应用名称、appid、logo、版本等打包信息 └─pages.json 配置页面路由、导航条、选项卡等页面类信息 ``` # 功能模块 * 配置 tabbar * 自定义导航栏 * 封装组件库 * 系统版本检测、下载、进度、更新 * 上传图片、视频 * 扫码（二维码、条形码） * 平板横屏锁定 * 全局封装拦截器方法 * 密码转 base64 加密（查看踩坑记录） # 代码实现 ## 配置 tabbar 在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab。可以自定义 tabbar，由于原生tabBar是相对固定的配置方式，可能无法满足所有场景。但注意除了H5端，自定义tabBar的性能体验会低于原生tabBar。App和小程序端非必要不要自定义。在 pages.json 中新增如下代码： ```bash // 详细配置属性说明看这里：https://uniapp.dcloud.io/collocation/pages?id=tabbar "tabBar": { "color": "#333333", "selectedColor": "#596CEA", "borderStyle": "black", "backgroundColor": "#ffffff", "fontSize": "14px", "iconWidth": "26px", "list": [{ "pagePath": "pages/index/index", "iconPath": "static/imgs/home.png", "selectedIconPath": "static/imgs/home-active.png", "text": "首页" }, { "pagePath": "pages/my/My", "iconPath": "static/imgs/my.png", "selectedIconPath": "static/imgs/my-active.png", "text": "我的" }] } ``` ![21.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ff2df112fff5461db6d829cc1c1a403a~tplv-k3u1fbpfcp-watermark.image?) ## 自定义导航栏 ```bash // 详细配置属性说明看这里：https://uniapp.dcloud.io/collocation/pages?id=app-plus // 方法一 "globalStyle": { "app-plus": { "titleNView": false // 禁用原生导航栏 }, } // 方法二 "globalStyle": { "navigationStyle": "custom" } ``` 原生导航栏效果图： ![22.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/58311b8cef514e51a62be60d3e3fceab~tplv-k3u1fbpfcp-watermark.image?) 禁用原生导航栏效果图： ![23.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/78b39aa8451f4422bc65b762270ee2d7~tplv-k3u1fbpfcp-watermark.image?) 自定义导航栏注意以下几点： * 非H5端，手机顶部状态栏区域会被页面内容覆盖。这是因为窗体是沉浸式的原因，即全屏可写内容。uni-app提供了状态栏高度的css变量`--status-bar-height`，如果需要把状态栏的位置从前景部分让出来，可写一个占位div，高度设为css变量。 ```js // 详情介绍内置css变量：https://uniapp.dcloud.io/frame?id=css变量 ``` * 如果原生导航栏不能满足需求，推荐使用uni ui的`自定义导航栏NavBar`。这个前端导航栏自动处理了状态栏高度占位问题。 ```js // 详情介绍自定义导航栏组件：https://ext.dcloud.net.cn/plugin?id=52 ``` * 页面禁用原生导航栏后，想要改变状态栏的前景字体样式，仍可设置页面的 navigationBarTextStyle 属性（只能设置为 black或white）。 ## 封装组件库弹出层组件 uni-popup，在应用中弹出一个消息提示窗口、提示框等，业务场景比较常见，几乎每个界面都会用到，于是考虑封装这个组件，自定义配置 `easycom`，并且无需引用、注册，直接在页面中就能使用。首先，在项目的 components 目录下，并符合`components/组件名称/组件名称.vue`目录结构。弹框组件代码如下： ```js // hello-modal.vue ``` 在 pages.json 中配置 easycom，如下图所示： ![31.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/53df274878de41cab5066ed634bc4397~tplv-k3u1fbpfcp-watermark.image?) 现在就可以愉快的玩耍了，不管 components 目录下安装了多少组件，`easycom` 打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。 template直接使用示例如下： ```js ``` ![32.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/56bd062c68bf4826829c3968ab6ea802~tplv-k3u1fbpfcp-watermark.image?) ## 系统版本检测、下载、更新在 manifest.json 中配置版本号、版本名称，如下图所示： ![33.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15c040c559a64411adacade6eb7a12ff~tplv-k3u1fbpfcp-watermark.image?) 针对 app 端检测系统版本有效，在 app.vue 中全局获取系统版本，使用条件编译进行平台区分，代码如下： ```js ``` 创建自定义弹框组件（版本信息），代码如下： ```js // hello-update.vue ``` 使用示例代码如下： ```js ``` 效果图如下所示： ![34.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e113e0f5896a4078a38b4aae7cae8e24~tplv-k3u1fbpfcp-watermark.image?) ![35.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/903acf703623467480530464d576fc76~tplv-k3u1fbpfcp-watermark.image?) ![36.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c0a30aa28f9a45bb9ab7f1cf07a46d18~tplv-k3u1fbpfcp-watermark.image?) ## 上传图片、视频除了上传功能，还包括预览、删除操作，直接截取此功能代码含注释如下： ```js ``` 效果图如下所示： ![37.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aeb5bdaffe0a411dae5145d726e7ad7d~tplv-k3u1fbpfcp-watermark.image?) ![38.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/285024b468464fbaba493108355f0cdd~tplv-k3u1fbpfcp-watermark.image?) ## 扫码（二维码、条形码） uniapp 提供api接口调用客户端扫码界面 uni.scanCode，示例代码如下： ```js // 详细介绍看这里：https://uniapp.dcloud.io/api/system/barcode?id=scancode // 允许从相机和相册扫码 uni.scanCode({ success: (res) => { console.log('条码类型：' + res.scanType); console.log('条码内容：' + res.result); } }); // 只允许通过相机扫码 uni.scanCode({ onlyFromCamera: true, success: (res) => { console.log('条码类型：' + res.scanType); console.log('条码内容：' + res.result); } }); // 调起条码扫描 uni.scanCode({ scanType: ['barCode'], success: (res) => { console.log('条码类型：' + res.scanType); console.log('条码内容：' + res.result); } }); ``` 条形码生成器推荐一款直接在插件市场下载即可使用，如下所示： ```js // 详细介绍看这里：https://ext.dcloud.net.cn/plugin?id=406 ``` 效果图如下所示： ![40.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ab2652dd0244e4183413bfb61934811~tplv-k3u1fbpfcp-watermark.image?) ## 平板横屏锁定在 pages.json 中新增如下代码： ```bash // 详细配置属性说明看这里：https://uniapp.dcloud.io/collocation/pages?id=globalstyle "globalStyle": { "pageOrientation": "landscape" // 横屏配置，屏幕旋转设置，仅支持 auto / portrait / landscape } ``` ## 全局封装拦截器方法 ```js // request.js /** * @Des 请求接口封装 * @Author Jack Chen @懒人码农 * @Date 2021-11-22 09:18:51 * @LastEditors Jack Chen * @LastEditTime 2021-11-22 09:45:31 */ import { getToken, setToken, removeToken } from './validate.js'; // #ifdef H5 let baseUrl = '/api' // #endif // #ifdef APP-PLUS let baseUrl = 'http://192.168.11.59:8000'; // 开发服务器 // #endif export const myRequest = (options) => { // 暴露一个function：myRequest，使用options接收页面传过来的参数 return new Promise((resolve, reject) => { // 异步封装接口，使用Promise处理异步请求 let header = options.header || {}; if (getToken()) { if (options.url.indexOf('/logout') === -1) { header['Authorization'] = 'Bearer ' + getToken(); } } uni.request({ // 发送请求 url: baseUrl + options.url, // 接收请求的API method: options.method || 'GET', // 接收请求的方式,如果不传默认为GET header: header || {}, data: options.data || {}, // 接收请求的data,不传默认为空 sslVerify: false, success: (res) => { // 数据获取成功 // console.log('success===', res.statusCode); if (res.statusCode === 500) { uni.showToast({ title: '网络异常请稍后', icon: 'error' }) return; } if (res.data.code !== 0) { // 因为0是返回成功的状态码,如果不等于0,则代表获取失败 if (res.data.code === 5000) { uni.showToast({ title: '网络异常请稍后', icon: 'error' }) } else if (res.data.code === 2000) { uni.showToast({ title: res.data.message, icon: 'error' }) removeToken(); setTimeout(() => { uni.redirectTo({ url: '/pages/login/Login' }); }, 1500) } else { uni.showToast({ title: res.data.message, icon: 'error' }) } } resolve(res.data) // 成功,将数据返回 }, fail: (err) => { // 失败操作 console.log('err===', JSON.stringify(err)); // uni.hideLoading(); uni.showToast({ title: '网络异常请稍后', icon: 'error' }) reject(err); } }) }) } ``` 在 main.js 文件引入，如下图所示： ![41.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/022f8d4552b045f4adc5cbd1f31529e9~tplv-k3u1fbpfcp-watermark.image?) # 踩坑 ## 密码转 base64 加密封装一个跨端支持 base64 加解密的 JavaScript 方法，代码如下： ```js /** * @desc base64加密解密 * @param {string} input * @returns {String} */ export function Base64() { // private property let _keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='; // public method for encoding this.encode = (input) => { let output = ''; let chr1, chr2, chr3, enc1, enc2, enc3, enc4; let i = 0; input = this._utf8_encode(input); while (i < input.length) { chr1 = input.charCodeAt(i++); chr2 = input.charCodeAt(i++); chr3 = input.charCodeAt(i++); enc1 = chr1 >> 2; enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); enc4 = chr3 & 63; if (isNaN(chr2)) { enc3 = enc4 = 64; } else if (isNaN(chr3)) { enc4 = 64; } output = output + _keyStr.charAt(enc1) + _keyStr.charAt(enc2) + _keyStr.charAt(enc3) + _keyStr.charAt(enc4); } return output; } // public method for decoding this.decode = (input) => { let output = ''; let chr1, chr2, chr3; let enc1, enc2, enc3, enc4; let i = 0; input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ''); while (i < input.length) { enc1 = _keyStr.indexOf(input.charAt(i++)); enc2 = _keyStr.indexOf(input.charAt(i++)); enc3 = _keyStr.indexOf(input.charAt(i++)); enc4 = _keyStr.indexOf(input.charAt(i++)); chr1 = (enc1 << 2) | (enc2 >> 4); chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); chr3 = ((enc3 & 3) << 6) | enc4; output = output + String.fromCharCode(chr1); if (enc3 != 64) { output = output + String.fromCharCode(chr2); } if (enc4 != 64) { output = output + String.fromCharCode(chr3); } } output = _utf8_decode(output); return output; } // private method for UTF-8 encoding this._utf8_encode = (string) => { string = string.replace(/\r\n/g, '\n'); let utftext = ''; for (let n = 0; n < string.length; n++) { let c = string.charCodeAt(n); if (c < 128) { utftext += String.fromCharCode(c); } else if((c > 127) && (c < 2048)) { utftext += String.fromCharCode((c >> 6) | 192); utftext += String.fromCharCode((c & 63) | 128); } else { utftext += String.fromCharCode((c >> 12) | 224); utftext += String.fromCharCode(((c >> 6) & 63) | 128); utftext += String.fromCharCode((c & 63) | 128); } } return utftext; } // private method for UTF-8 decoding this._utf8_decode = (utftext) => { let string = ''; let i = 0; let c = c1 = c2 = 0; while ( i < utftext.length ) { c = utftext.charCodeAt(i); if (c < 128) { string += String.fromCharCode(c); i++; } else if((c > 191) && (c < 224)) { c2 = utftext.charCodeAt(i+1); string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)); i += 2; } else { c2 = utftext.charCodeAt(i+1); c3 = utftext.charCodeAt(i+2); string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); i += 3; } } return string; } } ``` 页面调用方法： ```js ``` ## 修复input-autocomplete插件插件地址：https://ext.dcloud.net.cn/plugin?id=441 * 提示框美化 ![1.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/182c78bdc5864fd39696734383dbc4e3~tplv-k3u1fbpfcp-watermark.image?) * input输入框改用扩展组件 ```html

``` ```html ``` 将基本组件input输入框改成扩展组件好处是：可以统一表单风格，控制校验提示错误信息显示/隐藏。 * 新增禁用属性 ![2.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/79fa3c2e68a54a7398dd9683382233ea~tplv-k3u1fbpfcp-watermark.image?) ![3.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/047343eb65254c4fa136d1c1e803fe0b~tplv-k3u1fbpfcp-watermark.image?) ## 返回上一页刷新操作顶部导航返回按钮，返回上一页需区分各端平台，示例代码如下： ```js ``` 如需返回上一页并刷新数据，示例代码如下： ```js ``` ## 条件编译条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。在 pages.json 写条件编译如下图所示： ![24.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d77ff296b5104478b52232a03f5779fd~tplv-k3u1fbpfcp-watermark.image?) 如果不加条件编译，微信小程序开发者工具会显示警告，如下图所示： ![25.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9e59d8582ac44229bb8b9550486def76~tplv-k3u1fbpfcp-watermark.image?) **写法：** 以 #ifdef 或 #ifndef 加 **%PLATFORM%** 开头，以 #endif 结尾。 - #ifdef：if defined 仅在某平台存在 - #ifndef：if not defined 除了某平台均存在 - **%PLATFORM%** ：平台名称（HBuildex会有提示）详细介绍请移步到这里：https://uniapp.dcloud.io/platform?id=preprocessor **注意：** - 条件编译是利用注释实现的，在不同语法里注释写法不一样，js使用 `// 注释`、css 使用 `/* 注释 */`、vue/nvue 模板里使用 ``； - 条件编译APP-PLUS包含APP-NVUE和APP-VUE，APP-PLUS-NVUE和APP-NVUE没什么区别，为了简写后面出了APP-NVUE ； - 使用条件编译请保证`编译前`和`编译后`文件的正确性，比如json文件中不能有多余的逗号； - `VUE3` 需要在项目的 `manifest.json` 文件根节点配置 `"vueVersion" : "3"` ## rpx单位不适配大屏在移动设备上也有很多屏幕宽度，UI设计师一般只会按照750px屏幕宽度出图。此时使用rpx的好处在于，各种移动设备的屏幕宽度差异不是很大，相对于750px微调缩放后的效果，尽可能的还原了设计师的设计。但是，一旦脱离移动设备，在pc屏幕，或者pad横屏状态下，因为屏幕宽度远大于750了。此时rpx根据屏幕宽度变化的结果就严重脱离了预期，大的惨不忍睹。 uniapp **适配平板** 在 pages.json 配置 globalStyle 代码如下： ```json // 方法一 "globalStyle": { "rpxCalcMaxDeviceWidth": 960 } // 方法二 "globalStyle": { "rpxCalcMaxDeviceWidth": 0, } ``` ## uni-table 原生 uni-ui 表格组件，用于展示多条结构类似的数据，满足基本业务需求。不足的地方是无法固定表头，对APP端/微信小程序列表项内容不会垂直居中，新增按钮操作也不会垂直居中。 PC端效果图： ![26.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc02082bf7e04cca91d2e2664110d6b7~tplv-k3u1fbpfcp-watermark.image?) 微信小程序效果图： ![27.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/14c4732ad38641c88fdf6677e7461f11~tplv-k3u1fbpfcp-watermark.image?) 平板端效果图： ![28.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9a102cf0b94b4ef5bfbe419cf119bdb5~tplv-k3u1fbpfcp-watermark.image?) 基于 uni-table 表格组件改良后，可以固定表头，隔行换色，效果图如下图所示： ![29.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b8aea5a290854a2d9d589782dfa3e411~tplv-k3u1fbpfcp-watermark.image?) ![30.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9893431979cf42e99532b26733fe5de8~tplv-k3u1fbpfcp-watermark.image?) 代码如下： ```js ``` ## 微信小程序报错 * 运行小程序报错提示：Cannot read property ‘forceUpdate’ of undefined ![err_1.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/77e58bc87a934f9daf57d729b10ddf9b~tplv-k3u1fbpfcp-watermark.image?) * 解决方法 uni-app 需要配置微信小程序 AppID，在项目根目录找到 manifest.json 文件打开，选择微信小程序配置，将小程序 ID 填入后，关闭微信开发者工具，重新运行项目即可。 ![12.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a524fa3213934d5183a1b3f15d1e5792~tplv-k3u1fbpfcp-watermark.image?) # 结语文笔有限就写到这吧，以上是我首次使用 uniapp 框架开发一款小型平板端应用的初体验，自己对流程进行了梳理和总结。如有写得不妥的地方，还请指出。也希望通过这里认识更多志同道合的朋友，如果你也喜欢折腾，欢迎加我好友，一起浪，一起进步🦄。如果此文对看官们有一丢丢帮助，请给点一个赞👍或者分享都是对我最大的支持。 > 关注公众号【**懒人码农**】，获取更多项目实战经验及各种源码资源。如果你也一样对技术热爱并且为之着迷，欢迎加我微信【lazycode520】，当然也可以加我微信拉你进群，毕竟我也是有趣的前端，认识我也不赖🌟～ # 相关资料 * 1.Vue 单文件组件 (SFC) 规范--https://vue-loader.vuejs.org/zh/spec.html * 2.uni-app 组件规范--https://uniapp.dcloud.io/component/README * 3.uni-app接口规范--https://uniapp.dcloud.io/api/README * 4.HBuilderX 编辑器工具--https://www.dcloud.io/hbuilderx.html * 5.微信开发者工具--https://developers.weixin.qq.com/miniprogram/dev/devtools/download * 6.java jre8官网下载--https://www.oracle.com/java/technologies/javase/javase8-archive-downloads.html * 7.申请微信小程序AppID--https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html#%E7%94%B3%E8%AF%B7%E5%B8%90%E5%8F%B7 * 8.微信小程序发布上线流程--https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/release.html#%E5%8F%91%E5%B8%83%E4%B8%8A%E7%BA%BF