站内搜索

搜索

手游源码-游戏源码-棋牌源码资源网-亲测源码-游戏搭建-破解游戏-网站源码-qq技术

100金币/天 购买

小程序原生开发有不少槽点:原生wxml开发(组图)

20

主题

82

帖子

125

金币

绿钻会员

Rank: 3Rank: 3

积分
294
发表于 2022-1-9 02:00:36 | 显示全部楼层 |阅读模式
小程序原生开发有很多弊端: 原生wxml开发对Node、预编译器支持较差,影响开发效率和项目构建过程。所以大公司会用框架来开发微信定义的语法,wxml、wxs、wx:if等语法,过于私有化。不如认真学习Vue,学会通用,而不只是为了微信小程序。Vue生态中有太多可以提高开发效率的周边工具,比如IDE、验证器、三方库。. . 相比专业编辑,微信的开发者工具真的不好用,个性化设置也很少。 作为前端工程师,除了微信小程序,我们还需要开发网页、其他小程序甚至是应用程序。人们不喜欢来回切换开发工具并改变他们对语法的看法。 uni-app 自然可以解决这些问题,但开发者往往会有一些顾虑: 微信小程序中的一些功能恐怕用uni-app后无法实现。由于 uni-app 的更新,恐怕性能不如原生 WXML。怕是框架不成熟,跳坑担心社区生态不完善。 本文从开发者关心的功能、性能、学习门槛、开发经验、生态、扩展性等维度一一分析对比,并给出解释。 1.函数实现 开发者最常问的问题:小程序迭代升级,增加了一批API小程序源码论坛,uni-app框架没有及时更新怎么办? 其实这是一个误区,uni-app不限制底层API调用;在小程序端,uni-app 支持直接编写微信原生代码。 类比传统的web开发,如果使用vue、react等框架使得开发者无法操作浏览器提供的所有API,那么这样的框架一定是不成熟的。小程序开发也是如此。在uni-app框架中,微信提供的所有原生代码也都可以调用。 所以,如果有一些API(平台专用或者新API),uni-app还没有封装,开发者可以直接在uni-app中编写微信原生API,即以wx开头的各种API。 比如,虽然uni-app还没有封装跨平台的广告(ad)组件,但是开发者仍然可以使用微信组件在小程序端展示广告。代码示例如下:

    
    微信官方banner广告
    
        
        
    
    微信官方视频广告
    
        
        
    

小程序运行效果如下: 包括微信小程序自定义组件、WXS、云开发等复杂用法,uni-app全面支持。 所以得出的结论是:使用uni-app框架开发,功能和原生小程序开发没有区别,不会有限制。 2. 性能体验 开发者经常问的第二个问题:三方框架大多是分层封装的。这些封装会增加运行负载并导致性能下降吗? 也是想多了,uni-app不会导致性能下载,甚至会自动优化很多链接。在很多场景下,性能体验都优于微信原生开发。 类似于使用vue.js开发web,不仅不会导致性能比原生js差,而且由于使用了虚拟DOM和差分更新技术,在大多数场景下,性能都优于原生js的开发人员手动编写代码来操作 DOM。 在小程序中,需要频繁地编写代码来更新数据。这里重要的是差分数据更新。如果不做区别,代码性能不好。如果每个逻辑都判断差异数据更新,代码写起来太麻烦了。 使用uni-app,底层自动差分数据更新,简单高效。 我们从优化理论和实测数据两个维度详细讲解。 2.1 理论:框架优化 为了提升性能体验,小程序从架构设计层面做了大量工作: - 逻辑层和视图层分离,避免 JS 操作阻塞视图渲染 - 分离组件标签(wxml),降低 DOM 复杂度 - 简化样式(wxss),提高渲染性能——复杂组件(视频/地图等)的原生化,解决web组件功能/体验不足的问题 通过这些规范约束,小程序的整体性能体验得到了很大的提升,但性能坑还是很多的,其中最常见也是最常见的。 这里简单介绍一下官方微信描述背后的工作原理: 目前小程序的视图层作为渲染载体,而逻辑层独立作为运行环境。在架构上, 和 是独立的模块,没有直接数据共享的通道。目前,视图层和逻辑层之间的数据传输实际上是由双方来实现的。 为了简化开发,微信将调用封装成一个JS方法来实现视图层和逻辑层之间的数据传输。数据流图如下: 配置的执行会受到很多因素的影响。每次传递的数据量过大或者调用频繁(见微信官方介绍),都可能导致性能体验问题。 幸运的是,uni-app 针对两者进行了优化。 2.1.1 减少传递的数据量 假设当前页面有一个列表(初始值为a、b、c、d),现在我们需要在列表后面追加4个新的列表项(e、f、g、h)。我们分别使用微信原生和uni-app。以不同的模式编写代码。 小程序原生代码:

    page({
    data:{
        list:['a','b','c','d']
    },
    change:function(){
        let newData = ['e','f','g','h'];
        this.data.list.push(...newData);
        this.setData({
            list:this.data.list
        })
    }
})

如上面微信原生代码所示,当方法执行时,列表中的a、b、c、d、e、f、g、h8列表项会通过all传递。 单应用代码:

    export default{
    data(){
        return {
            list:['a','b','c','d']
        }
    },
    methods:{
        change:function(){
            let newData = ['e','f','g','h'];
            this.list.push(...newData)
        }
    }
}

如上面的uni-app代码所示,在执行该方法时,只会传输列表中新增的四个列表项e、f、g、h,大大简化了传输量。 uni-app 利用 JSON Diff 库。在调用它之前,它会比较历史数据,准确高效地计算变化的差分数据,然后调用它。只传输变化后的数据,以达到传输数据量最小的目的。,大大提高了通信性能。 小贴士:可能有同学不同意将数据从a,b,c,d,e,f,g,h8列表项转为e,f,g,h4列表项的优化,但我们提醒,不要小看这一点机制,上面只是一个demo例子。 2.1.2 减少调用频率 假设我们需要改变多个变量的值,我们以微信原生和uni-app两种模式编写代码。 小程序原生代码:

    change:function(){
    this.setData({a:1});
    this.setData({b:2});
    this.setData({c:3});
    this.setData({d:4});
}

以上四个调用会引起四个逻辑层和视图层数据通信 单应用代码:

    change:function(){
    this.a = 1;
    this.b = 2;
    this.c = 3;
    this.d = 4;
}

上面uni-app的代码会合并成{"a":1,"b":2,"c":3,"d":4}一条数据,然后只调用一次就完成了数据传输,大大降低通话频率。 uni-app之所以有这样的优势,是因为uni-app是基于Vue深度定制的,使用了Vue的机制。
2.2 实测:性能对比数据 有了上面的理论分析,我们再进行实机测量,并用数据进行对比。 测试模型如下: 模仿微博的榜单是一个有很多组成部分的榜单。这种复杂的列表对性能的压力更大,非常适合性能测试。 从触发上拉加载到数据更新和页面渲染完成,都需要准确的时序。人类视觉计时绝对是不够的。我们采用程序嵌入的方法,制定如下时序: Tips:回调函数的开始时间可以认为是页面渲染完成的时间,因为微信是这样定义的(微信规范):
测试方法:从页面上的一个空列表开始,程序自动触发上拉加载,每次添加20个列表,记录单次耗时;以固定间隔连续触发N次上拉加载,使页面达到20*N个列表,计算从触发上拉到渲染完成的平均时间。 测试结果如下:
说明:以400条微博列表为例,从页面空列表开始,每1秒触发一次上拉加载(新增20条微博),记录单次耗时,停止触发20次后(页面达到400条微博),计算这20次的平均耗时,结果显示这20次微信原生触发上拉->渲染的平均时间为876毫秒, uni-app 是 741 毫秒。 这些数据可能违背许多人的直觉。uni-app的性能比原来的微信还要好! 不要混淆,这是上面理论分析部分减少传输数据量的优化方案的结果;微信原生每次传输全量数据,而`uni-app`在调用`之前会自动做一次`diff`计算,每次只传递变化的数据。 使用微信原生框架,开发者可以完全自行优化和简化数据传输。例如修改如下:

    data: {
    listData: []
},
onReachBottom() { //上拉加载
    // 通过长度获取下一次渲染的索引
    let index = this.data.listData.length;
    let newData = {}; //新变更数据
    Api.getNews().forEach((item) => {
        newData['listData[' + (index++) + ']'] = item //赋值,索引递增
    }) 
    this.setData(newData) //增量数据,发送数据到视图层
}

经过以上优化修改,再次测试,微信原生框架的性能数据如下: 从测试结果可以看出,经过开发者手动优化后,微信原生框架可以实现更好的性能,但`uni-app`的性能差距与微信原生相比并不大。 但是原生开发需要开发者熟悉小程序的通信机制,有意识地编写代码,简化数据;uni-app 自动处理,自然更省心。 这个结果类似于 web 开发,也包括原生 js 开发、vue 和 react 框架。如果不做特别优化,原生js编写的网页性能往往不如vue和react框架。 正是因为优秀的`Vue`和`react`框架,良好的性能和良好的开发体验,使得原生js开发的使用逐渐减少。 通过本章性能优化的理论分析和数据测量,我们可以输出这样一个结论: 3.社区生态3.1 周边车轮 小程序脱离web自创生态天外神坛,很多web生态不能使用轮子。 微信小程序还有一个周边生态,而其他几个小程序平台的生态还没有建立起来。 uni-app周边生态非常丰富,插件市场有近800个插件,详见。 首先,uni-app兼容小程序生态小程序源码论坛,可以直接引入使用各种自定义组件。在此基础上,uni-app插件市场拥有更多vue组件,可以跨多个终端同时使用,性能卓越。 这使得 uni-app 生态系统成为最丰富的小程序开发生态系统。 比如富文本解析、图表等组件,uni-app的插件性能超过了wx-等微信小程序组件。 如果开发者需要丰富的高性能组件,应该使用 uni-app 而不是原生小程序开发。 3.2 活跃的QQ/微信群和论坛 uni-app官方拥有70个开发者QQ/微信交流群(大部分是2000人,近10万开发者),还有更多的三方群。 每天有数百条帖子的问答社区。活动与官方微信小程序论坛相同,远超其他小程序官方论坛。 uni-app三方培训活跃,腾讯课堂官方为uni-app制作课程。各种培训网站随处可见免费或付费的uni-app培训视频教程。 4.学习门槛,开发经验 首先,微信原生的开发语法,和 React 和 Vue 一样,有点不伦不类。对于开发者来说,相当于学习了一套新的语法,大大增加了学习成本,一直被大家诟病。 uni-app 对开发者更加友好。总之就是vue的语法+小程序的api。 它遵循 Vue.js 语法规范,组件和 API 遵循微信小程序命名。这些都是常见的技术栈。学习它们是前端必备的技能,uni-app并没有太多额外的学习成本。 有一定Vue.js和微信小程序开发经验的开发者可以快速上手uni-app。 没有学过vue的同学不需要全部掌握vue。他们只需要了解vue、数据绑定、列表渲染、组件等基本语法即可,其他如路由、cli、node.js等不需要学习。 由于工具和uni-app无需终端即可开发,项目的可视化创建、组件的可视化安装和编译器的扩展,也就是uni-app的学习门槛低于vue.js由网络开发。 在开发体验上,微信原生开发与uni-app有较大差距,主要体现在: 在开发工具的维度上,差距更大: - 微信开发者工具被投诉无数 - uni-app的生产公司也是.io的生产公司。/是四大主流前端开发工具(堪比百度指数),对uni-app做了很多优化,所以uni-app的开发效率和易用性都比不上微信原生开发. 这里可以得出一个结论:如果需要工程能力,微信原生开发就别想了。 5.未来的可扩展性 虽然现在的产品只要求发布到微信小程序,但如果有一天,老板和一个外国和尚喝完咖啡转身要求覆盖阿里、百度、字节跳动等各种小程序平台。程序员此时应该做什么?管理? 每个平台都搬砖是真的吗? 这时,uni-ap的跨端功能将成为程序员的自助神器。基于uni-app开发的小程序无需修改即可同时发布到多个小程序,甚至是App和H5平台。这不是梦想,而是现实。可以依次扫描以下8个二维码,体验最全面的跨平台效果!.
6.结束语
结论:只开发微信小程序,uni-app也要用。
【天外神坛】免责声明及帮助
1.重要:如果遇到隐藏内容回复后显示为代码状态,直接刷新一下页面即可解决此问题。
2.本文部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责。
3.若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。
4.如果本站有侵犯、不妥之处的资源,请在网站右边客服联系我们。将会第一时间解决!
5.本站所有内容均由互联网收集整理、网友上传,仅供大家参考、学习,不存在任何商业目的与商业用途。
6.本站提供的所有资源仅供参考学习使用,版权归原著所有,禁止下载本站资源参与商业和非法行为,请在24小时之内自行删除!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

老群被封加此新群不迷路。
上个主题 下个主题 快速回复 返回列表 客服中心 搜索 QQ加群
上个主题 下个主题 快速回复 返回列表 客服中心 搜索 QQ加群

QQ|Archiver|小黑屋|天外神坛

湘ICP备2021015333号

Powered by 天外神坛 X3.4 © 2020-2022 天外神坛