uniapp开发通用小程序

Posted 2023-03-30 他说_

技术背景
前端需要做一个百度、微信双端小程序，以百度小程序效果为主，本期不做微信地图模块。
基于开发双端小程序的出发点，准备采取框架开发，分别打出百度、微信的小程序发布包。根据市场主流程度，初步选中了uni-app、mpvue、taro三个框架进行比对，最终选择uni-app。

技术选型：

最终选型结论为 uni-app 。

uni-app功能框架图

uniapp项目创建

创建方式分为命令行创建和HbuliderX代码编辑器创建两种。

命令行创建

1. 全局安装vue-cli，推荐cli4.X。 命令：npm install -g @vue/cli@4
2. 创建uni-app，命令：vue create -p dcloudio/uni-preset-vue my-project 「使用正式版，对应的是HbuliderX的最新版本」。
3. alpha版本命令：vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
   
   初次使用推荐hello uni-app模板，此模板api全面，是一个完整的demo。组件的处理方式模板内部都已经包含了。

HBuliderX代码编辑器创建

1. 安装HBulierX软件，用于开发。
   
2. 工具栏里的文件 -> 新建 -> 项目（快捷键Ctrl+N）。选择uni-app类型，输入项目，选择模板，点击创建，即创建成功。
   
   

不同项目创建方式的区别：

• cli创建的项目，是传统的node项目结构。工程代码在src目录下，编译器在项目下，编译结果在dist目录下。更符合RD的一贯开发习惯。
• HBuilderX可视化创建的项目，是一种免node开发概念。工程代码在项目目录下，编译器在HBuilderX目录下而不是项目下，编译结果在项目的unpackage目录下。
• HBuilderX本身就是一个代码编辑器，所以cli创建的项目可以使用HBuliderX开发，且可以更好的发挥HBuilderX的特点，manifest文件可视化配置界面、px尺寸转换提示等辅助开发功能。

uni-app项目运行、调试与发布

项目运行 npm run dev:%PLATFORM%

项目发布 npm run build:%PLATFORM%

%PLATFORM%配置：目前使用较多的为支付宝小程序、微信小程序、百度小程序。

项目调试：

1. 使用HBuilderX自带调试器调试，点击预览或者右键打开控制台调试。
2. 执行npm run dev:%PLATFORM%执行，开发代码产出到dist目录，此时dist目录下代码为platform平台小程序代码，使用对应的小程序代码编辑器导入编译查看。

uniapp开发注意事项：

本质：使用vue按照普通项目开发，uniapp会将uni-app统一代码编译生成每个平台支持的特有代码；如在小程序平台，编译器将.vue文件拆分其运行宿主平台的原生小程序代码，生成wxml、wxss、js等代码。

1. 通用-尺寸使用upx，uniapp底层会根据小程序的宿主平台，将upx转为对应的原生尺寸，例如：百度小程序，upx -> rpx。

2. 通用-api使用uni.api。api也会根据宿主平台转义成对应的原生api
   例如：
   百度小程序：uni.navigateTo -> swan.navigateTo
   微信小程序：uni.navigateTo -> wx.navigateTo

3. 引入组件
   vue2：import + components + 使用
   vue3：setup特性，import+使用
   uniapp-esaycom机制：

• 将自定义组件放在components目录下， 直接使用即可。例components/btn/btn.vue，在dom结构上可以直接使用组件。无需注册和引入。
• easycom方式引入组件不是全局引入，而是局部引入，只有在对应页面响应的时候，才会加载使用的组件。本质上属于按需加载
• 在组件名完全一致的情况下，easycom引入的优先级低于手动引入（区分连字符形式与驼峰形式）
• easycom只处理vue组件，不处理小程序专用组件（如微信的wxml格式组件）。不处理后缀为.nvue的组件。但vue组件也可以全端运行，包括小程序和app-nvue。

4. 创建页面
   uni-app是逻辑和渲染分离的，渲染层在app端提供了两套排版引擎：小程序方式的webview渲染、weex方式的原生渲染。
   vue页面：webview渲染方式
   nvue「native vue」页面：weex方式原生渲染
   tips:

• vue和nuve只是渲染方式有差别，可以在一个页面同时使用
• nvue只支持flex布局，且flex默认纵轴排列
• App.css定义的全局样式对nvue不生效
• nvue不支持less、scss、引入字体文件
• nvue 页面跳转 vue 页面时，只能调用 uni-app 的 路由 API 进行跳转
• nvue页面 :class 只支持数组 语法（weex 限制）
• 通常功能都可以使用vue渲染方式实现，nvue比较适用于app开发。 nvue 解决了之前sdk能力缺失的问题，让前端工程师可以直接开发完整 App，并提供丰富的插件生态和云打包，比较适合app开发。

5. 不同小程序平台自定义组件

• uni-app 支持在 App 和 小程序 中使用小程序自定义组件，从HBuilderX2.4.7起，H5端也可以运行微信小程序组件。
• 小程序自定义组件不是components下的vue组件，不同小程序平台有自己的组件规范，因此自定义组件存放路径不同
  

6. 地图底图功能

• 使用uniapp-map原生组件，uniapp会根据小程序宿主平台而渲染成该小程序的原生地图来源，也就是map组件在百度小程序是百度地图，支付宝小程序是高德地图，微信小程序为腾讯地图。
• 三方地图和地图服务收费说明
  三大地图：需要主动申请ak，百度、高德、腾讯都有一定的商用授权配额，超过配额收费。
  小程序平台内置地图：无需关注地图服务商，无配额限制。
  开发中，发现百度小程序的地图偶现配额受限的报错，跟百度地图同学沟通得知，整个地图的所有小程序用的都是一个ak，如果主ak配额不够，会有此情况出现。需要小程序宿主端提升配额。

7. 条件编译
适用情况：在多平台开发的需求背景下，会有部分功能为某平台特有或者使用某平台内部api的情况。例如，获取百度账户bduss需要使用api-getBDUSS()，这段代码就需要仅在百度小程序宿主平台下编译，可以使用条件编译实现此功能。
写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

• #ifdef：if defined 仅在某平台存在
• #ifndef：if not defined 除了某平台均存在
• %PLATFORM%：平台名称
  %PLATFORM% 取值表格，全表格指路：https://uniapp.dcloud.net.cn/tutorial/platform.html

#ifdef APP-PLUS
需条件编译的代码 // 仅在app环境下出现
#endif

#ifndef H5
需条件编译的代码 // 除了H5之外的所有平台
#endif

#ifdef H5 || MP-WEIXIN
需条件编译的代码 // 或条件下存在的条件编译
#endif

pages.json配置
pages.json用于配置页面路由，每个页面可自定义导航栏模式或者标题等参数
manifest.json配置

• manifest.json是应用的配置文件，用于指定应用的名称、图标、权限、对应小程序的appid等参数。
• 开发时仅需要配置自己开发平台的配置即可，例鹰眼双端小程序，只需要配置微信小程序配置和百度小程序配置。

参考文档：

• 原生wxml开发、wepy、mpvue、taro的对比： https://ask.dcloud.net.cn/article/35867
• 浏览器内核差异：https://ask.dcloud.net.cn/article/1318
• 官方网址：https://uniapp.dcloud.net.cn/collocation/App.html

uniapp之灾小程序不正常

参考技术A 以下是解决办法：
1、onLaunch里获取不到getApp(),控制台"Cannotreadproperty\'globalData\'ofundefined"解决办法：将getApp()替换成this。
2、pagesjson里有重复的path在小程序控制台会报错。解决办法：删除重复的pages配置。
3、避免使用window,navigator这种浏览器特有的对象，会报undefined。
4、里不要写复杂的表达式,否则会出现Badvaluewithmessage。