注意事项

  1. webview 中网页的的 localStorage 和 uniapp 中的 localStorage 是完全独立的两个环境
  2. uniapp 使用自带基座调试时plus.runtime.appid获取的 appid 为 HBuilder，打包后的运行时获取的 appid 为 项目实际配置的 appid
  3. 浏览器跨域插件。HBuilderX 内置浏览器调试-自动跨域。模拟地理位置
  4. uniapp H5 调试环境-定位支持【腾讯地图H5 appkey】、坐标解析支持。绝大多数页面功能在 H5 环境中调试，提高开发效率

学习要求

基础：介绍【了解】、教程【熟悉】、全局文件【熟悉】、工程化【了解】、插件【了解】
重点： 组件和 API 【熟练】

BB6B98BB505E83543142404B38A479F0

通过 CLI 创建 uni-app 项目

1
vue create -p /Users/wangwz/HBuilderProjects/uni-preset-vue uniapp-cli-demo

CLI 工程默认带了 uni-app 语法提示和 5+App 语法提示

运行项目

1
npm run dev:%PLATFORM%

发布项目

1
npm run build:%PLATFORM%

%PLATFORM% 可取值如下：

值 平台
H5 H5
APP-PLUS App
MP-ALIPAY 支付宝小程序
MP-BAIDU 百度小程序
MP-WEIXIN 微信小程序
MP-TOUTIAO 头条小程序
MP-QQ qq 小程序

HBuilderX 创建的工程默认不带 types 语法提示，在 WebStorm 中编辑的时候，可以自行安装

1
2
3
4
5
//初始化 npm（如已初始化跳过此步骤）
npm init -y

//安装 uni-app 语法提示
npm i @types/uni-app @types/html5plus -D

使用 HTML5+ 接口注意事项

https://uniapp.dcloud.net.cn/use-html5plus

条件编译「H5、App」

https://uniapp.dcloud.net.cn/platform

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//1. API 的条件编译
// #ifdef  %PLATFORM%
平台特有的API实现
// #endif

//2. 组件的条件编译
<!--  #ifdef  %PLATFORM% -->
平台特有的组件
<!--  #endif -->

//3. 样式的条件编译
/*  #ifdef  %PLATFORM%  */
平台特有样式
/*  #endif  */

运行环境判断「开发、生产」

https://uniapp.dcloud.net.cn/frame?id=运行环境判断

1
2
3
4
5
if (process.env.NODE_ENV === 'development') {
    //开发环境
} else if (process.env.NODE_ENV === 'production') {
    // 生产环境
}

判断运行平台「Android、iOS」

平台判断有2种场景，一种是在编译期判断，一种是在运行期判断

编译期判断

编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码

运行期判断

运行期判断是指代码已经打入包中，仍然需要在运行期判断平台，此时可使用 uni.getSystemInfoSync().platform 

1
2
3
4
5
6
7
8
9
10
11
switch(uni.getSystemInfoSync().platform){
    case 'android':
       console.log('运行Android上')
       break;
    case 'ios':
       console.log('运行iOS上')
       break;
    default:
       console.log('运行在开发者工具上')
       break;
}

各端规则

每个端，有每个端的管理规则，这不是uni-app在技术层面上可以抹平的：

  • 比如H5端的浏览器有跨域限制；
  • 比如微信小程序会强制要求https链接，并且所有要联网的服务器域名都要配到微信的白名单中；
  • 比如App端，iOS对隐私控制和虚拟支付控制非常严格；
  • 比如App端，Android、国产rom各种兼容性差异，尤其是因为谷歌服务被墙，导致的push、定位等开发混乱的坑；
  • 如果你的App要使用三方sdk，比如定位、地图、支付、推送…还要遵循他们的规则和限制；

遇事耐心，不急不躁，虽然这不是成功的唯一要素，但它是你技术路上长远走下去的基础

自定义条件编译平台（如钉钉小程序、微信服务号等平台）

自定义环境

https://uniapp.dcloud.io/collocation/package

dev 和 build 模式的区别

  1. dev 模式有 SourceMap 可以方便的进行断点调试
  2. build 模式会将代码进行压缩，体积更小更适合发布为正式版应用
  3. 进行 环境判断 时，dev 模式 process.env.NODE_ENV 的值为 development，build 模式 process.env.NODE_ENV 的值为 production

高效开发技巧

https://uniapp.dcloud.net.cn/snippet

Android 原生插件开发

https://nativesupport.dcloud.net.cn/NativePlugin/course/android

uni-app 离线打包 Android 平台注意事项

https://ask.dcloud.net.cn/article/35139

APP 打包注意事项

https://nativesupport.dcloud.net.cn/AppDocs/FAQ/android

页面间数据通信

https://uniapp.dcloud.net.cn/collocation/frame/communication

注意事项

  • uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等
  • 使用时，注意及时销毁事件监听，比如，页面 onLoad 里边 uni.$on 注册监听，onUnload 里边 uni.$off 移除，或者一次性的事件，直接使用 uni.$once 监听
1
2
3
4
5
6
7
8
9
10
11
12
13
uni.$emit('update',{msg:'页面更新'})

uni.$on('update',function(data){
	console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})

uni.$once('update',function(data){
	console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})

uni.$off('update', function(data){
	console.log('移除 update 监听');
})

语音识别

  • 语音识别功能，使用 HBuilder 自带基座或云打包没问题，因为 DCloud 申请了免费的讯飞或百度 APPID
  • 离线打包时失效，需要自己注册填写 APPID。目前百度语音识别需要付费开通且企业认证。目前官方提供的离线打包资源中 讯飞语音 uni 插件已经删除，暂时不支持离线集成

在通知栏创建通知、监听点击事件

https://www.html5plus.org/doc/zh_cn/push.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
plus.push.createMessage( "闹铃来了", {content: "123456"}, {title: "智慧执法"} );


plus.push.addEventListener('click', function(msg){
		// 分析msg.payload处理业务逻辑
		console.log(msg);
		// {
		// 	"__UUID__": "androidPushMsg90528037",
		// 	"title": "智慧执法",
		// 	"appid": "HBuilder",
		// 	"content": "闹铃来了",
		// 	"payload": {
		// 		"content": "123456"
		// 	}
		// }
		}, true );

调试技巧

  1. H5 调试组件 data 数据

    打开控制台，点击 Vue【浏览器已安装dev-tools 插件】，点击 components ,根据地址栏显示的页面路径，输入【路径去掉斜杠】，就可快速定位到页面组件

    image-20220615112021893

离线打包制作自定义基座

android——离线打包制作自定义基座 - DCloud问答

小结

  1. 滚动到页面底部

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    scrollToBottom() {
        this.$nextTick(function() {
            setTimeout(() => {
                uni.pageScrollTo({
                  scrollTop: 99999,
                  duration: 0
                })
              }, 200) // 要加点延迟, 不然有可能不生效
    	});
    }

  2. 通过返回键返回到首页面

    1
    2
    3
    4
    5
    6
    onBackPress(event){
        uni.switchTab({
          url: '/pages/index/index'
        })
      return true;
    },

  3. 隐藏页面导航栏返回图标

    https://uniapp.dcloud.net.cn/collocation/pages?id=app-titlenview

    修改 pages.json

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    {
      "path": "pages/eventReg/location",
      "style": {
        "navigationBarTitleText": "案件地点",
        "navigationStyle": "custom",
        "app-plus": {
          "titleNView":{
            "autoBackButton":false
          }
        }
      }
    },

  4. 页面横竖屏切换

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    onLoad() {
      // #ifdef APP-PLUS
      plus.screen.lockOrientation('landscape-primary');  //横屏
      // #endif
    },
    onUnload() {
      // #ifdef APP-PLUS
      plus.screen.lockOrientation('portrait-primary'); //竖屏
      // #endif	
    }

问题

HBuilderX 3.3.2 以下版本 App 端 uni.getLocation 存在 type 参数不生效的 bug

HBuilderX 3.3.2+ uni.getLocation 更新注意事项 - DCloud问答

使用 X5 webview 内核

X5 Webview 配置 | uni小程序SDK (dcloud.net.cn)