【微信小程序】如何搭积木式开发?
文章目录
- 一,宿主环境
- 二,通信模型
- 三,运行机制
- 四,组件组件
- 五,API
上文我们对项目的代码构成进行了讲解,了解了各文件的作用以及语言类型与web网页开发语言的区别。
那么今天就来和大家探讨一下微信小程序的搭积木式开发,其实就是我们不需要再去写一些功能的底层代码,只需要用几行代码去调用微信环境的功能,就能来实现我们复杂的应用,提高我们开发者的效率。
一,宿主环境
在移动端,我们知道主要可以分为Android环境以及iOS环境,它们的功能是不可以分享的,就比如Android的微信APP在iOS端是无法执行的。
这些像APP的东西都是依靠环境提供的某些功能执行的。
而我们的小程序是依靠手机微信这个环境
小程序借助手机微信这个宿主环境,实现一些普通网页无法实现的功能,就如我们熟知的微信支付、地理定位等等,当然如果你的手机没有微信,小程序无法依靠该环境,也是无法执行的。
手机微信给小程序提供了四个方向的功能
- 通信模型
- 运行机制
- 组件
- API
二,通信模型
首先我们需要了解渲染层和逻辑层这两个概念:
- WXSS和WXML工作在渲染层,交由
webview
渲染,渲染层中有多个webview
线程; - JS工作在逻辑层,由
JScore
线程运行JS脚本。这两者是分离的,也就是我们上一章提到的追求的渲染与逻辑分开的MVVM模式。
微信小程序有两种通信,如下:
- 一是渲染层与逻辑层之间的通信,两者之间有微信客户端(
Native
)进行转发 - 二是逻辑层与第三方服务器之间的通信,有时我们需要在小程序中拉取服务器的数据,或对第三方服务器进行数据响应,这时候我们也是通过微信客户端(
Native
)转发。
如HTTP request
和Web socket
分别表示数据请求和数据响应。
三,运行机制
完整的执行一个小程序,微信客户端的运行机制是什么?了解这些可以让我们更好的开发小程序。
首先微信客户端再打开小程序之前,会把整个小程序的代码包下载到本地。
紧接着呢就会通过app.json
文件去拿到里面的pages
字段,从而获取到你当前小程序的所有页面路径。
还记得pages
里有什么吗?
{ "pages":["pages/index/index","pages/logs/logs"]
}
在这个配置,小程序会将首行的页面路径也就是index对应页面作为首页,作为我们打开小程序的第一个页面。
小程序启动后,微信客户端会去找app.js
文件,也就是项目的入口文件,实例化出一个小程序,App实例的onlaunch
事件触发,执行回调函数。
App({onLaunch: function(){//代码 }})
那既然要显示页面,微信客户端就会把首页的代码先转载进来,然后去找页面下的.json
配置文件,再然后转载该页面的WXML和WXSS文件来对页面进行渲染。
最后客户端才去转载.js
入口文件,通过Pages
函数实例化出一个页面,Pages
函数大体包含data段和onload事件回调函数,如下所示:
Pages({data: { //参与页面渲染的数据 logs: []}, onLoad: function(){// onload事件,页面渲染后执行函数}
})
data里存放参与该页面渲染的数据,这些数据需要在渲染层进行数据绑定等工作。
onLoad事件是在页面加载完成也就是渲染结束后触发,紧接着调用里面的回调函数。
四,组件组件
我们可以理解为,微信给我们开发者提供一些便捷的方式去做出复杂的功能,就像是WXML中的<map></map>
标签,只需要这么行代码,我们就可以在页面中显示地图,甚至在我们增加一些属性值的设置,可以显现某个具体位置的地图。如此,我们就可以像搭积木一样运用微信提供的组件,做出一些复杂的页面,实现高级的功能,是不是很人性化!
下一章我们将会开始视图组件的学习并练习!
五,API
提供一些独特功能,如获取用户信息、微信支付等等,这些我们开发者可以通过API直接使用。
比如我们要调用微信扫一扫功能,我们可以直接:
wx.scanCode({success: (res) => {console.log(res)}
})
和组件类似,只是API相对可以提供更加复杂的功能,因为API其实是相当于调用微信环境内置的函数实现功能,微信小程序将一些能完成某些功能的源码封装进去,作为API供开发者使用。
今天的小程序到这就结束啦,如果觉得对你有帮助的话,可以关注一下牛牛后续的更新,感谢您的支持!
债见~
【微信小程序】如何搭积木式开发?相关推荐
- 基于mpvue的微信小程序全栈保姆式教程一
预览最终效果https://github.com/FFGF/XCDHBook/blob/master/static/XCDHBook.gif顺便推荐一个视频转gif的好工具https://ezgif. ...
- php 类似微信下拉菜单,微信小程序模拟下拉菜单开发实例
本文主要和大家分享微信小程序模拟下拉菜单开发实例,希望能帮助到大家. 一.知识点 1.实现动态显示和隐藏某个控件 列表1data:{ open:false }, showitem:function() ...
- 小程序开发语言python_微信小程序是用什么语言开发的呢
原标题:微信小程序是用什么语言开发的呢 说到微信小程序可能大部分只是一知半解,您是否清楚小程序是用什么来开发的?如果您不太清楚,那么多美源小程序小编来告诉您小程序开的具体. 微信小程序是什么语言开发的 ...
- 微信小程序服务器端用什么语言开发?
点击阅读原文 微信小程序服务器端用什么语言开发? 首先,比如微信二次开发,可以用java或者php 来做服务器端语言来进行二次开发,那小程序呢?文档写着.js负责业务逻辑,难道服务器端就是纯JS实现 ...
- 微信小程序使用真机或开发工具进行http请求开发测试亲测有效
微信小程序使用真机或开发工具进行http请求开发测试 1使用微信开发这工具进行http请求的配置 2:真机进行http请求 微信开发这平台要求上线微信小程序配置的合法域以及网络请求名必须是https, ...
- 微信小程序图片无法存入云开发数据库,求解决
微信小程序图片无法存入云开发数据库,求解决 上传图片的js代码片段 上传图片的js代码片段 上传图片的js代码片段,觉得自己代码的没错,也能打印出来上传的图片地址,但是发现并没有存进数据库,求大神指点 ...
- 微信小程序:全新独家云开发微群人脉
今天给大家带来一款云开发版本的微群人脉小程序源码 该版本属于采集版本(群二维码自动采集) 该版本属于云开发版本(免服务器和域名) 这是一款不怕封小程序版本 PS:支持用户自主发布那一款还是有点危险因为 ...
- 毕业季基于spring的基于安卓APP的基于ssm框架的基于微信小程序的管理系统设计与开发(开题+源码+讲解+论文)
毕业设计考察的是同学的专业知识的运用能力,除了对技能的考核,还看重你的创新思维,这里面设计到内容繁琐复杂. 对于还未毕业没有过项目开发经验的同学是有些难度的,一个程序的开发小到1两个月,大至几个月甚至 ...
- 微信小程序、APP分销商城开发:分销功能模块设计
前面我们讲了微信小程序商城基础营销功能:微信小程序商城.APP商城开发营销活动功能策划(拼团.砍价.秒杀.直播.优惠券等) 今天讲的分销系统更是强大的营销功能,它应该如何设计呢?我们的系统经过一点一点 ...
最新文章
- 从零开始学ASP.NET(基础篇)
- win32汇编使用win32 api实现字符串拷贝
- ASP.NET中过滤HTML字符串的两个方法
- MySQL验证索引提升查询效率
- 变速后没有声音_问答 | 现代朗动at,启动后怠速不稳,热车后正常,是什么问题?...
- 被逮到一个初始状态考虑不周的Bug
- vb利用计算机 鸡兔同笼,VB程序题:利用计算机解决古代数学瓿“鸡兔同笼问题”。即已知在同一笼子里有总数为m只鸡和兔,鸡和兔的总脚数为n只,求鸡和兔各有多少只? VB源码 龚沛曾...
- kendalltau肯德尔和谐系数
- linux所有目录和子目录和文件777,关于linux:Chmod 777到一个文件夹和所有内容
- @synthesize 和 @dynamic 分别表示什么
- [No0000102]JavaScript-基础课程2
- java 求和、差、乘、商
- 【Cython】Cython 基本用法
- 小程序的横向二级顶部导航条,可以切换、拖动、二级定位在一级的下面,高度怎么办
- 用机器学习自制二手房估价模型(附完整过程)
- vivado报错 syntax error、dout is an unknown type
- 打麻将技巧测试软件apk,学会这4招打麻将技巧,以后打麻将想不赢钱都难
- 每日一道 LeetCode (36):相交链表
- CPRI和10GBASE-KR的关系
- [日常] 1. 信息安全