wordpress建购物网站,网站建设零基础教材免费下载,网站总体设计,网站百度快照怎么做背景之前的工时系统是原生的小程序实现#xff0c;由于产品逻辑需要优化#xff0c;代码混乱又仅限微信平台使用#xff0c;公司致力于想给工时系统重构后支持多平台#xff0c;并对外开放使用#xff0c;使之成为一款真正的商业产品。经过前期调研后#xff0c;uni-app对… 背景之前的工时系统是原生的小程序实现由于产品逻辑需要优化代码混乱又仅限微信平台使用公司致力于想给工时系统重构后支持多平台并对外开放使用使之成为一款真正的商业产品。经过前期调研后uni-app对于多平台的支持最好且易于上手于是采用该框架对工时系统进行改造。 uni-app介绍uni读 you ni是统一的意思。很多人以为小程序是微信先推出的其实DCloud才是这个行业的开创者。DCloud于2012年开始研发小程序技术优化webview的功能和性能并加入W3C和HTML5中国产业联盟推出了HBuilder开发工具为后续产业化做准备。2015年DCloud正式商用了自己的小程序产品名为“流应用”它不是B/S模式的轻应用而是能接近原生功能、性能的动态App并且即点即用。为将该技术发扬光大DCloud将技术标准捐献给工信部旗下的HTML5中国产业联盟并推进各家流量巨头接入该标准开展小程序业务。 在2015年9月DCloud推进微信团队开展小程序业务演示了流应用的秒开应用、扫码获取应用、分享链接获取应用等众多场景案例以及分享了webview体验优化的经验。微信团队经过分析于2016年初决定上线小程序业务但其没有接入联盟标准而是订制了自己的标准。 DCloud持续在业内普及小程序理念推进各大流量巨头包括手机厂商陆续上线类似小程序/快应用等业务。部分公司接入了联盟标准但更多公司因利益纷争严重标准难以统一。技术是纯粹的不应该因为商业利益而分裂。开发者面对如此多的私有标准不是一件正确的事情。既然各巨头无法在标准上达成一致那么就通过这个框架为开发者抹平各平台差异。这就是uni-app的由来。因为多年积累所以DCloud拥有300多万开发者并不意外因为DCloud一直都有小程序的iOS、Android引擎所以uni-app的App端和小程序端保持高度一致并不意外因为DCloud在引擎上的持续投入所以uni-app的App端功能、性能比大多数小程序引擎都优秀并不意外因为DCloud对各家小程序太了解了所以做好抹平各端差异的跨端框架并不意外现在uni-app已经是业内最风靡的应用框架支撑着6亿手机用户的庞大生态。 较其它跨平台框架的优势跨端数量更多平台能力不受限性能体验更优秀周边生态丰富学习成本低开发成本低几大跨平台开发框架性能和兼容性对比微信原生版、wepy版、mpvue版、taro版、uni-app版、chalemeon版 https://github.com/dcloudio/test-framework 前置条件基本上是Vue和微信小程序的结合看了uni-app的介绍和背景就知道为什么小程序的接口组件命名和uni-app几乎一样了页面组件我们要遵循Vue 单文件组件 (SFC) 规范组件标签靠近微信小程序规范接口能力JS API靠近微信小程序规范数据绑定及事件处理靠近 Vue.js 规范同时补充了App及页面的生命周期为兼容多端运行建议使用flex布局进行开发 开发工具HBuilderX 轻如编辑器强如IDE官方IDE下载地址可视化的方式比较简单HBuilderX 内置相关环境开箱即用无需配置node 内置浏览器及时预览更多功能可通过插件实现如果你之前习惯了使用其它的如VS code、Sublime Text编辑器在工具栏里可以选择预设快捷键方案切换里选择对应的工具类型几乎无成本就上手了工具里内嵌了强大的代码块功能通过预设的变量生成某一段代码还支持自定义可以通过自定义代码块教程学习如何生成你自己的代码块可以节省很多的时间创建项目时可以选择你的应用类型生成默认模版第一次运行时在工具栏的运行- 运行到小程序模拟器 - 微信开发者工具首次需要配置微信开发者工具的安装路径然后点击运行即可调起微信开发者工具如果出现调不起来的情况请到微信开发者工具设置菜单-安全设置里把服务端口开启新建项目目录不是选择uni-app的项目根目录选择的是根目录下面的unpackage-dist-dev-mp-weixin运行的是编译后的代码建议平时开发选择内嵌浏览器进行及时预览修改及生效还可以通过扫描地址栏上方的二维码在手机上预览必须连的是同一个局域网调试和浏览器一样打开审查元素 强大的开发者生态uni-app拥有丰富的插件市场这里都是开发者贡献的插件让开发更高效不必重复造轮子当然你也可以为开源贡献参与其中详情见插件开发指南同时兼容 NPM 包管理系统 uni-app完整支持 NPM 活跃的社区氛围有问题或者交流可以去社区发帖如何实现优雅的跨端不同平台特有的API支持条件编译在 C 语言中通过 #ifdef、#ifndef 的方式为 windows、mac 等不同 os 编译不同的代码uni-app 参考这个思路为 uni-app 提供了条件编译手段在一个工程里优雅的完成了平台个性化实现 。条件编译是利用注释实现的在不同语法里注释写法不一样js使用 // 注释css 使用 /* 注释 */vue/nvue 模板里使用 !-- 注释 -- uni-app也是支持钉钉小程序的调试工具用的是支付宝开发者工具在运行菜单里原本没有钉钉这一项需要增加拓展方法参见https://ask.dcloud.net.cn/article/36353 uni-app开发较原生开发对比优势目录结构清晰页面文件由原来的wxmlwxssjsonjs四个文件变成现在的一个vue文件支持scss和less写法通过它的变量、继承、嵌套、运算等特性和函数增加css开发效率减少代码量在uni-app中可以通过vuex插件来全局管理数据劣势编译调试比较麻烦编译时间长编译一次本地缓存数据被清除需要登陆和缓存的过程对于调试增加了时间成本多平台发布需要多写一些条件编译代码要了解各平台的差异性原生开发定义全局变量和方法可在app.js中直接定义全局变量一般用globalData表示uni-app中几种常见的实现方式有公用模块定义一个公用的模块用来组织和管理这些全局的变量在需要的页面引入一般放在根目录下common目录里然后用的时候在页面中引入该模块这种方式维护起来比较方便但是用的时候每次都得引入挂载到Vue.prototype在main.js中挂载属性/方法import req from ./api/index
import util from ./utils/util
Vue.prototype.api http://uniapp.dcloud.io
Vue.prototype.now Date.now || function () {return new Date().getTime();
};
Vue.prototype.$api req
Vue.prototype.$util util
引用的时候script export default { data() { return {}; }, onLoad(){console.log(now: this.now());}, methods: {getProjectWorktime(userId, workDay) {this.$api.wktime.getWktimeStatus(userId,{workDay: workDay}).then(res {console.log(res)})}}
/script
globalData定义全局变量小程序中有个globalData概念可以在 App 上声明全局变量。Vue 之前是没有这类概念的但 uni-app 引入了globalData概念并且在包括H5、App等平台都实现了。在 App.vue 可以定义 globalData 也可以使用 API 读写这个值。script export default { globalData: { text: text }}
/script
在其它页面中取值的方式getApp().globalData.text
uni-app的本地存储uni.storage的键值对存储这个是全端支持的。uni-app的Storage在不同端的实现不同uni.storage在app侧映射为plus.storageh5侧映射为localstorage各个小程序平台映射为其自带的storage键值对存储H5端为localStorage浏览器限制5M大小是缓存概念可能会被清理App端为原生的plus.storage无大小限制不是缓存持久化各个小程序端为其自带的storage api数据存储生命周期跟小程序本身一致即除用户主动删除或超过一定时间被自动清理否则数据都一直可用。微信小程序单个 key 允许存储的最大数据长度为 1MB所有数据存储上限为 10MB。支付宝小程序单条数据转换成字符串后字符串长度最大200*1024。同一个支付宝用户同一个小程序缓存总上限为10MB。百度、头条小程序文档未说明大小限制 常见的平台差异处理目前仅对微信小程序和H5H5页面底部菜单是包含在页面高度内的如果postion置为fixed的话bottom: 0; 需要写成bottom: var(--window-bottom);登陆逻辑需要用在模版里插入条件编译逻辑里需要注入不同的登陆方法!-- #ifdef H5 --
H5登陆
!-- #endif --
!-- #ifndef H5 --
其它平台登陆
!-- #endif --
非H5端默认并未启用 scoped如需要隔离组件样式可以在 style 标签增加 scoped 属性H5端为了隔离页面间的样式默认启用了 scoped在所有的tabbar页面跳转都要用navigateto,来确保tabbar的list不发生任何改变而小程序不受影响出现的异常是在h5中tabbar页面用redirect跳转到非tabbar页面底部菜单仍存在 发布注意事项uni-app各端能运行的是编译后的代码文件位于根目录下unpackage-dist-build/devbuild目录是发布的代码dev是本地预览的代码H5端发布点击发行-网站-H5手机版需要配置网站域名编译到代码中解决接口请求跨域的问题根目录下manifest.json文件关于h5配置注意选择路由模式hash和history运行的基础路径就是域名解析对应的服务器上项目的目录 思考及感想之前听过一个大佬的一句话如果我只能给其他程序员一个建议那就是编写小的代码块你要多写小方法、小功能、小程序。写完不断思考如何精简你的代码如何完善你的逻辑只有基本功扎实了你才能在大的系统和程序里游刃有余。
