微信小程序笔记

• APPID：wxec8b02f3fbf29e9e

一.⼩程序配置⽂件

1.1全局配置app.json

app.json 是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底 部 tab 等。普通快速启动项⽬⾥边的 app.json 配置

{
  "pages":[
    "pages/index/index",//微信小程序显示的首页，谁在第一位显示谁
    "pages/logs/logs",
    "pages/demo01/demo01"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}
​

字段的含义 ：

1. pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序 ⻚⾯定义在哪个⽬录。

2. window 字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。

3. 完整的配置信息请参考 app.json配置

1.2全局window配置

{
  "pages":[
    "pages/index/index",//微信小程序显示的首页，谁在第一位显示谁
    "pages/logs/logs",
    "pages/demo01/demo01"
  ],
  "window":{
    "backgroundTextStyle":"dark",//两个值dark/light 默认是light
    "navigationBarBackgroundColor": "#0094ff",//头部导航栏颜色
    "navigationBarTitleText": "我的应用",//标题
    "navigationBarTextStyle":"white",//标题颜色，两个值black/white 默认是white
    "enablePullDownRefresh": true,//是否开启下拉刷新，默认是false
    "backgroundColor": "#ccc"//下拉刷新时的背景颜色
  },
    "tabBar": {//tabbar
    "color": "#999",//未选中的字体颜色
    "selectedColor": "#ff2d4a",//选中时字体颜色
    "backgroundColor": "#fafafa",//tabbar的背景颜色
    "position": "bottom",//tabbar的位置
    "borderStyle": "black",//tabbar边框
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icons/home.png",
        "selectedIconPath": "icons/home-o.png"
      },
      {
        "pagePath": "pages/category/index",
        "text": "分类",
        "iconPath": "icons/category.png",
        "selectedIconPath": "icons/category-o.png"
      }
      ,
      {
        "pagePath": "pages/cart/index",
        "text": "购物车",
        "iconPath": "icons/cart.png",
        "selectedIconPath": "icons/cart-o.png"
      }
      ,
      {
        "pagePath": "pages/user/index",
        "text": "我的",
        "iconPath": "icons/my.png",
        "selectedIconPath": "icons/my-o.png"
      }
    ]
  }
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}
​

二.数据绑定

<!--pages/demo02/demo02.wxml-->
<!-- <text></text>  相当于html中的span 是一个行内块元素，不换行 -->
<!-- <view></view> 相当于html中的div 是一个块级元素 换行 -->
<!-- <checkbox></checkbox> 相当于html中的复选框 -->
<text>1</text>
<text>2</text>
<view>1</view>
<view>2</view>
<!-- 1.字符串类型 -->
<view>
    {{msg}}
</view>
<!-- 2.数字类型 -->
<view>{{num}}</view>
<!-- 3.bool类型 -->
<view>是否是伪娘:{{isGril}}</view>
<!-- 4.object类型 -->
<view>{{person.name}}</view>
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
​
<!-- 5.自定义属性   -->
<view data-num="{{num}}">自定义数据</view>
​
<!-- 6.使用bool充当checked属性是要注意 -->
<!-- checked="{{isChecked}}" 前一个双引号和花括号直接不能有空格否则机会编译错误 
    以下写法就是错误的示范
    <checkbox checked="        {{isChecked}}"></checkbox>
-->
<checkbox checked="{{isChecked}}"></checkbox>
​
<!-- 7.运算=>表达式
    可以在花括号中放一些运算表达式，但是不能放语句
    例：<view>{{1+1}}</view>成立
    <view>{{if()}}</view> 这样不允许
 -->
 <!-- 数字加减 -->
<view>{{1+1 - 3  * 2 / 3}}</view>
  
<!-- 字符串拼接 -->
<view>{{\'hello\' + \'wx\'}}</view>
​
<!-- 三元表达式 -->
<view>{{17+1 == 18 ? \'欢迎\' : \'您未满18岁\'}}</view>
​
<!-- 这样是不允许的 <view>{{if(age>18){666}}}</view> -->
​
 //注意: 花括号和引号之间如果有空格，将最终被解析成为字符串

2.1循环

wx:for

项的变量名默认为 item wx:for--item 可以指定数组当前元素的变量名

下标变量名默认为 index wx:for--index 可以指定数组当前下标的变量名

wx:key ⽤来提⾼数组渲染的性能

wx:key 绑定的值 有如下选择

1. string 类型，表⽰ 循环项中的唯⼀属性 如

list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]
​
wx:key="id"

2.保留字 this ，它的意思是 item 本⾝ ，this 代表的必须是 唯⼀的字符串和数组。

list:[1,2,3,4,5]
wx:key="*this"

<!-- 循环
    1 wx:for="{{数组或者对象}}"  wx:for-item="循环项的名称"  wx:for-index="循环项的索引"
    2 wx:key="唯一的值" 用来提高列表渲染的性能
      1 wx:key 绑定一个普通的字符串的时候 那么这个字符串名称 肯定是 循环数组 中的 对象的 唯一属性
      2 wx:key ="*this"  就表示 你的数组 是一个普通的数组  *this 表示是 循环项 
        [1,2,3,44,5]
        ["1","222","adfdf"]
    3 当出现 数组的嵌套循环的时候 尤其要注意  以下绑定的名称 不要重名
        wx:for-item="item" wx:for-index="index"
    4 默认情况下 我们 不写
       wx:for-item="item" wx:for-index="index"
       小程序也会把 循环项的名称 和 索引的名称 item 和 index 
       只有一层循环的话 （wx:for-item="item" wx:for-index="index"） 可以省略
 -->
 <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">
    索引:{{index}}---值：{{item.name}}
 </view>
​
 <view>遍历对象</view>
 <view wx:for="{{person}}" wx:for-item = "value" wx:for-index = "key" wx:key="age">
    属性：{{key}}---值:{{value}}
 </view>

2.2 block

渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素

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

2.3 if 条件渲染

在框架中，使⽤ wx:if="{{condition}}" 来判断是否需要渲染该代码块：

<!-- 10条件渲染
   1.wx:if="{{true/false}}"
​
   2.多分支
   wx:if="{{true/false}}"
   wx:elif="{{true/false}}"
   wx:else
​
   3.hidden
      1 在标签上直接加入属性 hidden 
      2 hidden="{{true/false}}"
​
   4. 什么场景下用哪个
      1 当标签不是频繁的切换显示 优先使用 wx:if
         直接把标签从 页面结构给移除掉 
      2 当标签频繁的切换显示的时候 优先使用 hidden
         通过添加样式的方式来切换显示 
         hidden 属性 不要和 样式 display一起使用
   
 -->
​
 <view>条件渲染</view>
 <view wx:if="{{true}}">显示</view>
 <view wx:if="{{false}}">隐藏</view>
​
 <view wx:if="{{false}}">不显示</view>
 <view wx:elif="{{false}}">不显示</view>
 <view wx:else>他们都不要，我接盘</view>
​
 <view>----------</view>
 <view hidden> 我被hidden我不会显示</view>
 <view hidden="{{false}}">我可以被看到</view>
 <view hidden="{{true}}">你看不到我</view>

2.4 小程序事件的绑定

小程序绑定事件，通过bind关键字来实现，如 bindtap bindinput bindchange等不同组件支持不同的事件，具体看组件的说明即可

<!-- 
  1.需要input标签绑定input事件
  绑定关键字 bindinput
​
  2.获取输入的值
  要通过事件源对象来获取
  e.detail.value
​
  3.把输入框的值 赋给data中的num
  注意：
  不能直接赋值
  this.num = e.detail.value
  this.data.num = e.detail.value
  真确的写法
  this.setData({
    num:e.detail.value
  })
​
  4.加入一个点击事件
    1.bindtap
    2.无法在小程序当中的事件中直接传参
    3.通过自定义属性的方式来传递参数
    4.事件源中获取自定义属性
    e.target.dataset.operation
注意：事件传参要通过自定义参数
   -->
<input type="text" bindinput="handleInput"></input>
<view>{{num}}</view>
​
<button bindtap="changeNum" data-operation="{{1}}">+</button>
<button bindtap="changeNum" data-operation="{{-1}}">-</button>
​
// pages/demo03/demo03.js
Page({
​
  /**
   * 页面的初始数据
   */
  data: {
    num: 0
  },
  handleInput(e) {
    console.log(e.detail.value)
    this.setData({
      num: e.detail.value
    })
  },
  changeNum(e){
    console.log(e)
    const {operation} = e.target.dataset
    this.setData({
      num:this.data.num + operation
    })
  }
})
​
​

2.5wxss宽度自适应配置

/* pages/demo04/demo04.wxss */
/*
1.小程序中 不需要主动引入样式文件
2.需要把页面中某些元素的单位 由px改换成rpx
    1.设计稿 750px
    750 px = 750rpx
      1 px = 1 rpx
    2.把屏幕宽度改成375px
    375px = 750 rpx
    1 px = 1 rpx 
    1rpx = 0.5px
    3.存在一个设计稿 款多 414 或者未知page
    1.设计稿 page 存在一个元素宽度 100px
    2.拿以上的需求 趋势线 不同宽度的页面适配
​
    page px = 750px
    1px = 750 rpx * 100 / page
    100px = 750 rpx * 100  / page
    假设设计稿的宽度page等于375px
    4. 利用 一个calc属性 
    注意：1.750和rpx中间不要留空格
    2.运算符的两边也不要留空格
*/
view{
  /* width: 200rpx; */
  height: 200rpx;
  background-color: aqua;
  font-size: 40rpx;
  width: calc(750rpx * 100 / 375);
}

2.6引入外部样式

通过@import "路径位置"

注意只支持相对路径

代码演示：

/*style文件夹下的common样式*/
view{
  color: aqua;
  font-size: 16px;
}
​
/*导入到demo05中的样式中*/
​
@import "../../style/common.wxss"

2.7选择器

特别需要注意的是小程序不支持通配符*因此以下代码无效

*{
    margin:0;
    padding:0;
    box-sizing:border-box; 
 }

目前的选择器有：

2.8小程序中使用less

1.原生小程序不支持less,其他基于小程序的框架大体都支持，如wepy mpvue, taro

2.用vscode中的插件easy less

3.在vscode中设置加入以下配置

less.compile": {
        "outExt":       ".wxss"
   }

4.在要编写样式的地⽅，新建 less ⽂件，如 index.less ,然后正常编辑即可。

//嵌套写法
view{
    text{
        width: 20px;
    }
}
//定义变量
@color:yellow;
text{
    color: @color;
}
//导入外部less文件
@import \'../../style/index.less\';
view{
    color: @themeColor;
}

三.小程序常见的组件

重点讲解⼩程序中常⽤的布局组件

view, text, rich-text, button, image, navigator, icon, swiper, radio, checkbox 等

3.1 view

代替原来的div标签

 <view hover-class="h-class">
 点击我试试
 </view>

3.2 text

1.文本标签

2.只能嵌套text

3.长安文字可以复制（只有该标签有这个功能）

4.可以对空格回车进行编辑

<!--pages/demo07/demo07.wxml-->
<!-- selectable 是否可复制 decode是否解码 -->
<text selectable="{{true}}" decode="{{true}}">
我是一个text，我可以被复制 &nbsp; 123&lt;
</text>
​

3.3 image

<!--pages/demo08/demo08.wxml-->


<!-- 
image 图片标签
  1 src 指定要加载的图片的路径
    图片存在默认的宽度和高度 320 * 240      原图大小是 200 * 100
  2 mode 决定 图片内容 如何 和 图片标签 宽高 做适配
    1 scaleToFill 默认值 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 
    2 aspectFit 保持宽高比 确保图片的长边 显示出来   页面轮播图 常用
    3 aspectFill 保持纵横比缩放图片，只保证图片的 短 边能完全显示出来。  少用
    4 widthFix 以前web的图片的 宽度指定了之后 高度 会自己按比例来调整   常用  
    5 bottom。。 类似以前的backgroud-position 
  3 小程序当中的图片 直接就支持 懒加载  lazy-load
    1 lazy-load 会自己判断 当 图片 出现在 视口  上下 三屏的高度 之内的时候  自己开始加载图片 

 -->


<image mode="top" lazy-load  src="https://pic.images.ac.cn/image/5ea0fe288244e.html" >
    
</image>

1.image图片标签默认高度320px,240px

2.支持懒加载

mode有效值：

mode有13种模式，其中4种是缩放模式，9中是裁剪模式

3.4 swiper 微信内置轮播图组件

swiper组件默认的宽是100%,高度是150px

3.4.1swiper 滑块视图容器

3.4.2swiper-item每个滑块

默认宽度和高度都是100%

<!-- pages/demo09/demo09.wxml -->

<!-- 
  1 轮播图外层容器 swiper
  2 每一个轮播项 swiper-item
  3 swiper标签 存在默认样式
    1 width 100%
    2 height 150px    image 存在默认宽度和高度 320 * 240 
    3 swiper 高度 无法实现由内容撑开 
  4 先找出来 原图的宽度和高度 等比例 给swiper 定 宽度和高度
    原图的宽度和高度  1125 * 352 px
    swiper  高度 / swiper 宽度 =  原图的高度  /  原图的宽度
    swiper  高度  =  swiper 宽度 *  原图的高度 / 原图的宽度
    height: 100vw * 352 /  1125
  5 autoplay 自动轮播
  6 interval 修改轮播时间
  7 circular 衔接轮播
  8 indicator-dots 显示 指示器 分页器 索引器 
  9 indicator-color 指示器的未选择的颜色 
  10 indicator-active-color 选中的时候的指示器的颜色 
 -->
<swiper autoplay="{{true}}" interval="2000" circular indicator-dots="{{true}}" indicator-color="skyblue" indicator-active-color="orange">
    <swiper-item>
        <image mode="widthFix" src="//gw.alicdn.com/imgextra/i1/44/O1CN013zKZP11CCByG5bAeF_!!44-0-lubanu.jpg"></image>
    </swiper-item>
    <swiper-item>
        <image mode="widthFix" src="//gw.alicdn.com/imgextra/i2/142/O1CN012xkybe1Cv4pztdLZm_!!142-0-lubanu.jpg"></image>
    </swiper-item>
    <swiper-item>
        <image mode="widthFix" src="//gw.alicdn.com/imgextra/i4/190/O1CN01fmyLv41DH3qg3rPgY_!!190-0-lubanu.jpg"></image>
    </swiper-item>
</swiper>

wxss文件
/* pages/demo09/demo09.wxss */
image{
    width: 100%;
}
swiper{
    width: 100%;
    height: calc(100vw * 352 / 1125);
}

3.5 navigator导航标签

<!--pages/demo11/demo11.wxml-->

<!--
    导航组件navigator 类似于html中的a标签
    注意：navigator是块级元素默认会换行 可以直接加宽度和高度
    参数
    1. url:要跳转的页面路径
    2. target 要跳转到当前的小程序 还是其他的小程序
        默认值是self 自己小程序的页面
        miniProgram 其他的小程序的页面
    3. open-type 跳转的方式
        1.navigate 默认值 保留当前页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面
        2.redirect 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar页面
        3.switchTab 跳转到tabbar页面，并关闭其他所有非tabbar页面
        4.reLaunch 关闭所有页面，打开到应用内的某个页面
 -->


<navigator url="/pages/demo09/demo09">
    跳转到轮播图页面
</navigator>
<!-- 因为open-type默认值是navigate 不能跳转到tabbar，所以不会有反应 -->
<navigator url="/pages/index/index">
    跳转到tabbar页面（我是默认值，跳不了哈哈哈）
</navigator>
<navigator open-type="redirect" url="/pages/demo09/demo09">
    我是redirect重定向到别的页面
</navigator>
<navigator open-type="switchTab" url="/pages/index/index">
    switchTab直接跳转到 tabbar页面
</navigator>
<navigator open-type="reLaunch" url="/pages/index/index">
    我是relaunch我可以随便跳转
</navigator>

navigator 导航组件 类似于超链接组件

open-type有效值:

3.6 rich-text

富文本标签 类似于vue中的v-html

示例代码

<!--pages/demo12/demo12.wxml-->
<!-- <text>pages/demo12/demo12.wxml</text> -->


<!-- 
  rich-text 富文本标签
  1 nodes属性来实现
    1 接收标签字符串 
    2 接收对象数组 
 -->
<rich-text nodes="{{html}}">
    
</rich-text>

// pages/demo12/demo12.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 1. 标签字符串 最常用
    // html:\'<div class="tpl-wrapper" data-tpl-id="m_h_v31icon_1" style="margin-top: -10px;"><div view-name="DFrameLayout" style="display: flex; overflow: hidden; height: 160px; width: 375px; place-self: flex-start; position: relative;"><div view-name="DView" style="display: flex; overflow: hidden;  margin-top: 9px; height: 100%; width: 100%; top: 0px; left: 0px; position: absolute;"></div><div view-name="HImageView" style="display: flex; overflow: hidden; height: 100%; width: 100%; position: absolute;"><div style="width: 100%; height: 100%; background-image: url(&quot;https://gw.alicdn.com/tps/TB155AUPpXXXXajXVXXXXXXXXXX-1125-480.png_.webp&quot;); background-repeat: no-repeat; background-position: center center; background-size: contain;"></div></div><div view-name="DLinearLayout" aria-label="天猫" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 10px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1Wxi2trsrBKNjSZFpXXcXhFXa-183-144.png_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫</div></div><div view-name="DLinearLayout" aria-label="聚划算" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 83.5px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://img.alicdn.com/tfs/TB10UHQaNjaK1RjSZKzXXXVwXXa-183-144.png?getAvatar=1_.webp&quot;);"></di