前端aka老师-你单排吧

# day01-AppId与基本语法

# 今日学习目标

1、熟悉APPID与微信开发者工具使用

2、熟练配置项目与沉浸式导航栏

3、掌握数据绑定并能实现双向数据绑定

4、掌握列表渲染与条件渲染

5、了解模板使用

6、掌握WXS的使用

# 预：微信小程序账号注册与APPID获取【了解】

访问 http://mp.weixin.qq.com/ ，并点击 立即注册 :

点击：

然后填写邮箱和密码（记住：如果你的邮箱注册过微信公众号，请重新注册一个邮箱）：

点击注册，并且登录邮箱去激活：

到邮箱中点击激活链接：

跳转到小程序官网后：

选择“个人”，然后按照要求填写：

扫码确认后，点击继续：

点击确定，就会跳转到小程序后台，这时候，点击左侧“开发”，再点击Tab栏“开发设置”，就可以获取到APPID了：

这个APPID只有自己能用，其他人是无法使用的。

# 一、微信小程序官网【了解】

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

# 二、APPID注册【了解】

从官网这里进去：

选择小程序进行注册：

然后按照流程，填写好账号密码等信息即可。

若在填写过程中，需要你选择企业类型，请选择个人。

如果依然不知道要怎么操作，请查看《微信小程序账号注册与APPID》

# 三、获取APPID【掌握】

注册后，回到登录界面，登录刚刚注册的账号，进入系统后台，找到左侧的 开发：

虽然我们的小程序在学习阶段，可以用测试号进行开发，但我们后期需要用到云开发，云开发要求必须有appid，因此，请尽快注册。

# 四、创建项目【掌握】

打开 微信开发者工具（下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html），扫码后进入到这个界面：

点击此处，新建项目，按照以下图示填选：

点击 新建，创建成功，进入到以下界面：

若未能进入此页面，请按快捷键 ctrl+R 重新编译一次即可。

# 五、工具与目录介绍【了解】

# 1、开发工具介绍

工具使用方法听讲师讲述即可。

# 2、目录介绍

我们先学习静态页面开发，再深入学习云开发。因此，我们目前只需要关注 miniprogram 目录下的内容即可。

# 六、项目总配置文件【重点】

打开 app.json 后，我们可以看到，所有的页面的创建，都在 pages 这个数组中填写：

其中，哪个页面地址写在数组的第一项，编译/刷新整个浏览器时，哪个页面就会优先显示。

# 1、创建页面

这里我们把pages下，所有页面都删掉，把这个 pages 字段也清空，我们自己来书写一个页面：

# 2、沉浸式导航栏

与 pages 同级的 window 对象，可用于控制整个小程序的沉浸式导航栏，但每个 页面也可单独配置。我们先配置整个小程序试试：

# 七、配置Home页面【重点】

打开 home.json 文件，我们尝试隐藏导航栏：

# 八、项目总预览【了解】

# 九、页面文件介绍【掌握】

pages 目录下，每个页面就是一个文件夹，一个页面包含wxml、wxss、js和json文件，其中：

  • wxml：相当于html文件
  • wxss：相当于css文件

# 1、标签

标签分单双标签，书写格式与html完全一样，但在微信小程序里，没有div、span、p、h1-h6这些标签，它只有非常简单的两个最基本的标签：view(即：div) 与 text(即：span)。当然，还有其他经过封装的组件，我们后面会再做介绍。

# 2、JavaScript

微信小程序与vue.js框架用法大致相同，同属MVVM框架，都是由数据驱动视图更新。因此，js事件和变量的书写，也会与原生JS稍有差异。

# 十、数据绑定【重点】

在 home.wxml 页面写入：

<view>{{msg}}</view>
1

在 home.js 写入：

Page({
  data: {
    msg: '你好，世界'
  }
})
1
2
3
4
5

如此，便完成了数据绑定。

可以看到，动态变化的数据，我们统一放在data里面。这里跟vue做个区别，vue中规定组件内data必须是函数，而小程序不用，使用一个对象表示即可。

小程序中，我们要记住，凡是调用data中的数据，在wxml文件使用时，就需要加 {{}}，这语法便是著名的：mustache语法，也称胡子语法。

# 十一、双向数据绑定【重点】

# 1、修改data中的数据

小程序中，使用 this.setData() 来修改data中的数据。

# 2、方法绑定

一个标签需要调用一个函数（或称：方法），需要在标签上绑定事件，如绑定触摸事件（即：pc上的点击事件）：

<button bindtap="tapFn">按钮</button>
1

然后在js中：

Page({
  data: {
    ...
  },
  tapFn(){
    // do something...
  }
})
1
2
3
4
5
6
7
8

# 3、实现双向数据绑定

我们来实现双向数据绑定：

在 home.wxml 中：

<input value="{{msg}}" bindinput="iptFn"></input>
<view>{{msg}}</view>
1
2

在js中：

Page({
  data: {
    msg: '你好，世界'
  },
  // input值被修改时触发的函数
  iptFn(e){
    this.setData({
      msg: e.detail.value
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11

# 十二、列表循环【重点】

微信小程序实现for循环有好几种方式，一种是使用block标签来循环一段代码，当然，也可以直接在要循环的那段代码的外层，直接进行 wx:for ，看个人喜好。

<!-- 方法1 -->
<view class="box">
    <view wx:for="{{arr}}" wx:key="*this">{{item}}</view>
</view>

<!-- 方法2 -->
<view class="box">
    <block wx:for="{{arr}}" wx:key="*this">
      <view>{{item}}</view>
    </block>
</view>
1
2
3
4
5
6
7
8
9
10
11

js中：

Page({
  data: {
    arr: ['张三', '李四', '王五']
  }
})
1
2
3
4
5

可以复制以上代码，到模拟器看看效果，会发现原来效果一样。

这里要注意几点：

  1. wx:key可以不写，但不写会报黄色警告；
  2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字；
  3. 每个循环都会自带 item 与 index ，不需要像vue一样写：v-for="(item, index) in arr"；
  4. 如果出现多层数组的循环，那就会出现item指向不明确，虽然小程序可以帮我们自动识别，但代码可维护性降低，因此，我们可以使用 wx:for-item="items" 来改变item的名称。

# 十三、条件渲染【重点】

# 1、wx:if

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

<view wx:if="{{condition}}"> True </view>
1

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

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

# 2、block wx:if

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>
1
2
3
4

注意： block 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

# 3、wx:if vs hidden 【了解】

因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

# 4、总结

hidden 属性用于频繁切换，切换较少时，建议使用 wx:if。用法：

wxml中：

<view hidden="{{ifShow}}">显示或隐藏</view>
1

js中：

Page({
  data: {
    ifShow: false	// 由于hidden代表一种否定（或称：取反），所以这里为false，上面的view标签才能显示
  }
})
1
2
3
4
5

# 十四、模板与引用【熟悉】

vue中有插槽的概念，小程序中有模板与引用，这两者还是比较像的。我们先来看看怎么玩。

# 1、模板创建

在 pages/home/ 目录下创建 templates 文件夹，里面用于存放模板文件。我们新建 item.wxml 文：

<template name="box1">
  <text bindtap="txtFn">box1: {{content}}</text>
</template>

<template name="box2">
  <text bindtap="txtFn">box2: {{content}}</text>
</template>
1
2
3
4
5
6
7

# 2、模板引用

模板引用分两种，一种是 可传值模板 (import)，另一种是 代码块模板 (include)，当然，这两个名称是我自己起的，为了方便大家记忆。

# * 可传值模板

在 html.wxml 中：

<import src="./templates/item.wxml" />
<template is="box1" data="{{content: txt}}"></template>
1
2

这里通过import标签引入模板，通过template标签使用模板，使用is属性来指定调用 item.wxml 中哪个模板，使用data属性来传值。

这里大家要注意，创建模板时，我们写的 bindtap="txtFn" ，实现txtFn的方法，需要写在 调用方 的js文件中，而非模板的js文件。

// home.js
Page({
  data: {
    txt: '叩丁狼H5大前端'
  },
  // 可供模板调用的方法
  txtFn(){
    console.log('打印...')
  }
})
1
2
3
4
5
6
7
8
9
10

# * 代码块模板

在 templates 目录中新建 box1.wxml 和 box2.wxml 两个模板，分别写入：

<!-- box1.wxml -->
<view>box1</view>
1
2

与

<!-- box2.wxml -->
<view>box2</view>
1
2

在 home.wxml 中调用到指定位置：

<include src="./templates/box1" />
<view>上面是box1模板，下面是box2模板</view>
<include src="./templates/box2" />
1
2
3

刷新浏览器即可看到效果。

# 十五、WXS模块【掌握】

WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内，或以 .wxs 为后缀名的文件内。

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

wxs可以说就是为了满足能在页面中使用js存在的，在wxml页面中，只能在插值中写简单的js表达式，而不能调用方法，例如想取出一个字符串的最后一位，就不能调用slice()方法。

通常的解决办法是在page的data对象中先把这个字符串截取好赋给某个变量，然后在页面中使用这个变量，但是问题又来了，如果变量多了呢，是不是要定义很多次？wxs就是弥补了这样的短处。

相对来说wxml中使用js语法就比较薄弱了，wxs就是弥补了这样的短处。

# 1、使用方法

  • 写好wxs文件 然后使用 module.exports 导出要使用的方法或变量
  • 在待使用页面 使用 <wxs src="/path" module="tools" /> 引入
  • 在插值{{}}中使用 tools.method_name(para)

# 2、实用教程

# * wxs写法1

在 home 页面下，新建 test.wxs ，并写一段截取字符串的方法：

function my_slice(str,a,b){
  return str.slice(a,b);
}
module.exports = {
  my_slice: my_slice
}
1
2
3
4
5
6

在wxml文件：

<wxs src="./test.wxs" module="tools" />
<view>
  {{tools.my_slice("123456789",0,5)}}
</view>
1
2
3
4

# * wxs写法2

在wxml文件：

<wxs module="tools">
  function add(a, b){
    var sum = a + b;
    return sum;
  }
  module.exports = {
    add: add
  };
</wxs>

<view>
  {{tools.add(3, 4)}}
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13

# 十六、作业

# 作业1（初级）

自己想办法，借助官方文档，实现自定义轮播图焦点样式，如：

# 作业2（中级）

研究vantui如何引入到小程序中，具体教程可参考教学视频： 【硬核干货】小程序+Weapp自定义TabBar (opens new window)

# 作业3（高级）

已经上手的同学可以开始将《叩丁严选》 (opens new window)项目开始首页渲染，这是贯穿小程序阶段的作业。

支付宝打赏 微信打赏
Last Updated: 12/16/2021, 5:56:10 PM

day02-咖啡馆项目实战 →