【微信小程序】初识小程序

发布时间:2019-06-27 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了【微信小程序】初识小程序脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

什么是微信小程序

按照微信之父张小龙的定义,小程序是一种不需要下载安装即可使用的应用。小程序实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。同时,体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无须安装卸载。

微信团队计划称之为微信应用(App)号,不过由于Apple App Store的审核规则不允许包含应用分发、应用推荐,因此微信团队将之称为“小程序”。

小程序的开发框架

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生App体验的服务。

小程序底层实现

【微信小程序】初识小程序

小程序的底层实现可以用一句话进行概括:统一接口,不同实现。小程序到微信采用统一的接口,开发者只需考虑框架的语法和规则,不用关心底层如何实现。

小程序 VS HTML 5

1.开发语言不同

【微信小程序】初识小程序

我们知道,小程序开发框架中脚本部分采用JavaScript语言进行开发。不过与HTML 5不同的是,框架提供自己的视图层描述语言WXML和WXSS,然后对这些文件进行编译,打包为类似于原生应用的形式进行分发。小程序的WXML标签语言和WXSS样式语言并非标准的html 5CSS 3。

2.组件封装不同
小程序独立出来很多原生App的组件。在HTML5需要模拟才能实现的功能,在小程序里可以直接调用组件,如预览图片、录音等功能。

3.执行效率不同

【微信小程序】初识小程序

HTML 5在加载时受限于网络环境,需要顺序加载HTML、CSS、JS,然后返回数据,最后渲染页面,并显示在浏览器中。用户经常需要等待很长时间,体验会受影响。

相比之下,小程序的两个线程——Appservice Thread和View Thread会同时进行、并行加载,甚至Appservice Thread会更早执行。当视图线程加载完通知Appservice时,Appservice会把准备好的数据用setData的方法返回给视图线程。

小程序的这种优化策略可以减少用户的等待时间,加快小程序的响应速度。

小程序结构概览

小程序由以下5个部分组成。

App:指小程序整个项目。

window:用于设置小程序的状态栏、导航条、标题、窗口背景色。

页面:一个App包含若干页面。微信规定,同时打开的页面最多不超过5个。

组件:框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。这些组件是构成页面的基本元素。

路由:不同页面之间的跳转称为路由。

小程序的生命周期

【微信小程序】初识小程序

生命周期分为3个阶段

第一阶段是App启动阶段,主要加载小程序window配置,注册程序和页面;
第二阶段是Page启动阶段,主要完成页面资加载、页面渲染、页面挂载;
第三阶段是销毁阶段,主要完成页面隐藏、卸载和销毁。

小程序的项目架构

【微信小程序】初识小程序

pages文件夹用于放置页面文件。

app.js是App的启动脚本,可以处理一些App启动过程中页面加载之前要处理的事情。

app.json是App的配置文件,配置项包括window、页面、tab菜单栏等。

app.wxss是App的公共样式,类似于css。

一个App可包含多个页面,页面的相对访问路径被配置在app.json里,每个页面可以包含[页面名].js、[页面名].wxml、[页面名].wxxs以及配置文件[页面名].json。其中,WXSS和json文件不是必要的。如果这两个文件存在,就会覆盖app.json和app.wxss的相同配置项。

一个框架程序主体部分由3个文件组成,必须放在项目的根目录:

【微信小程序】初识小程序

一个框架页面由4个文件组成:

【微信小程序】初识小程序

小程序配置

小程序有两种配置:
(1)全局配置文件,用于小程序的全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。
(2)页面配置文件,用于配置各个页面,将覆盖app.json的window配置项内容。

全局配置

全局配置列表:

【微信小程序】初识小程序

1.Pages

Pages设置程序中所有页面,第一个页面为初始页面。
Pages每一项的命名为路径+文件名,一般为pages/dictionary/file。不需要加文件后缀

2.window

window设置程序中默认页面的状态栏、导航条、标题、窗口背景色等

【微信小程序】初识小程序


注意,如果页面需要启动下拉刷新,务必将enablePullDownRefresh设置为true。可以用OnPullDownRefresh监听用户下拉刷新事件。

3.tarBar

tabBar可以配置多个tab页面,配置项包括指定tab栏的表现和tab切换时显示的对应页面。
tabBar的位置可以在顶部(top)或底部(bottom)

属性表:

【微信小程序】初识小程序

list属性表

【微信小程序】初识小程序

4.networkTimeout

设置各种网络请求的超时时间

【微信小程序】初识小程序

5.debug

可以在开发者工具中开启debug模式,在开发者工具的控制台面板调试信息以info的形式给出,信息有Page的注册、页面路由、数据更新、事件触发等,可以帮助开发者快速定位一些常见问题。

页面配置

每一个小程序页面都可以使用.json文件对本页面的窗口表现进行配置,页面的配置只能设置app.json中的window配置项的内容,页面中的配置项会覆盖app.json的window中相同的配置项。页面的.json只能设置window相关的配置项,以决定本页面的窗口表现,所以无须写window键。

小结

本次主要介绍了小程序框架的底层实现、配置和逻辑层,讲解了小程序的项目目录架构、配置文件、生命周期、全局设置、页面设置等知识点。


参考资料:《微信小程序开发详解》

脚本宝典总结

以上是脚本宝典为你收集整理的【微信小程序】初识小程序全部内容,希望文章能够帮你解决【微信小程序】初识小程序所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。