微信小程序总结

555 阅读4分钟

开发了一段时间小程序(学生答题、引流活动),下面结合自己经验和阅读的blog进行总结如下:

微信小程序原理

  • 微信小程序采用 JavaScript、WXML、WXSS 三种技术进行开发,本质就是一个单页面应用,所有的页面渲染和事件处理,都在一个页面内进行,但又可以通过微信客户端调用原生的各种接口
  • 微信的架构,是数据驱动的架构模式,它的 UI 和数据是分离的,所有的页面更新,都需要通过对数据的更改来实现
  • 小程序分为两个部分 webview和 appService 。其中 webview 主要用来展现UI ,appService 有来处理业务逻辑、数据及接口调用。它们在两个进程中运行,通过系统层 JSBridge 实现通信,实现 UI 的渲染、事件的处理

微信小程序配置

全局配置app.json:

  • pages字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
  • window字段 —— 小程序所有页面的顶部背景颜色、文字颜色、达到底部距离、导航标题和样式等定义在这里的
  • tabBar字段 —— 小程序全局顶部或底部tab
  • networkTimeout —— 请求时长,上传文件大小
  • sitemapLocation ——小程序根目录下的sitemap.json文件用来配置小程序及其页面是否允许被微信索引。

小程序同步API和异步API使用时注意事项?

wx.setStorageSync是以Sync结尾的API为同步API,使用时使用try-catch来查看异常,如果判定API为异步,可以在其回调方法success、fail、complete中进行下一步操作。

wx.request

微信小程序与H5的区别

  • 运行环境的不同

传统的HTML5的运行环境是浏览器,包括webview,而微信小程序的运行环境并非完整的浏览器,是微信开发团队基于浏览器内核完全重构的一个内置解析器,针对小程序专门做了优化,配合自己定义的开发语言标准,提升了小程序的性能

  • 开发成本的不同

只在微信中运行,所以不用再去顾虑浏览器兼容性,不用担心生产环境中出现不可预料的奇妙BUG

  • 获取系统级权限的不同

微信小程序与vue的区别

参考:juejin.cn/post/685041…

微信小程序与原生的区别

小程序:

  • 小程序拥有公众号的低开发成本、低获客成本低以及无需下载等优势,
  • 在服务请求延时与用户使用体验是都得到了较大幅度的提升,使得其能够承载跟复杂的服务功能以及使用户获得更好的用户体验。

原生: 需要下载app,开发成本高,限制少,开发功能更强大

小程序Commonjs模板和ES6模板问题

由于小程序内部是采用CommonJs进行模块的管理与处理

CommonJs 的特点:
一个单独的文件就是一个模块。加载模块使用 require 方法,该方法读取一个文件并执行,最后返回文件内部的 exports 对象。

CommonJs 的加载是同步的,只有加载完才执行后面的操作

module.exports 属性表示当前模块对外输出的接口,其他文件加载该模块时,实际就是读取 module.exports 变量。

exports 是 module.exports 的一个引用,因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露模块接口,除非你已经清晰知道这两者的关系。 小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中,或者使用小程序支持的 npm 功能。

微信小程序的优劣势

优势:

  1、无需下载,通过搜索和扫一扫就可以打开。

  2、良好的用户体验:打开速度快。

  3、开发成本要比App要低。

  4、安卓上可以添加到桌面,与原生App差不多。

  5、为用户提供良好的安全保障。小程序的发布,微信拥有一套严格的审查流程,不能通过审查的小程序是无法发布到线上的。

缺点:

 1、限制较多。页面大小不能超过1M。不能打开超过5个层级的页面。

 2、样式单一。小程序的部分组件已经是成型的了,样式不可以修改。例如:幻灯片、导航。

 3、推广面窄,不能分享朋友圈,只能通过分享给朋友,附近小程序推广。其中附近小程序也受到微信的限制。

 4、依托于微信,无法开发后台管理功能。

参考链接:

juejin.cn/post/684490…