【微信小程序】初识小程序
什么是微信小程序
按照微信之父张小龙的定义,小程序是一种不需要下载安装即可使用的应用。小程序实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。同时,体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无须安装卸载。
微信团队原计划称之为微信应用(App)号,不过由于Apple App Store的审核规则不允许包含应用分发、应用推荐,因此微信团队将之称为“小程序”。
小程序的开发框架
小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生App体验的服务。
小程序底层实现
小程序的底层实现可以用一句话进行概括:统一接口,不同实现。小程序到微信采用统一的接口,开发者只需考虑框架的语法和规则,不用关心底层如何实现。
小程序 VS HTML 5
1.开发语言不同
我们知道,小程序开发框架中脚本部分采用JavaScript语言进行开发。不过与HTML 5不同的是,框架提供自己的视图层描述语言WXML和WXSS,然后对这些文件进行编译,打包为类似于原生应用的形式进行分发。小程序的WXML标签语言和WXSS样式语言并非标准的HTML 5和CSS 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小程序,小程序无需下载安装,能达到"触手可及&q ...
- 微信背单词类小程序,小鸡单词源码下载,打卡微信小程序
微信背单词类小程序,小鸡单词源码下载,微信小程序开发学习案例,小程序开发教程.一个用来背单词每天打卡的微信小程序,还有词汇测试,包含多种词库后台由腾讯云wafer解决方案. 前段时间开始学做微信小程序 ...
- 你能用微信小程序打开小程序了【附开发方法】
6月21日晚间,微信小程序再次迎来升级:小程序可以打开小程序了,同一个公众号下关联的10个同主体小程序和3个非同主体小程序之间,可以调用接口直接相互跳转.微信客户端6.5.9及以上版本支持.另外门店小 ...
- 微信应用号(小程序)资源汇总(1010更新)
wechat-weapp-resource 微信应用号(小程序)资源汇总. 每天不定期整理和收集微信小程序相关资源,方便查阅和学习,欢迎大家提交新的资源,完善和补充. 目录 开源项目(1010更新) ...
- 企业微信小程序_小程序开发工具及真机调试_host配置及代理
文章目录 一.开发前准备 1. 开发文档 2. 工具安装 3. 安装插件 4. 调整编译模式 5. 选择企业 6. PC 调试前端 7. PC 调试后端 二.甄姬调试前端 2.1. 预览小程序 2.2 ...
- 微信小程序,小游戏sockect报错修复集合
微信小程序,小游戏的sockect的报错修复教程 适用范围:所有版本的小程序,小游戏 报错1:errMsg: "open fail: _code:8,_msg:TLS handshake f ...
- 微信小程序_小程序开发框架
微信小程序_小程序开发框架 微信小程序框架 微信小程序小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生APP体验的服务. 框架提供了自己的视图层描述语言WXML和WXS ...
- windows模拟微信小程序_Windows 版微信新版本内测!小程序可以直接添加到电脑桌面了...
微信小程序在手机端的体验已经非常流畅了.手机端小程序入口多,用户对应该在哪里找到小程序,怎样关闭小程序,怎样搜索小程序等问题都已经养成了自己的使用习惯.但换到电脑端来看,一切就全然不同. 「你收到了一 ...
最新文章
- java实现链接数据库_Java 链接数据库
- 材料成型计算机模拟第三版,材料成型计算机模拟考试复习资料.doc
- CTF-web-xff,referer 知识点;
- 关于【C++项目:无法解析的外部符号】
- iOS 设置系统音量和监听系统音量变化
- 【JS 逆向百例】网洛者反爬练习平台第二题:JJEncode 加密
- 对排除VLAN中Trunk配置故障一文的补充
- python模块化编程_Python模块化编程
- Ubuntu / Debian / Deepin等 Sublime Text 3 配置C++环境(一键编译运行,格式化代码)
- 使用虚拟按钮(Ghost Buttons)的25个网站
- 【每日算法Day 84】面试必考题:Trie(字典树/前缀树)的实现
- Ajax运用json数组传输数据
- 微信之微信支付(封装)--jsapi
- 2018第九届蓝桥杯国赛C组_java
- 我的世界Minecraft Java开服教程(Windows)开服器开服包下载开服网站服务器开服核心开服端开服软件mac版Java启动器资源包
- 一款强大的网站在线客服聊天系统:whisper搭建教程
- mysql 只读账号_MySQL, 创建一个只读用户和一个所有权限用户
- 三阶魔方与四阶魔方总结
- 微信小程序checkbox调整大小
- 百度区块链 XuperChain开发教程(第二部分)
热门文章
- go read text file into string array
- WCF部署到IIS不使用svc文件
- 从java读取Excel继续说大道至简 .
- JavaScript中实现类似StringBuilder的功能
- The content of elements must consist of well-formed character data or markup
- 关于js的一些常用小知识点(持续更新)
- beeline执行sql文件_MyBatis的SQL执行流程不清楚?看完这一篇就够了
- mapperscan注解_SpringBoot 遗忘后的简单快速回忆之环境搭建与常见注解
- 复杂电路简化经典例题_一天搞定考试系列之电路原理(3)
- win7 mysql添加到服务_MySQL服务添加到Windows系统服务中