微信小程序相关-Toy模板网

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

一、描述页面的结构和布局的 WXML 与 HTML 的异同

二、样式表 WXSS 和 CSS 的异同

三、微信小程序主要目录和文件的作用

四、小程序的双向绑定和 vue 的异同

五、微信小程序有哪些传值(传递数据)方法

1. URL 参数传递

2. Storage 存储

3. 全局数据传递

4. 事件传递

5. 页面栈传递

在跳转时，通过传递参数来实现数据的传递

六、微信小程序的生命周期函数

1.应用生命周期

2.页面生命周期

3.Component生命周期

七、微信小程序的原理

1. 运行环境

2. 开发工具

3. 框架支持

4. 渲染机制

5. 数据通信

6. 安全机制

八、微信小程序的特点和优势

九、微信小程序与 H5 的区别

1. 开发语言和框架

2. 执行环境和性能

3. 可访问性

4.可扩展性

5. 开发成本不同

十、微信小程序和Vue写法的区别

1.开发模式

2.语法

3.组件化

4.状态管理

十一、哪些方法可以提高微信小程序的应用速度

十二、微信小程序与原生App对比

小程序的优点

小程序缺点

原生 App 优点

原生 App 缺点

十三、常用 API

1. 页面跳转

2. 网络请求

3. 用户信息

4. 设备信息

5. 界面交互

6. 媒体文件

7. 支付

8. 缓存

十四、小程序的发布流程（开发流程）

注册微信小程序账号

获取微信小程序的AppID

下载微信小程序开发者工具

创建demo项目

去微信公众号配置域名

手机浏览

代码上传

提交审核

小程序发布

常见问题

一、描述页面的结构和布局的 WXML 与 HTML 的异同

同：

都是页面渲染语言，都使用类似的标签和属性描述网页的结构和内容。
结构化文档：都支持将文档分为不同的元素和部分。
样式与行为分离。

异：

平台：WXML 主要用于微信小程序开发，是微信小程序的一部分；HTML 主要用于 Web 开发，用于构建网页。
标签和属性：WXML 是针对微信小程序，如 <view>、<text> 等标签，wx:if、wx:for 等属性；HTML包含用于构建网页的通用标签和属性，如<div>、<span>、<p>等。
小程序没有 DOM 树和 window 对象。
标签名字不一样，且小程序标签更少，单一标签更多。

二、样式表 WXSS 和 CSS 的异同

WXSS（微信小程序样式表）和CSS（层叠样式表）。

同：

样式定义：都定义页面元素的样式，包括字体、颜色、大小、布局。
选择器：都使用选择器，例如标签选择器、类选择器、ID选择器等。
属性和值：都使用类似的属性和值。如，color 定义文本颜色，font-size 定义字体大小等。

异：

平台：WXSS 主要用于微信小程序开发；CSS 主要用于 Web 开发。
单位：WXSS 支持 rpx；CSS 使用 px、em、rem。rpx 是微信小程序中专门为适配不同屏幕尺寸而设计的单位，比 px 更加灵活。
WXSS 仅支持部分 CSS 选择器，如，不支持 ::after 伪元素。
WXSS 提供全局样式与局部样式。

三、微信小程序主要目录和文件的作用

app.json：全局配置文件，包括页面路径、窗口样式、导航栏样式、网络超时时间等。
app.js：全局逻辑文件，如小程序的生命周期函数、全局数据等。可以定义 App() 函数，用于注册小程序的生命周期函数和全局数据。
app.wxss：全局样式文件。
pages 目录：存放各个页面。每个页面通常包括一个 .wxml 文件（页面结构）、一个 .js 文件（页面逻辑）、一个 .wxss 文件（页面样式）和一个 .json 文件（页面配置）。
utils 目录：存放工具函数和公共代码。可以存放一些常用的函数、网络请求封装等。
images 目录：存放图片资源。
app.acss：全局样式文件，与app.wxss 功能类似，但是针对支付宝小程序。

四、小程序的双向绑定和 Vue 的异同

同：

1. 都是实现数据的双向绑定，即数据的改变可以自动更新到视图，视图的改变也可以自动更新到数据。

2. 简化开发：简化开发流程，减少手动操作 DOM 的需求，提高开发效率。

异：

1. 实现方式：在小程序通常需要手动监听数据变化，手动更新视图；Vue双向绑定是框架内置的特性，无需手动处理，框架会自动进行数据监听和更新视图

2. 响应式系统：小程序需要通过 setData() 方法手动更新数据；Vue 通过数据劫持和依赖追踪实现数据的监听和更新：

Object.defineProperty() 实现数据劫持。Vue 能够劫持（拦截）对象的属性访问（getter）和属性修改（setter）操作。当数据发生变化时，Vue 能够监测到，并通知相关的 Watcher，从而触发对应的更新。

每个组件的模板都包含了一系列的数据绑定，比如插值表达式 {{}} 、指令等。当模板中的数据发生变化时，Vue 能够追踪到哪些 Watcher 依赖于这些数据，并自动触发这些 Watcher 的更新。这种自动追踪数据依赖关系的机制就是依赖追踪。

3. 语法：

小程序：在 <input> 和 <textarea> 组件上添加 bindinput 事件监听器；在 Page 对象的 data 中定义需要双向绑定的数据，然后使用 this.setData() 来更新数据。

// .wxml

<view>
  <input type="text" value="{{ inputValue }}" bindinput="inputChange" />
  <text>输入的内容：{{ inputValue }}</text>
</view>

// .js

Page({
  data: {
    inputValue: ''
  },
  inputChange: function(e) {
    this.setData({
      inputValue: e.detail.value
    });
  }
});

Vue是 v-model="data"。

// .html

<div id="app">
  <input type="text" v-model="inputValue" />
  <p>输入的内容：{{ inputValue }}</p>
</div>

// .js

var app = new Vue({
  el: '#app',
  data: {
    inputValue: ''
  }
});

4. 生命周期：小程序页面手动编写，手动调用；Vue 由框架自动调用

5. 跨平台：小程序主要用于微信平台；Vue 用于 Web 开发、移动端开发等多种平台。

五、微信小程序有哪些传值(传递数据)方法

1. URL 参数传递

在页面路径后面添加参数进行传值，例如：/pages/index/index?id=1&name=abc，在目标页面的 onLoad 生命周期中可以通过 options 参数获取传递的值。

2. Storage 存储

使用 wx.setStorageSync 或 wx.setStorage 方法将数据存储到本地缓存中，在目标页面中使用 wx.getStorageSync 或 wx.getStorage 方法获取数据。

3. 全局数据传递

数据存储在 App 实例中的 globalData 属性中，在目标页面中使用 getApp().globalData 获取数据。

4. 事件传递

通过触发事件来传递数据，例如在子组件中触发一个自定义事件，并通过事件对象传递数据，在父组件中监听该事件并获取传递的数据。

5. 页面栈传递

通过 getCurrentPages 方法获取页面栈的实例，使用 data 属性存储数据，在目标页面中使用 options 获取数据。

在跳转时，通过传递参数来实现数据的传递

1. Query 参数传递：适用于传递简单的参数，如页面之间的关联 ID、状态等。

在通过 wx.navigateTo()或 wx.redirectTo() 等方法跳转页面时，可以在目标页面的路径后面附加查询参数，如：

wx.navigateTo({
  url: '/pages/detail/detail?id=123&name=test'
})

目标页面可以通过onLoad生命周期函数的 options 参数获取到传递的查询参数，如：

onLoad: function(options) {
  console.log(options.id); // 输出 123
  console.log(options.name); // 输出 test
}

2. 页面栈传递：适用于传递复杂的数据对象或者在页面关闭后需要回传数据的情况

在跳转时，通过 wx.navigateTo({ url: 'pages/detail/detail', query: { id: 123 } }) 将参数传递到目标页面，然后在目标页面中，通过 getCurrentPages()[getCurrentPages().length - 1].options 获取参数，如 var id = getCurrentPages()[getCurrentPages().length - 1].options.id。

六、微信小程序的生命周期函数

1.应用生命周期

onLaunch(options)：当小程序初始化完成时触发，全局只触发一次，可以在此处获取小程序启动参数 `options`。
onShow(options)：当小程序启动，或从后台进入前台显示时触发，可以在此处获取小程序进入前台的路径 `path`、场景值 `scene`、启动参数 `options`。
onHide()：当小程序从前台进入后台时触发。
onError(error)：当小程序发生错误时触发，包括页面错误和 API 调用错误。

2.页面生命周期

onLoad(options)：页面加载时触发，可以在此处获取页面的参数 `options`。
onShow()：页面显示时触发，当页面被打开、切换到前台时触发。
onReady()：页面初次渲染完成时触发，此时页面的 UI 已经渲染完毕。
onHide()：页面隐藏时触发，当页面被切换到后台时触发。
onUnload()：页面卸载时触发，当页面被关闭或返回上一页时触发。

3.Component生命周期

created()：组件实例刚刚被创建时调用，可以在这个函数中定义组件的数据和方法等
attached()：组件被添加到页面中时调用
ready()：组件初次渲染完成时调用
moved()：组件被移动到另外一个节点时调用
detached()：组件被从页面中移除时调用

七、微信小程序的原理

1. 运行环境

是微信客户端内置的一个轻量级的JavaScript引擎，用于解析和执行小程序的代码。这个JavaScript引擎提供了一系列的API，使得小程序能够与微信客户端进行交互。

2. 开发工具

提供了专门的开发工具。

3. 框架支持

类似于前端框架的开发模式，类似于 HTML、CSS 和 JavaScript 的语法和组件系统。

4. 渲染机制

类似于 Web 开发的渲染方式，使用了类似于 HTML 的 WXML （微信小程序标记语言）来描述页面的结构，使用了类似于 CSS 的 WXSS （微信小程序样式表）来定义页面的样式，使用了类似于 JavaScript 的逻辑语法来实现页面的逻辑功能

5. 数据通信

可以通过网络请求和微信客户端进行数据通信。开发者可以使用微信提供的 API 来发送 HTTP 请求，获取和上传数据。同时，微信小程序还提供了一些特定的 API，如获取用户信息、支付等，方便开发者与微信平台进行交互。

6. 安全机制

如，代码会经过微信平台的审核；网络请求受到跨域和 HTTPS 的限制；用户身份验证和权限管理。

八、微信小程序的特点和优势

快速启动、低内存、无需安装、跨平台支持、强大的生态系统。

九、微信小程序与 H5 的区别

1. 开发语言和框架

WXML 和 WXSS，微信开发者工具；

HTML、CSS 和 JavaScript，使用网页浏览器进行开发和调试。

2. 执行环境和性能

微信客户端，可以直接使用微信客户端提供的能力，如地理位置、支付等；

在浏览器中运行，受限于浏览器的性能和能力。

3. 可访问性

只能在微信客户端中访问；通过浏览器访问。

4.可扩展性

微信小程序功能和扩展性受到限制。必须符合微信小程序的规范和限制，经过微信审核才能发布；

H5 更加灵活，可以随意扩展和定制，没有限制。

5. 开发成本不同

H5 需要兼容不同的浏览器。

十、微信小程序和Vue写法的区别

1.开发模式

小程序需要使用微信开发者工具进行开发和调试；

Vue 可以在浏览器中使用webpack 等工具进行开发和调试。

2.语法

小程序使用 WXML 和 WXSS；

Vue使用 HTML、CSS和 JavaScript。

3.组件化

都支持组件化的开发方式。

小程序的组件化主要是通过 Component 方法进行定义和注册；

Vue 通过 Vue.component 方法进行定义和注册。

在使用组件时，小程序需要使用组件的名称进行调用；Vue通过组件的标签名称进行调用。

4.状态管理

小程序使用的是原生的数据绑定方式，即通过 setData 方法进行数据的修改和更新；

Vue 使用的是 Vue.js 提供的响应式数据绑定和 Vuex 状态管理机制。

如：

遍历：小程序wx:for="list"；Vue是v-for="item in list"

调用data模型（赋值）的时候：

小程序：this.data.item // 调用，this.setDate({item:1})//赋值

Vue：this.item //调用，this.item=1 //赋值

十一、哪些方法可以提高微信小程序的应用速度

提高页面的加载速度：预加载页面或组件，分包加载。
减少网络请求和数据传输：减少默认的 data 的大小。
优化代码逻辑和性能：防抖和节流，异步编程和Promise，避免复杂计算。
优化渲染性能：减少页面层级和组件数量。

十二、微信小程序与原生App对比

小程序的优点

基于微信平台开发，享受微信自带的流量，这个优点最大。
无需安装，不占手机内存，体验好。
开发周期段，一般最多一个月就可以上线完成。
开发所需的资金少，是开发原生APP的一半不到。
小程序名称是唯一的，在微信的搜索里权重很高。
容易上手，只要之前有HTML+CSS+JS基础知识，写小程序基本没有大问题。
基本不需要考虑兼容性问题。
发布，审核高效，基本上午发布审核，下午就审核通过，升级简单，支持灰度发布。
开发文档完善，社区活跃。
支持插件式开发，一些基本功能可以开发成插件，供多个小程序使用。

小程序缺点

局限性很强（比如页面大小不能超过1M，不能打开超过5个层级的页面，样式单一，小程序的部分组件已经是成型的了，样式不能修改，比如幻灯片，导航）只能依赖于微信依托与微信，无法开发后台管理功能。
不利于推广，推广面窄，不能分享朋友圈，只能分享给朋友，附近小程序推广，其中附加小程序也收到微信限制。
后台调试麻烦，因为API接口必须https请求，且公网地址，也就是说后台代码必须发布到远程服务器上；当然我们可以修改host进行dns映射把远程服务器转到本地，或者开启tomcat远程调试；不管怎么说终归调试比较麻烦。
前台测试有诸多坑，最头疼莫过于模拟器与真机显示不一致。
JS 引用只能使用绝对路径，不能操作 DOM。

原生 App 优点

响应速度快。
调用系统硬件的功能（摄像头，拨号，短信蓝牙..）。
在弱网，无网络，离线操作情况下体验好。

原生 App 缺点

开发周期长。
开发成本高。
需要下载。

十三、常用 API

1. 页面跳转

wx.navigateTo()：保留当前页面，跳转到应用内的某个页面。
wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。
wx.switchTab()：跳转到应用内的某个 TabBar 页面，并关闭其他所有非 TabBar 页面。
wx.navigateBack()：关闭当前页面，返回上一页面或多级页面。
wx.reLaunch()：关闭所有页面，打开到应用内的某个页面。

2. 网络请求

wx.request()：发起网络请求。
wx.uploadFile()：上传文件。
wx.downloadFile()：下载文件。
wx.connectSocket()：创建一个 WebSocket 连接。

这些 API 都是异步操作，需要传入一个 Object 类型的参数，其中包括请求的 URL、请求的参数、请求的方法、请求的头部信息等，如

wx.request({
  url: 'https://www.example.com/api',
  method: 'GET',
  data: {
    key1: value1,
    key2: value2
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success(res) {
    console.log(res.data)
  },
  fail(res) {
    console.log('请求失败', res)
  }
})

3. 用户信息

wx.getUserInfo()：获取用户信息
wx.login()：登录
wx.checkSession()：检查登录态是否过期

4. 设备信息

wx.getSystemInfo()：获取系统信息
wx.getNetworkType()：获取网络类型
wx.getLocation()：获取地理位置信息

5. 界面交互

wx.showToast()：显示消息提示框
wx.showModal()：显示模态对话框
wx.showLoading()：显示 loading 提示框
wx.showActionSheet()：显示操作菜单

6. 媒体文件

wx.chooseImage()：从相册选择图片或拍照
wx.previewImage()：预览图片
wx.saveImageToPhotosAlbum()：保存图片到系统相册

7. 支付

wx.requestPayment()：发起微信支付请求

8. 缓存

wx.setStorageSync()：将数据存储在本地缓存中（同步）
wx.getStorageSync()：从本地缓存中获取数据（同步）

详细的 API 文档可以参考微信小程序官方文档

十四、小程序的发布流程（开发流程）

参考：https://www.cnblogs.com/ssrstm/p/6855572.html

注册微信小程序账号
获取微信小程序的AppID
下载微信小程序开发者工具
创建demo项目
去微信公众号配置域名
手机浏览
代码上传
提交审核
小程序发布

常见问题

bindtap 不会阻止事件冒泡；catchatap 会阻止，事件不会在父元素上继续传递。
rpx：小程序的尺寸单位，规定屏幕为 750 rpx，可适配不同分辨率屏幕。
本地资源无法通过 wxss 获取：路径错误，文件名大小写不匹配，资源不存在，权限问题，重新编译或重新加载，使用网络路径。
wx.navigateTo 无法打开页面：一个应用同时只能打开5个页面，请避免多层级的交互方式，或使用 wx.redirectTo（会关闭当前页面）。
tabBar 不显示：1.tabBar 的数量 ≤2 或 ≥5 都不会显示。2.写法错误。3.没有写 pagePath 字段（程序启动后显示的第一个页面）。

tabBar 示例文章来源地址https://www.toymoban.com/news/detail-856468.html

// app.json

{
  "pages": [
    "pages/index/index",
    "pages/about/about",
    "pages/contact/contact"
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/tabbar/home.png",
        "selectedIconPath": "images/tabbar/home_selected.png"
      },
      {
        "pagePath": "pages/about/about",
        "text": "关于",
        "iconPath": "images/tabbar/about.png",
        "selectedIconPath": "images/tabbar/about_selected.png"
      },
      {
        "pagePath": "pages/contact/contact",
        "text": "联系",
        "iconPath": "images/tabbar/contact.png",
        "selectedIconPath": "images/tabbar/contact_selected.png"
      }
    ]
  },
  "window": {
    "navigationBarTitleText": "小程序示例"
  }
}

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

微信小程序相关

一、描述页面的结构和布局的 WXML 与 HTML 的异同

二、样式表 WXSS 和 CSS 的异同

三、微信小程序主要目录和文件的作用

四、小程序的双向绑定和 Vue 的异同

五、微信小程序有哪些传值(传递数据)方法

1. URL 参数传递

2. Storage 存储

3. 全局数据传递

4. 事件传递

5. 页面栈传递

在跳转时，通过传递参数来实现数据的传递

六、微信小程序的生命周期函数

1.应用生命周期

2.页面生命周期

3.Component生命周期

七、微信小程序的原理

1. 运行环境

2. 开发工具

3. 框架支持

4. 渲染机制

5. 数据通信

6. 安全机制

八、微信小程序的特点和优势

九、微信小程序与 H5 的区别

1. 开发语言和框架

2. 执行环境和性能

3. 可访问性

4.可扩展性

5. 开发成本不同

十、微信小程序和Vue写法的区别

1.开发模式

2.语法

3.组件化

4.状态管理

十一、哪些方法可以提高微信小程序的应用速度

十二、微信小程序与原生App对比

小程序的优点

小程序缺点

原生 App 优点

原生 App 缺点

十三、常用 API

1. 页面跳转

2. 网络请求

3. 用户信息

4. 设备信息

5. 界面交互

6. 媒体文件

7. 支付

8. 缓存

十四、小程序的发布流程（开发流程）

注册微信小程序账号

获取微信小程序的AppID

下载微信小程序开发者工具

创建demo项目

去微信公众号配置域名

手机浏览

代码上传

提交审核

小程序发布

常见问题

相关文章

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

支付宝扫一扫打赏

微信扫一扫打赏

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

二维码1

二维码2