您当前的位置: 首页 > 知识百科 > 微信小程序第三方框架怎么开发?

微信小程序第三方框架怎么开发?

时间:2023-07-01 14:05 阅读数:92 人阅读 分类:知识百科

  小程序开发涉及到很多方面,微信小程序商店已经提供了不少教程,小编今天为大家补充一下微信小程序第三方框架的搭建教程,希望帮助到大家。

  值得再次声明的是:微信小程序的内容部分是hybrid模式,并非原生,所以*能并不好,绑定的tap事件也有明显的延迟。

  每一个由边框围起来的部分,都是一个最小粒度的原生view

  如上图所示,每一个由边框围起来的部分,都是一个最小粒度的原生view,可以看出,整个微信小程序的内容部分,就是一个原生view。

  一个完整的微信小程序是由一个App实例和多个Page实例构成,其中App实例表示该小程序应用,多个Page表示该小程序的多个页面。

  此外,微信并没有提供小程序自定义组件的方式,这就导致微信小程序在开发较复杂应用时,可能会比较艰难。

  微信小程序本身很简单,和一个模板语言的难度几乎相当,翻翻官方教程就可以开始动手搞。

  我也建议大家先动起来,然后再细致啃啃官方文档。由于微信官方文档仍在不断大幅更新中,所以务必查看最新官方文档。

  微信小程序的基础知识主要分为以下几个部分:

  ✦ 两种配置文件 && 两个核心函数

  ✦ WXML模板语法,页面渲染

  ✦ 页面间的跳转

  ✦ 交互事件

  ✦ 官方组件和官方API

  后文会就每个部分简单介绍介绍...

  两种配置文件 && 两个核心函数

  app.json 应用的全局配置文件

  app.json是针对微信小程序的全局配置,主要包含以下几个配置:

  ✦ pages:页面路径的数组,表示小程序要加载的所有页面,其中数组第一项代表小程序的初始页面。

  ✦ window:微信原生功能,定制化不强。可设置小程序的状态栏、导航条、标题以及窗口背景色。

  ✦ tabBar:微信原生功能,定制化不强。适用于常规的Tab应用,Tab栏可置于顶部或底部;tabBar是一个数组,仅支持2-5个tab。

  ✦ networkTimeout:配置小程序网络请求的超时时间。

  ✦ debug:微信小程序调试模式开关,开发模式下建议开启,正式发布别忘了关闭。

  app.json配置的主要区域

  page.json 页面的小程序全局配置文件

  除了上面提到的全局配置,每个页面还可以单独配置page.json,page.json会覆盖app.json中的配置,并只对当前页面生效。

  page.json只能对window配置,有两个比较有用的配置项分别是:

  ✦ enablePullDownRefresh:是否开启下拉刷新

  ✦ disableScroll:只能在page.json配置,禁止页面上下滚动,猜测可以实现完美滑屏滑动(未验证)

  App() 小程序注册入口,全局唯一

  App()用来注册一个小程序,全局只有一个,全局的数据也可以放到这里面来操作。

  // 注册微信小程序,全局只有一个

  let appConfig = {

  // 小程序生命周期的各个阶段

  onLaunch: function(){},

  onShow: function(){},

  onHide: function(){},

  onError: function(){},

  // 自定义函数或者属*

  ...

  };

  App(appConfig);

  // 在别的地方可以获取这个全局唯一的小程序实例

  const app = getApp();

  小程序并没有提供销毁的方式,所以只有当小程序进入后台一定时间、或者系统资源占用过高的时候,才会被真正的销毁。

  Page() 页面注册入口

  Page()用来注册一个页面,维护该页面的生命周期以及数据。

  // 注册微信小程序,全局只有一个

  let pageConfig = {

  data: {},

  // 页面生命周期的各个阶段

  onLoad: function(){},

  onShow: function(){},

  onReady: function(){},

  onHide: function(){},

  onUnload: function(){},

  onPullDownRefresh: function(){},

  onReachBottom: function(){},

  onShareAppMessage: function(){},

  // 自定义函数或者属*

  ...

  };

  Page(pageConfig);

  // 获取页面堆栈,表示历史访问过的页面,最后一个元素为当前页面

  const page = getCurrentPages();

  关于各个生命周期的细节以及流程,参考下图,可以细细品味:

  Paste_Image.png

  app.json 和 page.json 维护了应用和页面的配置属*。App() 和 Page() 维护了应用和页面的各个生命周期以及数据。

  微信小程序第三方框架的搭建对于小程序成功开发也是有很大帮助的,大家看完以上资料有没有学会具体的开发方式呢?还有不懂的地方欢迎留言与小编探讨。

  

  如何使用微信小程序ui框架?

  关于微信小程序开发框架,微信小程序框架搭建

  小程序是什么框架?微信小程序框架详解