微信小程序常见知识点

---

1、对微信小程序的理解

小程序是一种开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷的获取和传播，同时具有出色的使用体验。

微信小程序的优势：

1. 微信助理，容易推广。小程序拥有众多入口，这些入口有助于企业更好的获取流量，从而进行转化、变现。
2. 使用便捷。用户在使用小程序时，只需要轻轻点一下就可以使用，更加符合用户对使用方便、快捷的需求，所以小程序的用户数量不断增加。
3. 体验良好，有接近原生app的体验。。在微信生态里，小程序在功能和体验上是可以秒杀掉 H5 页面的，H5 页面经常出现卡顿、延时、加载慢、权限不足等原因，而这些问题在小程序里都不会出现。
4. 成本更低。从开发成本到运营推广成本，小程序的花费仅为APP的十分之一，无论是对创业者还是传统商家来说都是一大优势。

微信小程序的劣势：

1. 单个包大小限制为2M,这导致无法开发大型的应用，采用分包最大是20M（这个值一直在变化，以官网为准）。
2. 需要像app一样审核上架，这点相对于H5的发布要麻烦一些。
3. 处处受微信限制。例如不能直接分享到朋友圈，涉及到积分，或者虚拟交易的时候，小程序也是不允许的。

2、小程序中wxss和css的异同

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

1. 尺寸单位 rpx：rpx是响应式像素，可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。在不同的手机型号下1rpx=屏幕宽度/750。（phone6下1rpx = 0.5px）
2. 样式导入import：可以@import来导入其他的wxss
3. 样式选择器：类选择器、id选择器、元素选择器、伪元素选择器

@import './test_0.wxss'

3、小程序中的模板语法WXML（标签、数据、渲染）

1. 标签的使用

在小程序中没有H5提供的那些标签了，这里我们需要使用小程序给我们提供的组件。常用的标签有

1. view:相当于div;
2. text:相当于span;
3. image:相当于img

2. 数据绑定

1. 数据定义：
2. 引用数据：通过{ {}}的方式可以引用数据。
   小程序中任何需要获取数据的地方都需要用{ {}},包括标签内的属性。

data:{
   
    
    
	return {
   
    
    
		msg:"hello world",
		num: 18,
	}
  }

3. 数据渲染

1. 渲染层和数据相关。
2. 逻辑层负责产生、处理数据。
3. 逻辑层通过 Page 实例的 setData 方法传递数据到渲染层。

<view>{
   
    
    {
   
    
     msg }}</view>
Page({
   
    
    
  data:{
   
    
    
	return {
   
    
    
		msg:"hello world",
		num: 18,
	}
  }
  onLoad: function () {
   
    
    
    this.setData({
   
    
     msg: 'Hello World2222' })
  }
})

4. 逻辑渲染

wx:if和hidden

1. wx:if：WXML 中，使用 wx:if=“{ {condition}}” 来判断是否需要渲染该代码块
   如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。
2. hidden：通过hidden属性也可以进行条件渲染。
3. wx:if和hidden的异同：
   同：都能控制元素的显示与隐藏
   异：wx:if在不满足条件的时候会删除掉对应的DOM，hidden属性则是通过display属性设置为none来进行条件渲染。

<view wx:if="{
    
     
     {length > 5}}"> 1 </view>
<view wx:elif="{
    
     
     {length > 2}}"> 2 </view>
<view wx:else> 3 </view>

<block wx:if="{
    
     
     {true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

<view hidden="{
    
     
     {condition}}">
隐藏
</view>

5. 列表渲染

wx:for ：在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。
wx:for-index, wx:for-item 用来指定index和item的别名

wx:key：指定列表中项目的唯一的标识符。
要求：需要是列表中唯一的字符串或数字；保留关键字 this： 代表在 for 循环中的 item 本身，并且item本身是唯一的字符串或者数字
作用：能提高重排效率

<!-- array 是一个数组 -->
<view wx:for="{
    
     
     {index in array}}" wx:key="{
    
     
     {index}}">
  {
  
   
   {index}}: {
  
   
   {item.name}}
</view>
<view wx:for="{
    
     
     {array}}" wx:for-index="idx" wx:for-item="itemName">
  {
  
   
   {idx}}: {
  
   
   {itemName.name}}
</view>

对应的脚本文件：
Page({
  data: {
    array: [{
      name: '天亮教育',
    }, {
      name: '尚云科技'
    }]
  }
})

6. template（模板）

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。使用 name 属性，作为模板的名字。然后在 内定义代码片段。
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入。

定义
<template name="msgItem">
  <view>
    <text> {
  
   
   {index}}: {
  
   
   {msg}} </text>
    <text> Time: {
  
   
   {time}} </text>
  </view>
</template>
调用
<!-- msgList:[
      {
        index: 0,
        msg: '这是一段模板',
        time: '2020-10-10'
      }
    ] -->
<view wx:for="{
    
     
     {msgList}}">
  <template is="msgItem" data="{
    
     
     {...item}}"></template>
</view>

7. 引用

WXML 提供两种文件引用方式import和include。

1. import：可以在该文件中使用目标文件定义的 template
   需要注意的是 import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件中 import 的 template，简言之就是 import 不具有递归的特性。