# 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. 每个循环都会自带 itemindex ,不需要像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:elifwx: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.wxmlbox2.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