《《《【WEB前端】零基础玩转微信小程序

相关资料可以根据

资料：

链接：https://pan.baidu.com/s/17y6r44hrocXVjnPBVgJd5g
提取码：fk83 配套资料

里面的文档进行微信小程序注册和开发

微信官方文档地址

https://mp.weixin.qq.com/

微信小程序官方文档

https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html#%E7%94%B3%E8%AF%B7%E5%B8%90%E5%8F%B7

根据自己电脑选择下载开发工具https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

下载成功

安装完成使用其开发

微信小程序工具

官方地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

P7 07-全局配置文件-pages字段

一：新建一个项目demo文件夹app.js——》在pages中写"pages/demo01/demo01",保存之后自动生成文件夹demo01。因为位置是在pages中排第一个所以默认是首页

⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的 app.json和⻚⾯⾃⼰的page.json

注意：配置文件中不能出现注释

全局配置app.json

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

字段的含义

1. pages

字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序

⻚⾯定义在哪个⽬录。

2. window

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

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

P8 08-全局配置文件-window字段

二：背景

P9 09-全局配置文件-tabbar字段

tabBar和pages,window是平行关系用逗号隔开

图片文件夹icon

打开icon文件夹

把icon放到项目文件夹中

添加页面

tabBar中的list数组中中最少要有两个数组，不然提示以下错误

"tabBar": {
    "list": [
      {
        //“页面路径”：“pages文件夹/index文件夹/index.is文件(去掉js)”
        "pagePath": "pages/index/index",page/pages/mine/mine
       //“文本”：“名称”
       "text": "首页",
       //“图标路径”:“图标全称”
        "iconPath": "icon/_home.png",
       //“选择对话路径":“图片文件夹/图片全称”
        "selectedIconPath": "icon/home.png"
      },
      {
        "pagePath": "pages/img/img",
        "text": "图片",
        "iconPath": "icon/_img.png",
        "selectedIconPath": "icon/img.png"
      }
    ],

 1 {
 2   "pages": [
 3     "pages/demo01/demo01", 
 4     "pages/index/index",  
 5     "pages/img/img",
 6     "pages/mine/mine", 
 7     "pages/search/search",
 8     "pages/demo02/demo02", 
 9     "pages/logs/logs"
10   ],
11   "window": {
12     "backgroundTextStyle": "dark",
13     "navigationBarBackgroundColor": "#0094ff",
14     "navigationBarTitleText": "我的应用",
15     "navigationBarTextStyle": "black",
16     "enablePullDownRefresh": true,
17     "backgroundColor": "yellow"
18   },
19   "tabBar": {
20     "list": [
21       {
22         "pagePath": "pages/index/index",
23         "text": "首页",
24         "iconPath": "icon/_home.png",
25         "selectedIconPath": "icon/home.png"
26       },
27       {
28         "pagePath": "pages/img/img",
29         "text": "图片",
30         "iconPath": "icon/_img.png",
31         "selectedIconPath": "icon/img.png"
32       },
33       {
34         "pagePath": "pages/mine/mine",
35         "text": "我的",
36         "iconPath": "icon/_my.png",
37         "selectedIconPath": "icon/my.png"
38       },
39       {
40         "pagePath": "pages/search/search",
41         "text": "搜索",
42         "iconPath": "icon/_search.png",
43         "selectedIconPath": "icon/search.png"
44       },45     ],
46   },
47   "sitemapLocation": "sitemap.json"
48 }

页面

有时候页面加载不出来，清理下缓存，退出程序重新登录就可以

P10 10-页面配置文件

这⾥的 page.json其实⽤来表⽰⻚⾯⽬录下的 page.json这类和⼩程序⻚⾯相关的配置。

开发者可以独⽴定义每个⻚⾯的⼀些属性，如顶部颜⾊、是否允许下拉刷新等等。

⻚⾯的配置只能设置 app.json中部分 window配置项的内容，⻚⾯中配置项会覆盖 app.json的 window中相同的配置项。

P11 11-sitmap配置

⼩程序根⽬录下的 sitemap.json⽂件⽤于配置⼩程序及其⻚⾯是否允许被微信索引。

P12 12-数据绑定前的代码编辑器技巧

在app.json中的pages中添加一个"pages/demo03/demo03"

P13 13-数据绑定

1.1. 普通写法

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
 }
})

1.2. 组件属性

<view id="item-{{id}}"> </view>

Page({
  data: {
    id: 0
 }
})

1.3. bool类型

不要直接写 checked=false，其计算结果是⼀个字符串

<checkbox checked="{{false}}"> </checkbox>

点击Wxml从控制台查看相关信息

相关代码dome03.wxml

  1 <!-- 
  2   1 text 相当于以前web中的 span标签 行内元素  不会换行
  3   2 view 相当于以前web中的 div标签 块级元素  会换行
  4   3 checkbox 以前的复选框标签 
  5  -->
  6 <!-- <text>1</text>
  7 <text>2</text>
  8 <view>1</view>
  9 <view>2</view> -->
 10 
 11 <!-- 1 字符串 -->
 12 <view> {{msg}} </view>
 13 <!-- 2 数字类型 -->
 14 <view>{{num}}</view>
 15 <!-- 3 bool类型  -->
 16 <view> 是否是伪娘: {{isGirl}} </view>
 17 <!-- 4 object类型 -->
 18 <view>{{person.age}}</view>
 19 <view>{{person.height}}</view>
 20 <view>{{person.weight}}</view>
 21 <view>{{person.name}}</view>
 22 
 23 <!-- 5 在标签的属性中使用 -->
 24 <view data-num="{{num}}"> 自定义属性</view>
 25 
 26 <!-- 
 27   6 使用bool类型充当属性 checked  
 28     1 字符串和 花括号之间一定不要存在空格 否则会导致识别失败 
 29       以下写法就是错误的示范
 30          <checkbox checked="       {{isChecked}}"> </checkbox>
 31 
 32  -->
 33 <view>
 34   <checkbox checked="{{isChecked}}"> </checkbox>
 35 </view>
 36 
 37 
 38 <!-- 
 39   7 运算 => 表达式
 40     1 可以在花括号中 加入 表达式 --  “语句”
 41     2 表达式
 42       指的是一些简单 运算 数字运算 字符串 拼接  逻辑运算。。
 43       1 数字的加减。。
 44       2 字符串拼接
 45       3 三元表达式 
 46     3 语句
 47       1 复杂的代码段
 48         1 if else
 49         2 switch
 50         3 do while 。。。。
 51         4 for 。。。
 52  -->
 53 <view>{{1+1}}</view>
 54 
 55 <view>{{'1'+'1'}}</view>
 56 
 57 <view>{{ 11%2===0 ? '偶数' : '奇数' }}</view>
 58 
 59 
 60 <!-- 
 61   8 列表循环
 62     1 wx:for="{{数组或者对象}}"  wx:for-item="循环项的名称"  wx:for-index="循环项的索引"
 63     2 wx:key="唯一的值" 用来提高列表渲染的性能
 64       1 wx:key 绑定一个普通的字符串的时候 那么这个字符串名称 肯定是 循环数组 中的 对象的 唯一属性
 65       2 wx:key ="*this"  就表示 你的数组 是一个普通的数组  *this 表示是 循环项 
 66         [1,2,3,44,5]
 67         ["1","222","adfdf"]
 68     3 当出现 数组的嵌套循环的时候 尤其要注意  以下绑定的名称 不要重名
 69         wx:for-item="item" wx:for-index="index"
 70     4 默认情况下 我们 不写
 71        wx:for-item="item" wx:for-index="index"
 72        小程序也会把 循环项的名称 和 索引的名称 item 和 index 
 73        只有一层循环的话 （wx:for-item="item" wx:for-index="index"） 可以省略
 74 
 75   9 对象循环
 76     1 wx:for="{{对象}}" wx:for-item="对象的值"  wx:for-index="对象的属性"
 77     2 循环对象的时候 最好把 item和index的名称都修改一下
 78       wx:for-item="value"  wx:for-index="key"
 79 
 80  -->
 81  <view>
 82    <view 
 83   wx:for="{{list}}"
 84   wx:for-item="item"
 85   wx:for-index="index"
 86   wx:key="id"
 87    >
 88      索引：{{index}}
 89      --
 90      值:{{item.name}}
 91    </view>
 92  </view>
 93 
 94  <view>
 95    <view>对象循环</view>
 96    <view 
 97   wx:for="{{person}}"
 98   wx:for-item="value"  
 99   wx:for-index="key"
100   wx:key="age"
101   >
102      属性:{{key}}
103      --
104      值:{{value}}
105    </view>
106  </view>
107 
108  <!-- 
109    10 block
110     1 占位符的标签 
111     2 写代码的时候 可以看到这标签存在
112     3 页面渲染 小程序会把它移除掉
113   -->
114 
115   <view>
116     <block 
117    wx:for="{{list}}"
118    wx:for-item="item"
119    wx:for-index="index"
120    wx:key="id"
121    class="my_list"
122     >
123       索引：{{index}}
124       --
125       值:{{item.name}}
126     </block>
127   </view>
128 
129 
130 
131   <!-- 
132     11 条件渲染
133       1 wx:if="{{true/false}}"
134         1 if , else , if else
135         wx:if
136         wx:elif
137         wx:else 
138       2 hidden 
139         1 在标签上直接加入属性 hidden 
140         2 hidden="{{true}}"
141 
142       3 什么场景下用哪个
143         1 当标签不是频繁的切换显示 优先使用 wx:if
144           直接把标签从 页面结构给移除掉 
145         2 当标签频繁的切换显示的时候 优先使用 hidden
146           通过添加样式的方式来切换显示 
147           hidden 属性 不要和 样式 display一起使用
148    -->
149 
150    <view>
151      <view>条件渲染</view>
152      <view wx:if="{{true}}">显示</view>
153      <view wx:if="{{false}}">隐藏</view>
154 
155      <view wx:if="{{flase}}">1</view>
156      <view wx:elif="{{flase}}">2 </view>
157      <view wx:else> 3 </view>
158 
159      <view>---------------</view>
160      <view hidden >hidden1</view>
161      <view hidden="{{false}}" >hidden2</view>
162 
163      <view>-----000-------</view>
164      <view wx:if="{{false}}">wx:if</view>
165      <view hidden  style="display: flex;" >hidden</view>
166    </view>

dome03.wxml

P14 14-运算

代码见相关代码dome03.wxml

P15 15-数组和对象循环

显示

代码见相关代码dome03.wxml

报错信息放大

处理报错信息

<!-- 
  8 列表循环
    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"） 可以省略

  9 对象循环
    1 wx:for="{{对象}}" wx:for-item="对象的值"  wx:for-index="对象的属性"
    2 循环对象的时候 最好把 item和index的名称都修改一下
      wx:for-item="value"  wx:for-index="key"

 -->

 <view>
   <view 
  wx:for="{{list}}"
  wx:for-item="item"
  wx:for-index="index"
  wx:key="id"
   >
     索引：{{index}}
     --
     值:{{item.name}}
   </view>
 </view>

P16 16-block标签的使用

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

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

P17 17-条件渲染

 <!-- 
    11 条件渲染
      1 wx:if="{{true/false}}"
        1 if , else , if else
        wx:if
        wx:elif
        wx:else 
      2 hidden 
        1 在标签上直接加入属性 hidden 
        2 hidden="{{true}}"

      3 什么场景下用哪个
        1 当标签不是频繁的切换显示 优先使用 wx:if
          直接把标签从 页面结构给移除掉 
        2 当标签频繁的切换显示的时候 优先使用 hidden
          通过添加样式的方式来切换显示 
          hidden 属性 不要和 样式 display一起使用
   -->

7.4.1. wx:if 在框架中，使⽤ wx:if="{{condition}}" 来判断是否需要渲染该代码块：
<view wx:if="{{false}}">1</view>
  <view wx:elif="{{true}}">2</view>
  <view wx:else>3</view>
7.4.2. hidden
<view hidden="{{condition}}"> True </view>
类似 wx:if
频繁切换 ⽤ hidden
不常使⽤ ⽤ wx:if

P18 18-事件绑定1

效果图

说明：点击加号下面数字增加，点击减号下面数字减少

新建一个页面demo04

找到js文件，只保留data其他删除

绑定事件

js代码

// pages/demo04/demo04.js
Page({
  data: {
    num: 0
  },
  // 输入框的input事件的执行逻辑
  handleInput(e) {
    // console.log(e.detail.value );
    this.setData({
      num: e.detail.value
    })
  },
  // 加 减 按钮的事件
  handletap(e) {
    // console.log(e);
    // 1 获取自定义属性 operation
    const operation = e.currentTarget.dataset.operation;
    this.setData({
      num: this.data.num + operation
    })
  }
})

html代码

<!-- 
  1 需要给input标签绑定 input事件 
    绑定关键字 bindinput
  2 如何获取 输入框的值 
    通过事件源对象来获取  
    e.detail.value 
  3 把输入框的值 赋值到 data当中
    不能直接 
      1 this.data.num=e.detail.value 
      2 this.num=e.detail.value 
    正确的写法
      this.setData({
        num:e.detail.value 
      })
  4 需要加入一个点击事件 
      1 bindtap
      2 无法在小程序当中的 事件中 直接传参 
      3 通过自定义属性的方式来传递参数
      4 事件源中获取 自定义属性
 -->
<input type="text" bindinput="handleInput" />
<button bindtap="handletap" data-operation="{{1}}" >+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>  
  {{num}}
</view>

新增demo05界面

小程序中不需要主动引入样式文件的

/* 
1 小程序中 不需要主动来引入样式文件 
2 需要把页面中某些元素的单位 由 px 改成 rpx
  1 设计稿 750x
    750 px = 750 rpx 
    1 px = 1 rpx
  2 把屏幕宽度 改成 375px
    375 px = 750 rpx
    1 px = 2rpx
    1rpx = 0.5px
3 存在一个设计稿 宽度 414 或者 未知 page 
  1 设计稿 page 存在一个元素 宽度 100px
  2 拿以上的需求 去实现 不同宽度的页面适配 

  page px = 750 rpx
  1 px = 750 rpx / page
  100 px = 750 rpx * 100 / page 
  假设  page =  375px
4 利用 一个属性 calc属性  css 和 wxss 都支持 一个属性
  1 750 和 rpx 中间不要留空格
  2 运算符的两边也不要留空格
 */

 view{
   /*  200rpx; */
   height: 200rpx;
   font-size: 40rpx;
   background-color: aqua;
  /* 以下代码写法是错误  */
  /*  750 rpx * 100 / 375 ;  */
/* 正确写法  */
  calc(750rpx * 100 / 375);
 }

P21 21-样式-导入

../为上一层

wxml中

P22 22-样式-选择器和使用less

特别需要注意的是⼩程序不⽀持通配符 *

因此以下代码⽆效！

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

⽬前⽀持的选择器有：

⼩程序中使⽤less

原⽣⼩程序不⽀持 less

，其他基于⼩程序的框架⼤体都⽀持，如 wepy

， mpvue

， taro

等。

但是仅仅因为⼀个less功能，⽽去引⼊⼀个框架，肯定是不可取的。因此可以⽤以下⽅式来实现

1. 编辑器是 vscode

2. 安装插件 easy less

3. 在vs code的设置中加⼊如下，配置

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

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

在vscode（Visual Studio Code）安装easy less

**便捷页面总结***************************************************************

视频：

转载地址:https://www.bilibili.com/video/BV1nE41117BQ?from=search&seid=15496098363456658238

资料：

链接：https://pan.baidu.com/s/17y6r44hrocXVjnPBVgJd5g
提取码：fk83 配套资料

接口档案：https://www.showdoc.cc/128719739414963?page_id=2612486239891213