微信小程序开发指南：从基础到进阶

news/2024/11/25 12:58:39/

​🌈个人主页：前端青山
🔥系列专栏：小程序>微信小程序篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来小程序>微信小程序篇专栏内容:小程序>微信小程序开发指南：从基础到进阶

前言

随着移动互联网的快速发展，小程序>微信小程序因其便捷性和高效性受到了广大开发者的青睐。本文旨在为初学者和有一定经验的开发者提供一份全面的小程序开发指南，涵盖从小程序的基本概念、文件结构、数据请求封装、参数传递、生命周期函数、自定义组件、页面跳转、性能优化等多个方面，帮助读者快速掌握小程序>微信小程序的核心技术和最佳实践。

目录

前言

1、简单描述下小程序>微信小程序的相关文件类型

2、数据请求怎么封装

3、参数传递

4、生命周期函数

5、小程序的双向绑定和vue哪里不一样

6、如何自定义组件（弹窗）

7、小程序内的页面跳转

8、小程序和Vue写法的区别

9、小程序的双向绑定和vue哪里不一样

10、小程序的优点和缺点

11、简述小程序原理

12、提高小程序的应用速度的方法

13、简述小程序原理

14、setData的回调函数

15、如何实现下拉刷新

16、bindtap和catchtap的区别是什么

17、小程序>微信小程序与H5的区别？

18、小程序关联微信公众号如何确定用户的唯一性？

19、webview中的页面怎么跳回小程序中

20、简述小程序>微信小程序原理

21、小程序的双向绑定和vue哪里不一样

22、小程序的wxss和css有哪些不一样的地方

23 小程序页面间有哪些传递数据的方法

24 小程序的生命周期函数

25、哪些方法可以用来提高小程序>微信小程序的应用速度

26、 小程序>微信小程序的优劣势

27 怎么解决小程序的异步请求问题

28如何实现下拉刷新

29 bindtap和catchtap的区别是什么

30 简述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别

结尾总结

1、简单描述下小程序>微信小程序的相关文件类型

  • WXML——模板文件

  • JSON——配置/设置文件，如标题,tabbar,页面注册

  • WXSS——样式文件，样式可直接用import导入

  • JS——脚本逻辑文件，逻辑处理，网络请求

  • app.json——配置文件入口，整个小程序的全局配置，网络超时时间、底部tab、页面路径，window字段是小程序所有页面的顶部背景颜色、文字颜色

  • app.js——可以没有内容，可以在里边监听生命周期函数、声明全局变量

  • app.wxss——全局配置样式文件

2、数据请求怎么封装

  • 将所有的接口放在统一的js文件中并导出（或者将请求地址、头、方法在一个js文件里统一定义为一个常量并导出）

  • 在app.js创建封装请求数据的方法

  • 在子页面中调用封装的方法请求数据

3、参数传递

  • 给HTML元素中添加data-*属性来传递需要的值，之后通过e.currentTarget.dataset或onload的param参数获取。注意不能有大写字母，不可以存放对象

  • 跳转页面时通过navigator传递需要的参数值

  • 设置id的方法标识，通过e.currentTarget.id获取设置的id值，然后通过设置全局变量的方法来传递数值

4、生命周期函数

  • onLoad——页面加载，调一次

  • onShow——页面显示，每次打开页面都调用

  • onReady——初次渲染完成，调一次

  • onHide——页面隐藏，当navigateTo或底部tab切换时调用

  • onUnload——页面卸载，当redirectTo或navigateBack时调用

5、小程序的双向绑定和vue哪里不一样

  • 小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData({})

6、如何自定义组件（弹窗）

  • 先创建一个components文件夹，用来存放所有自定义组件的，目录结构依然是js,wxml,json,wxss

基本配置：

  • .json——进行自定义组件声明

javascript">{"component": true
}

使用组件：

  • 假如在index.wxml中使用这个自定义的组件，首先在index.json中进行声明

javascript">{  "usingComponents": {  "toastdemo": "/components/toastdemo/toastdemo"  }  
}

  • 接着在index.wxml中引用

  • 然后在index.js进行配置

  • 使用时直接执行this.toastdemo.showToast('弹框组件调用成功',2000)就可以了

7、小程序内的页面跳转

  • wx.navigateTo——保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面（参数必须为字符串）

  • wx.redirectTo——关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

  • wx.switchTab——跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，路径后不能带参数

  • wx.navigateBack——关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层

  • wx.reLaunch——关闭所有页面，打开到应用内的某个页面

8、小程序和Vue写法的区别

  • 循环遍历：小程序是wx:for="list"，vue是v-for="inforin list"

  • 调用data模型：小程序是this.data.unifo，vue是this.unifo

  • 给模型赋值：小程序是this.setData({unifo:1})，vue是直接this.unifo=1

9、小程序的双向绑定和vue哪里不一样

  • 小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData({})

10、小程序的优点和缺点

小程序的优点

  • 无需下载

  • 打开速度快

  • 开发成本低

  • 为用户提供良好的安全保障。发布有一套严格的审查流程，不能通过审查的程序无法发布上线

  • 服务请求快

小程序的缺点

  • 依托微信，不能开发后台管理功能

  • 大小限制不能超过2M，不能打开超过5个层级的页面

11、简述小程序原理

小程序分为两个部分webview和appService，webview用来展现UI，appService用来处理业务逻辑、数据及接口调用，它们在两个进程中运行，通过系统层JSBridge实现通信，完成UI渲染、事件处理。

12、提高小程序的应用速度的方法

  • 减少默认data的大小

  • 组件化方案，公用的如弹框等写个自定义的组件，然后调用

13、简述小程序原理

小程序分为两个部分webview和appService，webview用来展现UI，appService用来处理业务逻辑、数据及接口调用，它们在两个进程中运行，通过系统层JSBridge实现通信，完成UI渲染、事件处理

14、setData的回调函数

小程序>微信小程序的setData实现是和react的setData实现类似的，所以它也是一个异步函数，并且有回调函数的参数，当然平时小量数据我们可能并没有感觉到它的异步，但是为了确保逻辑的正确执行，在需要用到setData后 data里的数据的步骤，请写入setData的回调函数中，如下示例：

javascript">this.setData({a: this.data.a++},()=>{
})

15、如何实现下拉刷新

  • 先在app.json或page.json中配置enablePullDownRefresh:true

  • page里用onPullDownRefresh函数，在下拉刷新时执行

  • 在下拉函数执行时发起数据请求，请求返回后，调用wx.stopPullDownRefresh停止下拉刷新的状态

16、bindtap和catchtap的区别是什么

  • bindtap不会阻止冒泡事件，catchtap阻止冒泡

17、小程序>微信小程序与H5的区别？

①运行环境不同（小程序在微信运行，h5在浏览器运行）；

②开发成本不同（h5需要兼容不同的浏览器）；

③获取系统权限不同（系统级权限可以和小程序无缝衔接）；

④应用在生产环境的运行流畅度（h5需不断对项目优化来提高用户体验）

18、小程序关联微信公众号如何确定用户的唯一性？

使用wx.getUserInfo方法 withCredentials为true时，可获取encryptedData，里面有union_id.后端需要进行对称解密。

19、webview中的页面怎么跳回小程序中

  • 先在管理后台配置域名白名单，

  • 然后引入jweixin-1.3.2.js（https://res.wx.qq.com/open/js/jweixin-1.3.0.js）

javascript">wx.miniProgram.navigateTo({url: '/pages/login/login'+'$params'})
wx.miniProgram.navigateTo({url: '/path/to/page'})

20、简述小程序>微信小程序原理

小程序>微信小程序采用 JavaScript、WXML、WXSS 三种技术进行开发,本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口微信的架构，是数据驱动的架构模式，它的 UI 和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现 小程序分为两个部分 webview 和 appService 。其中 webview 主要用来展现 UI ，appService 有来处理业务逻辑、数据及接口调用。它们在两个进程中运行，通过系统层 JSBridge 实现通信，实现 UI 的渲染、事件的处理

21、小程序的双向绑定和vue哪里不一样

小程序直接 this.data 的属性是不可以同步到视图的，必须调用：

javascript">this.setData({// 这里设置
})

22、小程序的wxss和css有哪些不一样的地方

WXSS 和 CSS 类似，不过在 CSS 的基础上做了一些补充和修改

  • 尺寸单位 rpx

rpx 是响应式像素,可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素

  • 使用 @import 标识符来导入外联样式。@import 后跟需要导入的外联样式表的相对路径，用;表示语句结束

/** index.wxss **/

javascript">@import './base.wxss';
​
.container{color: red;
}

23 小程序页面间有哪些传递数据的方法

  • 使用全局变量实现数据传递

在 app.js 文件中定义全局变量 globalData， 将需要存储的信息存放在里面

// app.js
​

javascript">App({// 全局变量globalData: {userInfo: null}
})

使用的时候，直接使用 getApp() 拿到存储的信息

  • 使用 wx.navigateTo 与 wx.redirectTo 的时候，可以将部分数据放在 url 里面，并在新页面 onLoad 的时候初始化

//pageA.js
​
// Navigate
javascript">wx.navigateTo({url: '../pageD/pageD?name=raymond&gender=male',
})
​
// Redirect
javascript">wx.redirectTo({url: '../pageD/pageD?name=raymond&gender=male',
})
​// pageB.js
...

javascript">Page({onLoad: function(option){console.log(option.name + 'is' + option.gender)this.setData({option: option})}
})

需要注意的问题：

wx.navigateTo 和 wx.redirectTo 不允许跳转到 tab 所包含的页面

onLoad 只执行一次

  • 使用本地缓存 Storage 相关

24 小程序的生命周期函数

  • onLoad 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数

  • onShow() 页面显示/切入前台时触发

  • onReady() 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互

  • onHide() 页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等

  • onUnload() 页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时

25、哪些方法可以用来提高小程序>微信小程序的应用速度

1、提高页面加载速度

2、用户行为预测

3、减少默认 data 的大小

4、组件化方案

26、 小程序>微信小程序的优劣势

优势

  • 即用即走，不用安装，省流量，省安装时间，不占用桌面

  • 依托微信流量，天生推广传播优势

  • 开发成本比 App 低

缺点

  • 用户留存，即用即走是优势，也存在一些问题

  • 入口相对传统 App 要深很多

  • 限制较多,页面大小不能超过2M。不能打开超过10个层级的页面

27 怎么解决小程序的异步请求问题

小程序支持大部分 ES6 语法

  • 在返回成功的回调里面处理逻辑

  • Promise 异步

28如何实现下拉刷新

  • 首先在全局 config 中的 window 配置 enablePullDownRefresh

  • 在 Page 中定义 onPullDownRefresh 钩子函数,到达下拉刷新条件后，该钩子函数执行，发起请求方法

  • 请求返回后，调用 wx.stopPullDownRefresh 停止下拉刷新

29 bindtap和catchtap的区别是什么

相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分

不同点：他们的不同点主要是bindtap是不会阻止冒泡事件的，catchtap是阻值冒泡的

30 简述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别</h5>

  • wx.navigateTo()：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面

  • wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

  • wx.switchTab()：跳转到 abBar 页面，并关闭其他所有非 tabBar 页面

  • wx.navigateBack()关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层

  • wx.reLaunch()：关闭所有页面，打开到应用内的某个页面

结尾总结

通过本文的详细介绍，相信读者已经对小程序>微信小程序有了较为全面的了解。从小程序的基础文件类型到复杂的自定义组件，再到页面跳转和性能优化，每一步都至关重要。希望本文能够帮助读者在实际开发中更加得心应手，提升开发效率和用户体验。未来，随着小程序>微信小程序生态的不断完善，更多的创新功能和技术将会涌现，期待各位开发者能够在这一领域取得更大的成就。


http://www.ppmy.cn/news/1549822.html

相关文章

归并排序与逆序对问题(C语言版)

归并排序与逆序对问题(C语言版)

一、引言 归并排序是一种高效且稳定的排序方法&#xff0c;而逆序对问题是算法领域的一个经典问题&#xff0c;本文教大家如何实现归并排序&#xff0c;以及如何使用归并排序去结果逆序对问题 二、归并排序 归并排序思想 分解&#xff1a;将待排序的数组分成两半&#xff0c…
阅读更多...
社交电商专业赋能高校教育与产业协同发展：定制开发AI智能名片及2+1链动商城小程序的创新驱动

社交电商专业赋能高校教育与产业协同发展：定制开发AI智能名片及2+1链动商城小程序的创新驱动

摘要&#xff1a;本文围绕社交电商有望成为高校常态专业这一趋势展开深入探讨&#xff0c;剖析国家政策认可下其学科发展前景&#xff0c;着重阐述在专业建设进程中面临的师资短缺及实践教学难题。通过引入定制开发AI智能名片与21链动商城小程序&#xff0c;探究如何借助这些新…
阅读更多...
实现可视化大屏的适配，并且解决缩放导致的事件偏移问题

实现可视化大屏的适配，并且解决缩放导致的事件偏移问题

项目上有一个大屏是根据UI的设计稿&#xff0c;已经将宽高固定了&#xff0c;现在要求做适配&#xff0c;这里推荐两款用过的适配插件。 1、v-scale-screen 组件库地址&#xff1a;https://www.npmjs.com/package/v-scale-screen?activeTabreadme v-scale-screen这个插件利…
阅读更多...
K8s 下通过prometheus监控 nginx

K8s 下通过prometheus监控 nginx

k8s 下有两个版本的nginx ingress 分别是 ingress nginx 以及 nginx ingress Ingress-nginx 与 Nginx-ingress - LeoZhanggg - 博客园 这里我讨论的是 nginx ingress Nginx Ingress 使用Prometheus 导出数据 nginx ingress 本身支持通过支持这个提供prometheus 格式的…
阅读更多...
【轻量级 Java Web 整合开发(第 2 版)-框架编程技术】-期末复习（第二版）

【轻量级 Java Web 整合开发(第 2 版)-框架编程技术】-期末复习（第二版）

第一章 Java Web 技术概述 作业 1、完成课后(P28)选择题和问答题&#xff08;只需完成&#xff0c;不需要提交&#xff09; 2、Tomcat的目录结构及其用途&#xff1f; bin:启动/关闭应用服务器的bat批处理命令&#xff1b; conf:包含不同的配置文件。包括server.xml&#xff…
阅读更多...
ubuntu24.04下Matlab安装踩坑记录

ubuntu24.04下Matlab安装踩坑记录

1. 版本选择 link&#xff1a;https://ww2.mathworks.cn/downloads/matlab2024/2022x按官网执行后&#xff0c;均会出现暂时无法解决的bug&#xff1b;想到以前科大的虚拟机平台的版本是2019b&#xff0c;沿用这个版本即可&#xff1b;(其实很多软件根本没必要更新&#xff0c…
阅读更多...
（免费送源码）计算机毕业设计原创定制：Java+B/S+SSM+Web前端开发技术+IDEA+MySQL+Navicat 有风小院

（免费送源码）计算机毕业设计原创定制：Java+B/S+SSM+Web前端开发技术+IDEA+MySQL+Navicat 有风小院

摘 要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于站在的角度存在偏差&#xff0c;人们经常能够获得不同类型信息&#xff0c;这也是技术最为难以攻克的课题。针对有风小院等问题&#xff0c;对有风小院信息…
阅读更多...
开源 AI 智能名片 2+1 链动模式商城小程序：场景驱动的商业创新与用户价值挖掘

开源 AI 智能名片 2+1 链动模式商城小程序：场景驱动的商业创新与用户价值挖掘

摘要&#xff1a;本文围绕开源 AI 智能名片 21 链动模式商城小程序源码&#xff0c;深入分析了场景中的时间、空间、设备、社交和状态五大核心元素。阐述了各元素的表现形式、应用策略及价值&#xff0c;包括时间元素对业务周期和用户行为的影响及相应营销策略&#xff1b;空间…
阅读更多...
最新文章

Copyright @ 2022~2023