【微信小程序】微信开发文档摘要_咨询发布信息小程序摘要怎么写-程序员宅基地

此篇文章用于微信小程序的开发文档摘要,主要记录概念性的,或者说理解性的东西,对于那些硬性代码,反而不做太多汇总。

一、微信小程序简介

小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

二、微信 Web 资源离线存储是面向 Web 开发者提供的基于微信内的 Web 加速方案。

通过使用微信离线存储,Web 开发者可借助微信提供的资源存储能力,直接从微信本地加载 Web 资源而不需要再从服务端拉取,从而减少网页加载时间,为微信用户提供更优质的网页浏览体验。每个公众号下所有 Web App 累计最多可缓存 5M 的资源。

三、小程序与普通网页开发的区别

  1. 小程序的主要开发语言是 JavaScript ,小程序的开发同普通的网页开发相比有很大的相似性。
  2. 网页开发渲染线程和脚本线程是互斥的,这也是为什么长时间的脚本运行可能会导致页面失去响应,而在小程序中,二者是分开的,分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API,进行 DOM 选中和操作。小程序的逻辑层和渲染层是分开的,逻辑层运行在 JSCore 中,并没有一个完整浏览器对象,因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库,例如 jQuery、 Zepto 等,在小程序中是无法运行的。

四、小程序的JSON配置

JSON 是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色。
项目的根目录有一个 app.json 和 project.config.json
每个页面目录下都有一个相应的 page.json

  1. app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
  2. project.config.json,你在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
  3. page.json,让开发者可以独立定义每个页面的一些属性,例如顶部颜色、是否允许下拉刷新等等。

五、MVVM的开发方式

MVVM 的开发模式(例如 React, Vue),提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM,JS 只需要管理状态即可,然后再通过一种模板语法来描述状态和界面结构的关系即可。

小程序的框架也是用到了这个思路。

六、宿主环境

我们称微信客户端给小程序所提供的环境为宿主环境。小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能。

七、渲染层和逻辑层

小程序的运行环境分成渲染层和逻辑层,其中 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。
渲染层就是页面框架和样式,逻辑层就是动态交互js。

小程序的渲染层和逻辑层分别由2个线程管理:渲染层的界面使用了WebView 进行渲染;逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面,所以渲染层存在多个 WebView线程,这两个线程的通信会经由微信客户端(下文中也会采用Native来代指微信客户端)做中转,逻辑层发送网络请求也经由Native转发,小程序的通信模型下图所示。
在这里插入图片描述

八、微信客户端在打开小程序之前,会把整个小程序的代码包下载到本地。

九、小程序启动之后,在 app.js 定义的 App 实例的 onLaunch 回调会被执行

十、页面配置加载顺序

微信客户端会先根据 .json 配置生成一个界面,紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 .js,可以看到.js文件中就是一个page构造器,Page 页面构造器,这个构造器就生成了一个页面。在生成页面的时候,小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构,在渲染完界面之后,页面实例就会收到一个 onLoad 的回调。

十一、sitemap

微信现已开放小程序内搜索,开发者可以通过 sitemap.json 配置,或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索词条触发该索引时,小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时,会携带特定的 user-agent:mpcrawler 及场景值:1129。需要注意的是,若小程序爬虫发现的页面数据和真实用户的呈现不一致,那么该页面将不会进入索引中。

十二、逻辑层 App Service

小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。

开发者写的所有代码最终将会打包成一份 JavaScript 文件,并在小程序启动的时候运行,直到小程序销毁。这一行为类似 ServiceWorker,所以逻辑层也称之为 App Service。

在 JavaScript 的基础上,我们增加了一些功能,以方便小程序的开发:

  1. 增加 App 和 Page 方法,进行程序注册和页面注册。
  2. 增加 getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。
  3. 提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。
  4. 提供模块化能力,每个页面有独立的作用域。

注意:小程序框架的逻辑层并非运行在浏览器中,因此 JavaScript 在 web 中一些能力都无法使用,如 window,document 等。

十三、APP.js中的生命周期函数(小程序的生命周期回调)

在这里插入图片描述
其中错误监听,页面不存在监听,系统主题变化监听函数均在APP函数中。

App() 必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果。

整个小程序只有一个 App 实例,是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例,获取App上的数据或调用开发者注册在 App 上的函数。

十四、page构造器

对于小程序中的每个页面,都需要在页面对应的 js 文件中进行注册,指定页面的初始数据、生命周期回调、事件处理函数等。简单的页面可以使用 Page() 进行构造。
在这里插入图片描述
onLoad(Object query) 页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数。
onShow() 页面显示/切入前台时触发。
onReady() 页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
onHide() 页面隐藏/切入后台时触发。
onUnload() 页面卸载时触发。

页面page的生命周期:
在这里插入图片描述

十五、不要在 App.onLaunch 的时候调用 getCurrentPages(),此时 page 还没有生成。

十六、Component() 构造器

Page 构造器适用于简单的页面。但对于复杂的页面, Page 构造器可能并不好用。
此时,可以使用 Component 构造器来构造页面。 Component 构造器的主要区别是:方法需要放在 methods: { } 里面。

十七、页面可以引用 behaviors 。 behaviors 可以用来让多个页面有相同的数据字段和方法。

十八、页面路由

在小程序中所有页面的路由全部由框架进行管理。框架以页面栈的形式维护了当前的所有页面。开发者可以使用 getCurrentPages() 函数获取当前页面栈。
在这里插入图片描述
在这里插入图片描述

十九、模块化

可以使用model.exports导出公共模板函数或数据。
在这里插入图片描述

二十、小程序api

小程序开发框架提供丰富的微信原生 API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。通常分为几种类型:

  1. 事件监听 API,以 on 开头的 API 用来监听某个事件是否触发,这类 API 接受一个回调函数作为参数,当事件触发时会调用这个回调函数,并将相关数据以参数形式传入。
  2. 同步 API,以 Sync 结尾的 API 都是同步 API。同步 API 的执行结果可以通过函数返回值直接获取,如果执行出错会抛出异常。
  3. 异步 API,大多数 API 都是异步 API,这类 API 接口通常都接受一个 Object 类型的参数,并且具有回调函数
    在这里插入图片描述
    在这里插入图片描述

二十一、视图层 View

框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。

将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。

  1. WXML(WeiXin Markup language) 用于描述页面的结构。

  2. WXS(WeiXin Script) 是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。

  3. WXSS(WeiXin Style Sheet) 用于描述页面的样式。

  4. 组件(Component)是视图的基本组成单元。

二十二、WXS

WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。

注意

  1. WXS 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。
  2. WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。
  3. WXS 的运行环境和其他 JavaScript 代码是隔离的,WXS 中不能调用其他 JavaScript 文件中定义的函数,也不能调用小程序提供的API。
  4. WXS 函数不能作为组件的事件回调。

由于运行环境的差异,在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
在这里插入图片描述
综上:wxs就是类似于jsp或者说是PHP这种脚本语言,是独立的,与js是两种概念。他是基于一种封装思想。最后要涉及到导出接口问题。

wxs与js中的函数是独立的,如果想用wxs操作js中的数据,只能通过微信小程序的绑定{ { }},如{ {m1.getMax(array)}},这里的m1是module名字,调用的是m1里面的函数,而array是应用微信小程序的绑定功能,绑定的是js文件中的array数组,然后传入m1中。
在这里插入图片描述

二十三、事件详解

事件分类:

事件分为冒泡事件和非冒泡事件:

  1. 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
  2. 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。

bind绑定事件会使事件向上冒泡。
catch绑定事件不会使事件向上冒泡。
mut-bind绑定事件是一个互斥事件,在向上冒泡的过程中,如果遇到其他的mut-bind则其他的mut-bind函数不会被触发,,但 bind 绑定函数和 catch 绑定函数依旧会被触发。

target(源节点) 和 currentTarget(当前节点) 区分,点击 inner view 时,handleTap1收到的事件对象 target 和 currentTarget 都是 inner,而 handleTap2 收到的事件对象 target 就是 inner,currentTarget 就是 middle。

二十四、data-* 在组件节点中可以附加一些自定义数据。这样,在事件中可以获取这些自定义的节点数据,用于事件的逻辑处理。

二十五、当一个动作需要及时的响应,但是常规的由视图层到逻辑层在回到视图层这种逻辑耗时很长,可以采用WXS响应事件,让事件处理只在视图层处理,从而加快反应时间。

二十六、双向绑定

普通单向绑定,data数据改变,页面值改变,但是页面值改变,data数据不会变。
在这里插入图片描述
双向绑定,data数据与页面值同步,但双向绑定目前只支持单一字段绑定,而且也不能data路径
在这里插入图片描述

二十七、组件

在这里插入图片描述
注意:所有组件与属性都是小写

二十八、屏幕旋转

  1. 手机端使小程序中的页面支持屏幕旋转的方法是:在 app.json 的 window 段中设置 “pageOrientation”: “auto” ,或在页面 json 文件中配置 “pageOrientation”: “auto” 。
  2. 使小程序支持 iPad 屏幕旋转的方法是:在 app.json 中添加 “resizable”: true 。

二十九、媒体查询(相当于有条件的样式)

在这里插入图片描述

三十、页面尺寸发生改变的事件,可以使用页面的 onResize 来监听。回调函数中将返回显示区域的尺寸信息。

在这里插入图片描述

三十一、基于安全考虑,小程序中不支持动态执行 JS 代码,即:

  1. 不支持使用 eval 执行 JS 代码
  2. 不支持使用 new Function 创建函数

三十二、小程序前 / 后台状态切换

小程序启动后,界面被展示给用户,此时小程序处于前台状态。

当用户点击右上角胶囊按钮关闭小程序,或者按了设备 Home 键离开微信时,小程序并没有完全终止运行,而是进入了后台状态,小程序还可以运行一小段时间。

当用户再次进入微信或再次打开小程序,小程序又会从后台进入前台。但如果用户很久没有再进入小程序,或者系统资源紧张,小程序可能被销毁,即完全终止运行。

三十三、小程序冷 / 热启动

  1. 冷启动:如果用户首次打开,或小程序销毁后被用户再次打开,此时小程序需要重新加载启动,即冷启动。
  2. 热启动:如果用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时小程序并未被销毁,只是从后台状态进入前台状态,这个过程就是热启动。

三十四、小程序的更新机制

  1. 未启动时更新
    开发者在管理后台发布新版本的小程序之后,如果某个用户本地有小程序的历史版本,此时打开的可能还是旧版本。微信客户端会有若干个时机去检查本地缓存的小程序有没有更新版本,如果有则会静默更新到新版本。总的来说,开发者在后台发布新版本之后,无法立刻影响到所有现网用户,但最差情况下,也在发布之后 24 小时之内下发新版本信息到用户。用户下次打开时会先更新最新版本再打开。

  2. 启动时更新
    小程序每次冷启动时,都会检查是否有更新版本,如果发现有新版本,将会异步下载新版本的代码包,并同时用客户端本地的包进行启动,即新版本的小程序需要等下一次冷启动才会应用上。

如果需要马上应用最新版本,可以使用 wx.getUpdateManager API 进行处理。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_42127861/article/details/105875250

智能推荐

PyCharm免费版下载和安装教程以及相关配置(导入第三方库的软件包等配置)Windows版下载-程序员宅基地

文章浏览阅读1.2w次,点赞13次,收藏89次。文章目录PyCharm下载PyCharm安装教程PyCharm相关配置各种插件下载创建新Python项目查看版本的使用截止时间导入其他软件包(例:request)第一种方法第二种方法出现错误PyCharm下载PyCharm 是一款功能强大的 Python 编辑器,具有跨平台性。PyCharm的下载地址:官网地址点开后的页面如下:找到合适自己的版本,点击Windows(exe).图中左边的PyCharm Professional Edition是专业版,是需要付费的。右边的PyCharm _pycharm免费

Android_handler_网络请求_img框架-程序员宅基地

文章浏览阅读111次。Android_handler_网络请求_img框架 1,Android网络请求1.1显示互联网的图片①获取输入的路径②使用API URL(统一资源定位符)URL url = new URL(path);③通过路径打开一个http的连接,打开通道HttpURLConnection conn = (强转)url.openC..._android 网络请求 handler

函授计算机应用基础答案,计算机应用基础函授本科考试题库-程序员宅基地

文章浏览阅读3.5k次。本资料备战9月,请勿修改版权信息计算机应用基础一、单选题1、ENIAC计算机所采用的电子器件是______答案: AA:电子管 B:晶体管 C:中小型集成电路 D:大规模及超大规模集成电路2、如果某台计算机运算速度为数千亿次/秒,主要用于大型科学与工程计算,按其规模应该属于______答案: BA:大型计算机 B:巨型计算机 C:微型计算机 D:专用计算机 3、计算机具有高效的运...

谈谈技术面试【转载】-程序员宅基地

文章浏览阅读37次。面试就是在短时间内对应聘者的经验、能力、潜力进行评估。我一般比较关注这些方面:(1)品格;(2)经验;(3)解决问题的能力;(4)技术特长;(5)潜力。面试时间一般为1小时,笔试+机试+面谈。 下面结合偶常用的一份C++/C#程序员面试题谈谈体会。 面试题一般分为3~4部分。第一部分是自我评估,第二部分是上机编程,第三部分是领域相关的东东,第四部分是考查能力与潜力的...

Android中WebView加载sdcard中的html时提示:ERR_FILE_NOT_FOUND和ERR_ACCESS_DENIED_h5页面 sd卡 file加载 err_access_denied-程序员宅基地

文章浏览阅读4.1k次。场景Android中WebView加载sdcard中的html显示:Android中WebView加载sdcard中的html显示_BADAO_LIUMANG_QIZHI的博客-程序员宅基地在实现上面的需求时遇到的两个问题。一个是ERR_FILE_NOT_FOUND一个是ERR_ACCESS_DENIED注:博客:BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_程序员宅基地-C#,SpringBoot,架构之路领域博主关注公众号霸道的程.._h5页面 sd卡 file加载 err_access_denied

nacos区分权限_nacos 用户权限-程序员宅基地

文章浏览阅读7.3k次。nacos设置权限,创建nacos用户_nacos 用户权限

随便推点

Vue-router_"export function getrootrouter() { return cookies.-程序员宅基地

文章浏览阅读96次。Vue-router后端路由:前端路由:借助hash来完成前端路由。http请求中不包括hash值。完成单页面应用安装vue-router包可以使用script标签加载vue-router.js<script src="/path/to/vue.js"></script><script src="/path/to/vue-router.js"&..._"export function getrootrouter() { return cookies.get(\"rootrouter\") || '' }"

用户认证之BASIC认证的原理及实现方法_basic认证原理-程序员宅基地

文章浏览阅读788次。一. BASIC认证概述在HTTP协议进行通信的过程中,HTTP协议定义了基本认证过程以允许HTTP服务器对WEB浏览器进行用户身份证的方法,当一个客户端向HTTP服务 器进行数据请求时,如果客户端未被认证,则HTTP服务器将通过基本认证过程对客户端的用户名及密码进行验证,以决定用户是否合法。客户端在接收到HTTP服务器的身份认证要求后,会提示用户输入用户名及密码,然后将用户名及密码以BAS..._basic认证原理

AMR在IP域中的编码(rfc3267,4867)_rfc4867-程序员宅基地

文章浏览阅读553次。缩写解释SID Silence Descriptor (Comfort Noise Frame) 1 AMR编码介绍AMR编码是一种自适应多速率编码,根据传输信道的实际情况,调整编码模式、速率和纠错码位数来保证语音质量,在数据压缩和容错上面取得平衡。一般语音质量越高抗干扰能力越弱。在GSM网络,基站、基站控制器可根据网络质量和信号质量情况动态调整语音编码模式以提高不同网络状况下的语_rfc4867

C#将数据库图片显示在pictureBox_c# picturebox显示数据库中图片-程序员宅基地

文章浏览阅读4.2k次,点赞2次,收藏10次。这里的图片存在数据表的形式为十六进制的数据,参数ds为从数据库中选出的DataSet,字段FImage为图片字段。private void getPicture(DataSet ds) { //int Pictured = dataGridView1.FocusedRowHandle; int rid=dataGridView1._c# picturebox显示数据库中图片

ESP8266呼吸灯亮度调节并且实时显示PWM数值_esp8266wangye滑块调光-程序员宅基地

文章浏览阅读1.5k次,点赞4次,收藏16次。以下代码实现了ESP8266的网页控制板载LED灯的亮度调节,并且将GPIO_2的PWM数值显示在网页上。网页显示代码来自:太极创客http://www.taichi-maker.com/homepage/esp8266-nodemcu-iot/iot-c/esp8266-nodemcu-web-server/pin-state/PWM控制代码来自:Arduino 编程 ESP8266 12F NodeMCU 实现 PWM 控制呼吸灯(作者:我不是阿言)https://blog.csdn.net_esp8266wangye滑块调光

转载:向量与矩阵的范数_向量与矩阵的范数csdn-程序员宅基地

文章浏览阅读233次。 阅读文献时,经常看到各种范数,机器学习中的稀疏模型等,也有各种范数,其名称往往容易混淆,例如:L1范数也常称为“1-范数”,但又和真正的1-..._向量与矩阵的范数csdn