微信小程序开发者文档 API 面试问答宝典

最新推荐文章于 2024-07-22 15:35:41 发布

kingrome2009

最新推荐文章于 2024-07-22 15:35:41 发布

阅读量3.7k

点赞数 2

分类专栏：微信小程序

本文链接：https://blog.csdn.net/kingrome2017/article/details/80499184

版权

本文介绍了微信小程序的文件类型，如WXML、WXSS、JS和JSON，强调了渲染和逻辑分离的MVVM模式。详细讨论了小程序的启动流程，包括App和Page的生命周期。讲解了数据请求的封装、参数传递方法和性能优化策略。还对比了小程序与H5、Vue的区别，并探讨了微信小程序的框架特点，如响应式数据绑定和模块化。最后，提到了常见API的使用和开发中遇到的问题解决方案。

摘要由CSDN通过智能技术生成

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。

微信小程序的相关文件类型：

一、.wxml 后缀的 WXML 模板文件，是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。内部主要是微信自己定义的一套组件。

二、.wxss 后缀的 WXSS 样式文件。

三、.js 后缀的 JS 脚本逻辑文件

四、.json 后缀的 JSON 配置文件，小程序设置，如页面注册，页面标题及tabBar。

JSON 配置

我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json，我们依次来说明一下它们的用途。

小程序配置 app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下：

{
  "pages": ["pages/index/index", "pages/logs/logs"],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

工具配置 project.config.json

大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，就不需要重新配置

页面配置 page.json

可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json

小程序的启动

小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行: 只执行一次

App({
  onLaunch() {
    // 小程序启动之后 触发
  }
})

整个小程序只有一个 App 实例，是全部页面共享的。

Page({
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad() {
    // 页面渲染后 执行
  }
})

Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。

在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。

mvvm模式，提倡渲染和逻辑分离，js只需管理状态

封装微信小程序的数据请求：

一、将所有的接口放在统一的js文件中并导出

二、在app.js中创建封装请求数据的方法

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

参数传值的方法：

一、给HTML元素添加data-*属性来传递我们需要的值，然后通过e.currentTarget.dataset或onload的param参数获取。但data-名称不能有大写字母和不可以存放对象
二、设置id 的方法标识来传值通过e.currentTarget.id获取设置的id的值,然后通过设置全局对象的方式来传递数值
三、在navigator中添加参数传值

 wx.navigateTo({
         url: '../play/index?id='+ dataset.id
       })
       console.log(dataset.id);
   }
onLoad:function (param) {
    //页面初始化
        this.setData({
            currentId:param.id
        })
}

提高微信小程序的应用速度：

一、不要频繁使用setdata，传递大量新数据，后台态页面进行 setData
二、优化图片资源，减少使用大图片资源
三、代码包大小的优化

劣势：

代码包限制，不能打开超过5个层级的页面、托于微信，无法开发后台管理功能

微信小程序与H5的区别：

运行环境的不同，传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化

获取系统级权限的不同，系统级权限都可以和微信小程序无缝衔接

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

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

框架

逻辑层

小程序开发框架的逻辑层由 JavaScript 编写，增加 App 和 Page 方法，进行程序和页面的注册。
增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
每个页面有独立的作用域，并提供模块化能力。
由于框架并非运行在浏览器中，所以 JavaScript 在 web 中一些能力都无法使用，如 document，window 等。
开发者写的所有代码最终将会打包成一份 JavaScript，并在小程序启动的时候运行，直到小程序销毁。类似 ServiceWorker，所以逻辑层也称之为 App Service。

核心===响应数据绑定系统

为了减少配置项，四个文件必须具有相同的文件名

生命周期：

onLaunch Function 生命周期函数–监听小程序初始化当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onLoad: 页面加载

一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。
onShow: 页面显示

每次打开页面都会调用一次。
onReady: 页面初次渲染完成

一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
onHide: 页面隐藏

当navigateTo或底部tab切换时调用。
onUnload: 页面卸载

当redirectTo或navigateBack的时候调用。

onload 页面加载完成， onreay监听页面初次渲染完成

小程序与vuejs区别：

直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据

重点内容

1. wx.navigateTo(OBJECT)保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。

2. wx.redirectTo(OBJECT)关闭当前页面，跳转到应用内的某个页面。

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

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

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

模块化

exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露模块接口，除非你已经清晰知道这两者的关系。
小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。

require 暂时不支持绝对路径

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名

block wx:for
类似 block wx:if，也可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块。例如：

<block wx:for="{
  {[1, 2, 3]}}">
  <view> {
  {index}}: </view>
  <view> {
  {item}} </view>
</block>

wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如中的输入内容，的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被