uni项目实践

写在有道笔记上，uni项目实践，转过来格式不太好看，先做此记录吧。

1. 看了uniapp多端开发，感觉不错，还有模板商城，直接拿过来用
2. 用过vue就看一下不支持的部分
3. 用upx，750upx为全屏宽度；如同小程序的rpx
4. 电商模板 更新下单流程、分类、列表

clipboard.png

5. npm i -g @vue/cli@latest

6. 没有webpack的那些配置文件，那如果要修改怎么改，应该是hbuilderx内置了

7. 没有设置router的文件额

8. 看了下url是pages/component/text/text

9. 应该是直接对应的文件夹目录与文件名；那后面就会有蛋疼的

10. 就像是原来的xx.html 文件url

11. components 下的显示不出来，components和pages的。vue文件没有啥区别

12. 哦哦哦 原来是用page.json来注册的

13. 每个可显示的页面，都必须在 pages.json 中注册。如果你开发过小程序，那么pages.json类似app.json。如果你熟悉vue，这里没有vue的路由，都是在pages.json里管理。

14. 但是貌似也不能修改router额

15. 2019年5月6日15:56:38 总结

16. 通过代码中的 if else 来区分不同端的代码，如果一开始只有web的代码的话，那就没啥负担，以后要改造为小程序的时候也比较方便；就是代码就比较臃肿混乱了

17. 写法基本和vue差不多，但是很多标签和跳转方法是和小程序差不多的，如果没有写过小程序的话上手还是会有障碍

18. 不知道能不能自定义路由；暂时未找到

19. 以及webpack等配置文件集成到了编辑器中，修改的话和之前的方式不同

20. 想着cli版本的应该会差不多，但由于下载cli3.0折腾了十分钟没下成功，就先搁置了

21. 再怕的一点就是 出了问题不好找答案；不过想想之前的wepy用的人更少，还不是这样写出来了

22. 再就是以后的维护了，新的人来接手的话，如果没用过uni；那就要会vue和小程序

23. 新的项目是否值得一试呢？这个项目比较小、比较简单可以一试

24. 看到能直接用的模板，想到vue的项目的话也可以找找这些模板吧，都不用设计页面了

25. 云打包后返回的链接下载不了，说是啥key不存在

26. Dcloud,hbuilderX开发uni-app第一天踩坑记录

27. 可能有些人以为js等于浏览器里的js。其实js是ECMAScript组织管理的，浏览器中的js是w3c组织基于js规范补充了window、document、navigator、location等专用对象。

28. 选择器有2个变化：*选择器不支持；元素选择器里没有body，改为了page。微信小程序即是如此。

29. 基于下载的那个商城的模板做的测试；生成的h5代码放到服务器可以访问（pom.js不写vue或者gulp就是直接把文件丢过去）http://192.168.119.120:9720/#/，在本机的web服务器不能，我想是因为默认的那些css、js路径是从根目录开始的
    [图片上传中...(clipboard (1).png-fafa6c-1560844459769-0)]

30. publicPath String 引用资源的地址前缀，仅发布时生效。参考：publicPath

31. https://uniapp.dcloud.io/collocation/manifest?id=h5

32. 果然加了这个本机也能运行了

manifest.json "h5":{ "publicPath":"./" }

4. 但是代码中引入的图片居然都是/static的；现在是改为../../static了，可是生成后的代码层级关系不一样了呀，难怪用那个；不知道能不能用@符号
5. 回忆一下vue的做法，图片都在assets里打包的时候做处理然后放到static里

• 下面一步就是要试试之前vue上的插件，方不方便用过来
• 又到了纠结的时候，用还是不用

1. 也就是 一个请求的封装、store的管理
2. 用的好处有学习的新的技术，小程序的开发，以及之后可能的多端，ios和android；由于要考虑多端，而不得不面对不熟的小程序等问题，这将是导致烦躁的一大问题，再就是如果现在先不管小程序，但是如果以后要转的话也是蛋疼，不过肯定不重新开发小程序要轻松，如果是以小程序开发为主的话，那肯定要用这个；但是现在是以h5开发为主，小程序只是计划想要，现在所增加的负担就感觉没必要；
3. 代价就是，不同的写法等学习成本，原来代码不能复用，以后有没有人维护
4. 不要想着一下子就做的很规范完美，先用这个项目练练手，能做出来再说
5. 这种小众的技术就是怕无法和其他的项目一起维护，但是vue对于之前的jq项目也是一样的呀；、这个的技术栈就是vue和小程序，以后也肯定是找会小程序的人维护；
6. 以后的项目是否都用uni来开发，如果只有一个的话，不怕，之前的wepy也是只有一个啊

• uni-app 内置了常用的样式变量，采用 scss 预处理方式，文件名为 uni.scss，在代码中无需 import 这个文件即可使用这些样式变量。
• pages.json格式化之后，在ios微信上顶部搜索栏的背景色就恢复不了半透明状态了；后发现原来的代码也有这个问题，当滑动很多然后滚回顶部的时候就不会到半透明；这个是pages.json>app-plus>titleNView>"type": "transparent",设置的
• onReachBottom 这个方法是页面自带的，参考这里；
• dcloud的搜索做的还不错，很多问题直接在这搜就行
• 用的熟练后应该会比较顺手，现在是切换的阵痛期吧
• 虽然不推荐使用HTML标签，但实际上如果开发者写了div等标签，也会被编译器转换为view标签，类似的还是有span转text、a转navigator等。
• vue文件里的style没有scoped 但是生成的css上带有了组件特有的标识，应该是默认支持了
• uni-app的H5版使用注意事项

具体技术细节备忘

1. 点击态用 hover-class="common-hover"；原来就是点击的时候添加的这个类名，样式是在app.vue下面的定义的；默认类名是button-hover
2. 状态栏40px 标题栏88px 一共128px；但我页面不用管默认的状态栏

onPageScroll(e){ //兼容iOS端下拉时顶部漂移 if(e.scrollTop>=0){ this.headerPosition = "fixed"; }else{ this.headerPosition = "absolute"; } }, //下拉刷新 onPullDownRefresh(){ this.loadData('refresh'); }, //加载更多 onReachBottom(){ this.loadData(); },

5. 很多变量名可以借鉴

6. seckill-section 秒杀专区

7. VScroll 记得是加overflow: hidden; 不是auto；以及再套一层div;better-scroll 在小程序里无效，可以直接用原生的滚动，不会有冲突

8. 尽量使用 scroll-view来滚动吧，兼容下小程序的样式，但是它会加很多层div，所以高度就不要写在 scroll-view标签上了，就写到内部的元素上

9. better-scroll 需要 添加listenScroll或者 :listenScroll="true" @scroll="xx'来接受 :probeType="3" 要选这个，在它自己弹性滚动的时候也会触发

10. 组件里使用 slot 嵌套的其他组件时不支持 v-for

11. 我擦 导致在小程序上 分类页面不能滚动

12. 首页现在没有v-for；不不我看了还是有的啊，为啥可以，哦 因为首页只有一个滚动区域，有时候也会有问题

13. 反正 分类页面就先用if来判断小程序，单独的代码吧，就不混在vscroll上了

14. 小程序首页的dom没有被scroll-view包裹

15. 小程序的组件并没有把组件标签去掉，这会导致很多类名样式上的问题

16. this.$emit('update:tabCur', index);子组件还可以这样更新父组件变量啊

17. better-scroll swiper 滚动触发点击

18. swipe组件滑动时会触发item内的点击事件

19. 组件里面不能用 onload；用created mounted

20. 跳转

uni.navigateTo({ url: /pages/product/product?id=${id} })

14. 自从H5设置了devServer的proxy，就在一直练websocket，不明原因，并没有使用websocket

clipboard (1).png

15. uni-app能用什么UI框架？http插件 axios?

16. 如何加百度统计呢；这个没有router，不能监听路由的变化啊

17. 他自带的登录https://dev.dcloud.net.cn 可查看 uni-app 在微信小程序、原生App不同平台的统计数据，比如新增用户、日活用户、留存等。

18. 没有h5啊

19. 在 H5 平台组件特有的 class 属性生效的办法 input的没试，但是我自己组件想没有scoped 的效果 >>> 不行啊，是写法问题？

.input >>> .custom-placeholder-class { color: #FF3333; }

18. 刷新页面会 页面全部出栈，只留下新的页面，就没有历史记录返回了，只能返回首页

19. 用了 onPageScroll 后有时会报错[system] Not Found：Page；应该也是和刷新页面有关系，

20. 刷新有onPageScroll 的当前页，然后点击某个按钮跳转下个页面，还是会触发一次，如果是从上一个页面进来然后再点击就不会；蛋疼；为了兼容可能的小程序就还是用onPageScroll 这个方法来监听页面滚动吧，就不用window的方法了

21. // 返回不会执行onHide，前进不会执行onUnload、destroyed

22. 触底事件就用onReachBottom

23. betterScroll与swiper，滚动的冲突；误触发点击事件，换了swiper-vue版本的，解决了小的banner图滑动触发点击的问题，但是新的问题是大的页面的滑动也会触发；

24. swiper 第二页开始，滑动结束会触发点击事件导致跳商品详情了

25. 和是什么页面没有关系，用同样的页面还是会第二个开始有问题

26. 后来想用一个页面fixed到最顶层，然后再swiper的各种事件的时候控制其显示和隐藏来控制页面能否点击，但是在

27. 解决方案：通过provide / inject，将首页的isSwiper变量传到VGoods商品组件，为true时候不让其跳转，

swiper的设置 on: { // 在切换开始的时候设置为true slideChangeTransitionStart: () => { this.isSwiper = true }, // 动画结束的设为false，在页面没滚动过去，回弹回来也会触发，条件宽一点，让其更多少能设为false transitionEnd: () => { setTimeout(() => { this.isSwiper = false }, 100) } }

• location.href无法跳转当前连接的 非tabBar 页面；如在http://192.168.100.22:8080/#/pages/public/login 无法跳转到 location.href='http://192.168.100.22:8080/#/pages/product/product?id=586100436399' 商品详情；但是可以location.href='http://192.168.100.22:8080/#/'跳转到首页；

1. 可以跳转其他ip的所有页面

// 由于uni对location.href限制，故做如下处理 href(url) { /* * 同源tabBar页面未刷新的跳转；由于未刷新后面的reload还是会执行;处理后刷新跳转，且加了一个历史记录，需要返回两下； * 同源非tabBar页面不跳转；处理后刷新跳转 * 非同源所有页面正常刷新跳转 * * 最好还是要刷新跳转，防止store里的登录信息没有更新到页面 * 理论上应该都是同源的链接 * */ // 由于uni对与同源的非tabbar的链接不跳转，故通过pushState设置后再reload location.href = url; // 新URL必须与当前URL同源，否则 pushState() 会抛出一个异常。 history.pushState({}, "", url); location.reload() }

• 应该是自带的 loading 与网络不给力，点击屏幕重试；我就是说那个顶部的loading是哪来的，应该是和网络请求有关

网络不给力，点击屏幕重试

26. 组件内（页面除外）不支持onLoad生命周期。
27. 单页应用跟踪 ，要开启，只支持history模式; uni改为了history模式，测试服务器用node做的容器，我就加上了 connect-history-api-fallback,就好了

29. 设置页面title，页面关闭不会触发onHide，返回按钮的时候没有触发onHide，触发了onUnload，不写onUnload的时候，返回title也会变回去，但是再点进新手攻略，onShow触发了，但是title没有变，不知为啥，反正加上onUnload就好了

onShow(){ document.title="新手攻略" }, onHide(){ document.title="淘多多" }, onUnload(){ document.title="淘多多" },

30. uni-app 为 iOS（iPhoneX）底部安全区适配

31. "safearea": { //安全区域配置，仅iOS平台生效 我丢

32. 不管什么屏幕宽度，底部tabbar高度固定为50px，顶部page-head固定为44px；所以这里不要用upx

33. CSS內使用vh单位的时候注意100vh包含导航栏，使用时需要减去导航栏和tabBar高度，部分浏览器还包含浏览器操作栏高度，使用时请注意。