uni-app

680 阅读6分钟

1.使用uni-app的app开发版本

去工具里面下载插件:uni-app编译,uni-app调试,真机,以及内置浏览器,这都是对应的h5页面

安卓和ios测试阶段,可以直接使用数据线usb连接手机和电脑,进行app的测试,打开真机的usb测试,看到连接电脑的秘钥,hbuilder,就会显示手机连接成功

下载夜神模拟器,在电脑上模拟手机的效果,需要打开夜神模拟器,打开HbuilderX,之后按网址进行操作

引用网上的www.sohu.com/a/199864711…

www.cnblogs.com/oukele/p/99…

夜神模拟器的使用方法:引用的网址:jingyan.baidu.com/article/03b…

本地启用夜神模拟器:先打开夜神模拟器 1.打开夜神模拟器的地址 C:\Windows\System32\cmd.exe 执行cmd 2.nox_adb connect 127.0.0.01:62001 62001是我们自己在Hbuilder_X里面自己设置的安卓模拟器端口号 nox_adb devices

image.png 3.查看adb的版本:这是Hbuilder_X里面的adb 4.adb connect 127.0.0.01:62001 adb devices

image.png 微信小程序的页面,需要在微信开发者工具里面进行调试,运行打包,之后在微信开发者工具里面打开unpackage-dist-dev-mp-weixin这个文件,可以看到这个在小程序上运行的效果

如果操作完,没有生效,按上述步骤,重复操作几次,或者关掉电脑不需要的进程,这样避免进程占所需要的端口

如果连接显示成功,但是HbuilderX还是没有显示设备连接执行下面的操作

image.png

hbuildX连接模拟器的时候,报错,可以选择连接模拟器运行到页面,这样,可以在对应的位置console.log一些错误日志

2.打包操作

1.本地打包和云打包

云打包,在打包之后,命令行里面会有apk的下载地址,使用地址,直接下载就可以看到构建的项目页面,
如果报错,去对应的manifest.json去掉通讯的权限

本地打包:

需要下载android studio编辑器以及hbuilderX的SDK的包
下载android 的sdk,
查看sdk版本和运行版本是否一致,

点击红框,可以直接点击下载对应的版本或者可以去file的setting里面下载

gradle下载成功后,build里面,就可以正常的打包

具体过程

在Hbuilder里面完成,

image.png

生成本地打包App资源,在控制台可以看到打包的路径,

打开Android Studio ,将目录下的apps里面的内容替换掉

image.png

image.png

image.png

image.png

打包安装的app,显示签名不一致,需要dev.dcloud.net.cn/app/build-c…

去配置一些安卓打包的信息,以及Android,配置完,,还需要按android的

image.png

image.png

1是测试打包

2.是生产环境的打包

3.uni-app构建项目

1.在pages.json里面配置页面路由

2.下载uni-ui插件

3.hbuilderX安装scss/sass编译器

4.引入公共样式的文件生效写法 在智能巡检里面

打包成功,在android studio 右下角,可以点击Event log

image.png

点击locate,会跳转到本地文件夹

image.png

里面有可以安装的apk文件,直接点击安装下载就可以了

5.弹框需要引入模块 *****重点

巡检系统

知识库:组件可以正常的引入,使用了分段器也就是tab

知识世界:横向滚动:隐藏滚动条

我的:uni-list  to直接跳转页面的效果不好用,需要在事件里面去进行跳转

登录页:navigator跳转stitchTab的页面要进行特殊声明,使用open-type属性

设置页面的样式:在本页面直接设置page的背景颜色就可以生效,但是在真机上不生效,所以可以把scoped去掉,变成全局的样式

6.点击manifest.json,最下面的源码视图,点击,可以打开代码的页面,进行h5页面的配置,测试之后,不生效,可以使用request.js文件,参考第97.跳转页面:

navnavigateTo:跳转不是tabBar的页面

switchTab:跳转tabBar的页面

8.uni.setstoatge,存储是本地存储

9.新建一个request.js放在最外层,封装uni.request请求,封装token以及baseURL,引入到main.js

注意,uni.getStorage是一个对象

main.js

vue的页面引用

10.导航栏透明,在pages.json的每一项下面的style的app-plus配置

11.uni-app 动态修改原生导航栏文字

 12.uni-app点击当前行获取数据,把字段放在函数里面
 uni-app跳转页面时候传数据,先将数据转化成字符串类型,放在navgitor的跳转url后面拼接传输,在接收的页面,在onload的函数里面进行接受,再将字符串转成对象,进行之后的操作
 
 13.uni-app的图标uni-icon在真机上无法正确显示,需要在在页面写着两行代码

14.uni-app的app端无法监听全局事件,h5可以正常监听,uni-app的层级有问题

15.引入icon-font,可以在page.json的里面引入图标,在导航栏引用外部图片

16.uni-app的picker 必须得有默认数据,否则显示不出来,

17.uni-switchTab,跳转页面,数据不更新,使用uni.reLaunch,不传数据,可以在组件的生命周期的mounted,调用接口,可以刷新数据;传输数据,,需要在页面的生命周期的onload,调用接口,刷新数据

18.https://segmentfault.com/a/1190000023052377 uni-app引入icon-font,真机不显示

image.png改为"\ue601",需要在字符前面加个u

image.png

19.获取页面的token,需要进行一步获取,否则获取不到数据Token = uni.getStorageSync('token')
且同步和异步获取格式不一样,数据类型也不一样

20.封装全局去掉console.log,通过原型链的方式,比插件的方式更加灵活而且简单的代码,量级更小

image.png

image.png

image.png

21.	uni.redirectTo({
            url: '/pages/index/index',
    });用于退出登录,因为关闭当前页面,跳转其他的页面,否则,uni.navigateTo,手机返回,还会回到当前页面,只是对应的token没有,不符合需求

22.上拉加载更多,当前页面加载数据可以使用onReachBottom,这个函数,但是如果是局部的话,可以使用scroll-view标签的scrolltolower事件,向右或者向下加载数据

image.png

23.onShow(){},页面的生命周期,每次页面出现的时候,都会调用该函数

24.scroll-view要保证内层数据长度大于外层的scroll-view设置的宽度,否则事件不触发

25.报这个错误可能是因为内网WiFi掉线了,重新连接wifi

image.png

26.enablePullDownRefresh:刷新只是全局刷新,不能针对局部刷新,而且对于scroll-view部分也没有办法实施,可以使用scroll-view自身的下拉刷新,但是性能并不友好,不建议使用,而且目前测试阶段,发现onfresh刷新函数调用两遍,需要添加是否刷新一个变量,而且只有第一次好使,第二次就一直刷新,需要改成:如下图

image.png

27.android studio  每次manifest.json 文件改变的时候,,编辑器都会对应的更新新的包,需要等待安装完,否则打不了包,而且真机的相机想起权限没有,需要在android studio 的编辑器上进行代码的修改:如下图

image.png