微信小程序常见知识点总结

qq_57039857

已于 2022-12-06 21:01:33 修改

阅读量1.1k

点赞数

文章标签：微信小程序小程序

于 2022-11-25 00:09:33 首次发布

本文链接：https://blog.csdn.net/qq_57039857/article/details/128029107

版权

1、小程序中如何进行接口请求？会不会跨域，为什么

2、小程序的常用命令有哪些

3、你认为微信小程序的优点是什么，缺点是什么

4、微信小程序中的js和浏览器中和node中的区别

5、微信小程序中的数据渲染浏览器中有什么不同

10、小程序如何进行页面的跳转传参以及接收数据

11、小程序如何进行本地存储

12、谈谈你对微信小程序请求封装的理解

13、对小程序中常见的开放能力API有什么了解

14、小程序的父子传参和vue中的有什么区别

1、小程序中如何进行接口请求？会不会跨域，为什么

wx.request

不会跨域

因为不是浏览器，没有同源策略

2、小程序的常用命令有哪些

（1）bindTap 当用户点击组件时，会在js文件中的page里面找到对应的事件处理函数

（2）wx:for 可以循环数组

wx:for-index指定数组当前下标的变量名（也就是索引）

wx:for-item 指定数组当前元素的变量名（也就是键值）

wx:key唯一标识避免重复

（3）wx:if wx:elif wx:else 条件渲染

3、你认为微信小程序的优点是什么，缺点是什么

优势：①容易推广。在微信中，小程序拥有众多入口，例如附近的小程序、小程序码、分享、发现-小程序等五十多个的入口，这些都有助于推广小程序；②使用便捷。用户在使用小程序时，只需要轻轻点一下就可以使用；③体验良好。小程序不会像H5页面一样经常出现卡顿、延时、加载慢、权限不足等问题④；成本更低，从开发成本到运营推广成本，小程序的花费仅为APP的十分之一。

劣势：①单个包大小限制为2M，这导致无法开发大型的应用，采用分包最大是20M；②需要像app一样审核上架，这点相对于H5的发布要麻烦一些；③处处受微信限制。例如不能直接分享到朋友圈，涉及到积分，或者虚拟交易的时候，小程序也是不允许的。

4、微信小程序中的js和浏览器中和node中的区别

浏览器中JS：ES，DOM，BOM，

Node中的JS：ES，NPM，Native

小程序中的JS：ES小程序框架Ø小程序API

直观的说小程序中没有Dom和Bom对象

5、微信小程序中的数据渲染浏览器中有什么不同

浏览器中渲染是单线程的。

而在小程序中的运行环境分成渲染层和逻辑层， WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

6、简述一下微信小程序中通讯模型

小程序中的运行环境分成渲染层和逻辑层，

WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

小程序的渲染层和逻辑层分别由2个线程管理

渲染层的界面使用了WebView 进行渲染；

逻辑层采用JsCore线程运行JS脚本。逻辑层的js是单线程的

这两个线程的通信会经由Native（微信客户端）做中转，逻辑层发送网络请求也经由Native转发。

7、谈谈对微信小程序中生命周期函数的理解

（1）程序的生命周期：

onLaunch: 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）

onShow：当小程序启动，或从后台进入前台显示，会触发 onShow

onHide：当小程序从前台进入后台，会触发 onHide

onError：当小程序发生脚本错误，或者 API 调用失败时，会触发 onError 并带上错误信息。

其他字段：可以添加任意的函数或数据到 Object 参数中，在App实例回调用 this 可以访问。

App({
  onLaunch: function(options) {},
  onShow: function(options) {},
  onHide: function() {},
  onError: function(msg) {},
  globalData: 'I am global data'
})

（2）页面（page）

①生命周期

onLoad：生命周期函数--监听页面加载，触发时机早于onShow和onReady

onReady：生命周期函数--监听页面初次渲染完成

onShow：生命周期函数--监听页面显示，触发事件早于onReady

onHide：生命周期函数--监听页面隐藏

onUnload：生命周期函数--监听页面卸载

②页面的用户行为：

onPullDownRefresh 下拉刷新

onReachBottom 上拉触底

（3）组件：

created：在组件实例刚刚被创建时执行

attached：在组件实例进入页面节点树时执行

ready：在组件在视图层布局完成后执行

moved：在组件实例被移动到节点树的另一个位置时执行

detached：在组件实例被从页面节点树移除时执行

error：每当组件方法抛出错误时执行

8、微信小程序中如何进行事件的定义，传参

事件定义：bind+事件类型或bind事件类型

点击事件：

<view bindtap="handleTap">点击事件</view>
<view bind:tap="handleTap">另一种写法</view>

阻止事件冒泡：bindTap换成catchTap

事件捕获：capture-bind

事件传参：data-参数名=’参数值’

<view bindtap="handleTap" data-msg="我是事件的参数">点击事件</view>

每个事件回调触发时，都会收到一个事件对象，通过这个对象可以获取路由传递的参数。

handleTap(e){
console.log("执行了点击事件");
	// 通过currentTarget中的dataset属性可以获取时间参数
    console.log(e.currentTarget.dataset.msg);
}

9、wxss和css有什么区别

wxss是一套用于小程序样式的语言，用于描述wxml的组件样式

（1）不同尺寸单位在wxss中，引入了rpx单位，引用这个单位的目的，适配不同宽度的手机，开发起来简单在iphone6手机下，屏幕宽度是375px 单位换算1px =2rpx

（2）样式导入 @import ‘外联样式表的相对路径’，wxss最终被编译打包到目标文件，用户只需要下载一次，在使用过程中，不会因为样式的引用而产生多余的文件请求

（3）样式选择器类名 id 元素伪类选择器

10、小程序如何进行页面的跳转传参以及接收数据

（1）声明式：

<navigator url='url?id=1'></navigator>
<navigator url='url?id={{变量名}}'></navigator>

（2）函数式：

 wx.navigateTo({
url:'url?id=123',
})

  wx.navigateTo({
url:'url?id={{变量名}}',
})

注意：wx.switchTab和wx.navigateBack不能传递参数

（3）接收参数：

onLoad(options) {
      console.log(options);
},

11、小程序如何进行本地存储

（1）存储

①异步存储

 wx.setStorage({
      data: {name:"天亮教育",age:4},//需要存储的内容。     
key: 'list',//本地缓存中指定的 key
})

②同步存储

wx.setStorageSync('list1', {name:"尚云科技",age:5})

（2）读取本地数据

①异步操作


  wx.getStorage({
      key: 'list',
      success(res){
        console.log(res);
      }
    })

②同步操作

const list = wx.getStorageSync('list')

12、谈谈你对微信小程序请求封装的理解

在开发中，页面之间有很多相似的代码，我们可以对其相似的代码块进行封装，进行复用。

步骤：

①创建组件：在配置文件中设置component:true

②引入组件：在需要使用的页面配置文件中写入路径

③可以设置插槽

默认插槽：<slot></slot>

命名插槽：<slot name=’common111’></slot>

页面中：

   <common>

        这是默认插槽

        <view slot=’common111’>这是命名插槽</view>

   </common>

优点：

高内聚低耦合；

避免了代码间的冲突；

容易维护；

提高开发效率，方便重复利用，提高可维护性；

13、对小程序中常见的开放能力API有什么了解

wx.getNetworkType({}) ----检查网络类型，例如：wifi,5g,4g,3g,2g等

wx.downloadFile({

url:'地址'，

success(){

wx.openDocument({})----下载成功后预览文档

}

}）：从网络上下载文档

wx.scanCode({}）：扫一扫

wx.canIUse() ：判断小程序的API，回调，参数，组件等是否在当前版本可用。返回值为布尔

类型。

wx.getUserProfile ：获取用户信息。每次请求都会弹出授权窗口，用户同意后返回 userInfo。wx.getUserInfo：获取用户信息。//已经停止使用

14、小程序的父子传参和vue中的有什么区别

有两种方式：父传子；子传父

（1）父传子

在父页面中：
<son msg=’hello’></son>
<son></son>
子组件接收：
properties:{
    msg:{
       type:[String,Number],
       value:’hello world’,
    }
 }
子组件：<view>{{msg}}</view>

（2）子传父：

父页面：
<son bind:fromson=’fromson’></son>
子组件：
<button bindtap=’tofather’>子传父</button>
子组件中触发：
methods：{
		tofather(){
this.triggerEvent(‘fromson’,’111’)
}
}
父组件接收子组件参数：
	fromson(res){
console.log(res.detail)
this.setData({
“fromson”:res.detail
})
}

15、谈谈你对behavior的理解

behaviors是用于组件间代码共享的特性。

每个 behavior可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。每个组件可以引用多个behavior , behavior也可以引用其它 behavior 。

暂时性的我们可以把它理解成为我们一个组件js代码太长了，可以把js代码拆分成多个js文件，然后将这些文件引入我们那个组件的js中，就是通过behaviors来引入的.并月我们拆分出来的这柴is文件是可以在不凤的驱真史卖引思的。想当于拆分出来的这部分is伐殁类似天utls.但是基史熊包含生命周期。

综上， utis跟behaviors不同的点在于， behaviors能将某个页面js文件的生命周期也分割一出来，但是utils只能分割功能函数。

16、如何优化首次加载小程序的速度

控制代码包的大小：（1）代码包的体积压缩可以通过勾选开发者工具中“上传代码时，压缩代码”选项（2）及时清理无用的代码和资源文件（3）减少资源包中的图片等资源的数量和大小

分包加载,预加载：将用户访问率高的页面放在主包里，将访问率低的页面放入子包里，按需加载；采用子包预加载技术，并不需要等到用户点击到子包页面后在下载子包

预请求：请求可以在页面onLoad就加载，不需要等页面ready后在异步请求数据；尽量减少不必要的https请求，可使用 getStorageSync() 及 setStorageSync() 方法将数据存储在本地

避免不当的使用setData：不要过于频繁调用setData，应考虑将多次setData合并成一次setData调用

使用自定义组件：对于一些独立的模块我们尽可能抽离出来，这是因为自定义组件的更新并不会影响页面上其他元素的更新；各个组件也将具有各自独立的逻辑空间。每个组件都分别拥有自己的独立的数据、setData调用

17、如何实现瀑布流效果

将数组拆分成左右两个数组
记录左右数组的高度，遍历总数组，将新的元素放在高度比较小的数组里

//wxml文件
 <template name="postList">
    <view class="box"  bindtap="toChat" data-postid="{{item.postsId}}">
      <view class="title">
        {{item.title}}
      </view>
      <view class="imgBox">
        <image src="{{item.coverImgUrl}}" mode="widthFix"></image>
      </view>
    </view>
  </template>
<view class="bigBox">
  <view  class="leftBox">
      <template is="postList" data="{{item}}" wx:for="{{leftList}}" wx:key="postsId">						  			        				</template>
  </view>
  <view class="leftBox">
      <template is="postList" data="{{item}}" wx:for="{{rightList}}" wx:key="postsId"></template>
  </view>
</view>
<view class="load">
  <van-loading type="spinner" wx:if="{{isLoading}}" />
</view>
<view wx:if="{{isEnd}}" class="tip">没有更多了...</view>
<view class="back" hidden="{{backShow}}" bindtap="backTap" >
  <van-icon name="back-top" />
</view>

//js文件
import { getlist } from "../../api/chat"

// pages/chat/chat.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[],
    leftList:[],
    rightList:[],
    leftHeight:0,
    rightHeight:0,
    // 整个数据处理完成
    finish:false,
    pageNum:1,
    pageSize:10,
    total:0,
    isEnd:false,
    isLoading:true,
    // 返回顶部
    backShow:true,
  },
// 请求的函数封装
getPost(){
  getlist(this.data.pageNum,this.data.pageSize).then(res=>{
    if(res.data.code == 0){
      wx.stopPullDownRefresh();
      this.initList(res.data.rows);
      this.data.total = res.data.total;
    }
  })
},
// 处理数据的封装
initList(list){
  this.data.finish = false
  if(list.length == 0){
    this.data.finish = true;
    // 没数据了
    return
  }
  let item = list.shift();
  // 获取图片信息
   wx.getImageInfo({
    src:item.coverImgUrl,
    success:(res)=>{
      if(this.data.leftHeight <= this.data.rightHeight){
        // 加到左列表
        this.data.leftList.push(item);
        this.data.leftHeight += res.height / res.width
      }else{
        this.data.rightList.push(item);
        this.data.rightHeight += res.height / res.width
      }
      // 更改视图
      this.setData({
        leftList:this.data.leftList,
        rightList:this.data.rightList,
        isLoading:false
      })
    },
    complete:()=>{
      this.initList(list);
    }
  })
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      isLoading:true
    })
    // 处理数据
    this.getPost();
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.setData({
      isEnd:false
    })
     // 下拉刷新
    if(this.data.finish){
      this.data.pageNum = 1
      this.setData({
        leftList:[],
        rightList:[],
        leftHeight:0,
        rightHeight:0
      })
      this.getPost();
    }else{
      return
    }
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    this.setData({
      isLoading:true,
    })
    // 触底了
    if(this.data.finish){
      if(this.data.pageNum * this.data.pageSize >= this.data.total){
        this.setData({
          isEnd:true,
          isLoading:false,
        })
      }else{
        this.data.pageNum ++;
        this.getPost()
      }
    }
  },
})