微信小程序快速入门【四】

这篇具有很好参考价值的文章主要介绍了微信小程序快速入门【四】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序快速入门【四】


微信小程序快速入门【四】,微信小程序笔记,微信小程序,notepad++,小程序


微信小程序快速入门【四】,微信小程序笔记,微信小程序,notepad++,小程序


👨‍🏫内容1:宿主环境


不同于Android应用和iOS应用直接运行于Andorid系统和iOS系统,微信小程序运行在微信提供的宿主环境中,由于微信已经替我们抹平了不同平台的差异,所以微信小程序能够实现跨平台,且能够实现很多普通网页无法实现的功能。我们将以之前建立的Test项目为例介绍一下微信小程序的运作过程。

我们来简单了解下小程序的运行环境。小程序的运行环境分成渲染层和逻辑层,其中 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。小程序的渲染层和逻辑层分别由2个线程管理:渲染层的界面使用了WebView 进行渲染;逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面,所以渲染层存在多个WebView线程,这两个线程的通信会经由微信客户端(下文中也会采用Native来代指微信客户端)做中转,逻辑层发送网络请求也经由Native转发,小程序的通信模型下图所示⬇️

微信小程序快速入门【四】,微信小程序笔记,微信小程序,notepad++,小程序

🌸🌸🌸🌷🌷🌷💐💐💐🌷🌷🌷🌸🌸🌸

👨‍⚖️内容2:小程序的启动过程


微信客户端在打开小程序之前,会把整个小程序的代码包下载到本地。紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径,我们新建的test项目的pages字段内容如下,可以知道test项目包含两个页面index和logs,由于没有通过entryPagePath指定启动页,所以会默认pages字段的第一个页面也就是index页面为启动页。

"pages":[
   "pages/index/index",
   "pages/logs/logs"
 ]

于是微信客户端就把首页的代码装载进来,通过小程序底层的一些机制,就可以渲染出这个首页。小程序启动之后,在 app.js 定义的App实例的onLaunch回调会被执行,整个小程序只有一个 App 实例,是全部页面共享的,每个小程序都需要在 app.js 中调用 App 方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等,其包含的监听函数如下:

// app.js
App({
 onLaunch (options) {
   // 生命周期回调——监听小程序初始化。
 },
 onShow (options) {
   // 生命周期回调——监听小程序启动或切前台。
 },
 onHide () {
   // 生命周期回调——监听小程序切后台。
 },
 onError (msg) {
 //错误监听函数。
   console.log(msg)
 },
 globalData: 'I am global data'
})
🌻🌻🌻🌼🌼🌼🌺🌺🌺🌼🌼🌼🌻🌻🌻

👨‍💻内容3:小程序页面渲染


其大致的过程如下,可以观察到 pages/logs/logs 下其实是包括了4种文件的,微信客户端会先根据logs.json配置生成一个界面,顶部的颜色和文字你都可以在这个json文件里边定义好。紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 log.js。

Page({
  data: {  //参与页面渲染的数据
    logs: []
  },
  onLoad() {
  //页面渲染后执行
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return {
          date: util.formatTime(new Date(log)),
          timeStamp: log
        }
      })
    })
  }
})

Page 是一个页面构造器,这个构造器就生成了一个页面。在生成页面的时候,小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构,于是就得到了你看到的小程序的样子。在渲染完界面之后,页面实例就会收到一个 onLoad 的回调,你可以在这个回调处理你的逻辑。
对于小程序中的每个页面,都需要在页面对应的 js 文件中进行注册,指定页面的初始数据、生命周期回调、事件处理函数等。

//index.js
Page({
 data: {
   text: "This is page data."
 },
 onLoad: function(options) {
   // 页面创建时执行
 },
 onShow: function() {
   // 页面出现在前台时执行
 },
 onReady: function() {
   // 页面首次渲染完毕时执行
 },
 onHide: function() {
   // 页面从前台变为后台时执行
 },
 onUnload: function() {
   // 页面销毁时执行
 },
 onPullDownRefresh: function() {
   // 触发下拉刷新时执行
 },
 onReachBottom: function() {
   // 页面触底时执行
 },
 onShareAppMessage: function () {
   // 页面被用户分享时执行
 },
 onPageScroll: function() {
   // 页面滚动时执行
 },
 onResize: function() {
   // 页面尺寸变化时执行
 },
 onTabItemTap(item) {
   // tab 点击时执行
   console.log(item.index)
   console.log(item.pagePath)
   console.log(item.text)
 }
})
🐾🐾🐾🐾🐾🐾🐾🐾🐾🐾🐾🐾

👨‍🚀内容4:Component


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

Component({
 data: {
   text: "This is page data."
 },
 methods: {
   onLoad: function(options) {
     // 页面创建时执行
   },
   onPullDownRefresh: function() {
     // 下拉刷新时执行
   },
   // 事件响应函数
   viewTap: function() {
     // ...
   }
 }
})
🔮🔮🔮🔮🔮🔮🔮🔮🔮🔮🔮🔮

🧑‍🌾内容5:Behavior


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

// my-behavior.js
module.exports = Behavior({
 data: {
   sharedText: 'This is a piece of data shared between pages.'
 },
 methods: {
   sharedMethod: function() {
     this.data.sharedText === 'This is a piece of data shared between pages.'
   }
 }
})
// page-a.js
var myBehavior = require('./my-behavior.js')
Page({
 behaviors: [myBehavior],
 onLoad: function() {
   this.data.sharedText === 'This is a piece of data shared between pages.'
 }
})
🔮🔮🔮🔮🔮🔮🔮🔮🔮🔮🔮🔮

🍉精品图书推荐


微信小程序快速入门【四】,微信小程序笔记,微信小程序,notepad++,小程序

🎃活动介绍:
👉清华社【秋日阅读企划】领券立享优惠
IT好书 5折叠加10元 无门槛优惠券:https://u.jd.com/Yqsd9wj
活动时间:9月4日-9月17日,先到先得,快快来抢

微信小程序快速入门【四】,微信小程序笔记,微信小程序,notepad++,小程序

🍟内容介绍:
本书共分为三部分,分别介绍了JavaScript、HTML和CSS的基础知识,JavaScript编程的基本概念和技巧,以及如何用JavaScript开发实用的应用程序。本书风格独特,采用三段式学练结合的知识架构,从JavaScript编程知识的讲解,到示范教学和引导学生参与动手实践,循序渐进地帮助读者保持学习动机和兴趣,掌握JavaScript编程技能。同时本书提供了137个JavaScript代码范例,可以直接通过浏览器进行交互,以及多个实作项目,包括煮蛋计时器、计算器、温度转换器、通讯录以及适用于时装店和冰淇淋连锁店的商业应用。本书还介绍了目前流行的jQuery、Vue和ES6等相关技术。如果你想轻松学会JavaScript,并且享受编程的乐趣,那么这本书就是你的不二之选!
文章来源地址https://www.toymoban.com/news/detail-725179.html

到了这里,关于微信小程序快速入门【四】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序快速入门03

    🏡浩泽学编程 :个人主页  🔥 推荐专栏 :《深入浅出SpringBoot》《java项目分享》               《RabbitMQ》《Spring》《SpringMVC》 🛸学无止境,不骄不躁,知行合一 本文讲诉:生命周期、WXS脚本。 生命周期(Life Cycle) 是指一个对象从创建 - 运行 -销的整个阶段,强调的

    2024年01月20日
    浏览(42)
  • 微信小程序快速入门02(含案例)

    🏡浩泽学编程 :个人主页  🔥 推荐专栏 :《深入浅出SpringBoot》《java项目分享》               《RabbitMQ》《Spring》《SpringMVC》 🛸学无止境,不骄不躁,知行合一 讲诉内容:页面导航、页面事件。 页面导航指的是 页面之间的相互跳转 。例如,浏览器中实现页面导

    2024年02月02日
    浏览(51)
  • 微信小程序前后端开发快速入门(完结篇)

    这篇是微信小程序前后端快速入门完结篇了,今天利用之前学习过的所有知识做一个新的项目「群登记助手v1.0」小程序。 整体技术架构:小程序原生前端+小程序云开发。 经历了前面教程的学习,大家有了一定的基础,所以本次分享重心主要是带着大家理清楚逻辑相关的云开

    2024年02月12日
    浏览(40)
  • 从0到1之微信小程序快速入门(03)

    目录 什么是生命周期函数 WXS脚本   ​编辑 与 JavaScript 不同 纯数据字段  组件生命周期 定义生命周期方法 代码示例 组件所在页面的生命周期 代码示例 插槽 什么是插槽 启用多插槽  ​编辑 定义多插槽  组件通信 组件间通信 监听事件 触发事件 获取组件实例 自定义的组

    2024年02月03日
    浏览(49)
  • 从0到1之微信小程序快速入门(02)

    目录 页面导航 - 声明式导航 1. 导航到 tabBar 页面 2. 导航到非 tabBar 页面 3. 后退导航 ​编辑 页面导航 - 编程式导航 页面导航 - 导航传参  页面事件 - 下拉刷新事件  监听下拉刷新事件 停止下拉刷新的效果 页面事件 - 上拉触底事件 监听页面的上拉触底事件  配置上拉触底距

    2024年02月07日
    浏览(47)
  • 从零开始快速搭建SpringBoot+Mybatis+小程序应用--微信小程序的入门和前后端的联调

    目录 项目介绍  vx小程序简介 VX开发工具介绍 列表页开发 list的编写   列表页前后端联调  信息编辑页开发 operation的编写 区域信息编辑页的联调 从0搭建后端的Springboot+mybatis框架 实现后端的业务功能 实现本地微信小程序的前端开发 前端与后端的调控 技术储备要求 1.基础的

    2024年02月10日
    浏览(65)
  • 【微信小程序入门到精通】— 轮播图你会了么?快速拿下 swiper 和 swiper-item

    对于目前形式,微信小程序是一个热门,那么我们该如何去学习并且掌握之后去做实际项目呢? 为此我特意开设此专栏,在我学习的同时也将其分享给大家! 本篇文章主要介绍我们微信小程序常用的视图容器类组件,对于 swiper 和 swiper-item 我们将逐一讲解。 如果在往下阅读

    2024年02月20日
    浏览(52)
  • 【微信小程序 | 实战开发】配置微信小程序APPID并快速接入

    你是否想要掌握人工智能的最新技术和应用?你是否想要成为未来社会的创新者和领导者?你是否想要和全球的优秀导师和同学一起学习和交流?如果你的答案是肯定的,那么欢迎来到床长人工智能教程网站,这里是你实现梦想的起点! 个人名片: 🐼 作者简介:一名大一在

    2024年01月24日
    浏览(63)
  • 微信小程序实现快速精确定位

    腾讯位置服务注册 前置需求:拥有一个 APPID(只要你注册了小程序就都会有) 腾讯为每个独立开发者都准备了 10000次/天 的接口调用量,足够我们开发使用了 前往腾讯位置服务官网:https://lbs.qq.com/ 注册一个账号 点击 控制台-应用管理-我的应用 点击创建新的应用,应用名称

    2024年02月05日
    浏览(41)
  • uniapp微信小程序消息订阅快速上手

    这边的模板id和详细内容后续前后端需要使用 需要是一个button触发 js: 其中thing2、phrase3是模板的字段名,根据自己模板去修改即可 HttpClient.java

    2024年02月12日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包