web前端开发之微信小程序

My first wechat app

一、微信小程序

1.1 微信小程序历史

• 2016年1月11日，微信之父张小龙时隔多年的公开亮相，解读了微信的四大价值观。张小龙指出，越来越多产品通过公众号来做，因为这里开发、获取用户和传播成本更低。拆分出来的服务号并没有提供更好的服务，所以微信内部正在研究新的形态，叫「微信小程序」需要注意的是，之前是叫做应用号
• 2016年9月21日，微信小程序正式开启内测。在微信生态下，触手可及、用完即走的微信小程序引起广泛关注。腾讯云正式上线微信小程序解决方案，提供小程序在云端服务器的技术方案。
• 2017年1月9日，微信推出的"小程序"正式上线。“小程序"是一种无需安装，即可使用的手机应用”。不需要像往常一样下载App，用户在微信中"用完即走”。

1.2 环境准备

1.2.1 注册账号

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

1.2.2 获取APPID

由于后期调用微信小程序的接口等功能，需要索取开发者的小程序中的APID，所以在注册成功后，可登录，然后获取APPID。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XdhpZTKQ-1609125711566)(C:\Users\20140\Desktop\QQ截图20201228104632.png)]

1.2.3 微信开发者工具下载地址

下载地址

1.2.4 创建项目

1.2.5 微信开发者工具介绍

二、小程序结构

小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。

小程序框架提供了自己的视图层描述语言 wxNL和wxss，以及lavaScript，并在视图层与逻扣层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

2.1 文件结构和web结构对比

结构	传统web	微信小程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	JavaScript	JavaScript
配置	无	JSON

2.1.1 小程序基本配置目录

1. pages 字段——用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录.
2. window字段——定义小程序所有页面的顶部背景颜色，文字颜色定义等。

2.1.1.1 新建页面

在app.json中找到pages新增页面即可

可调整顺序 保存之后即可新建页面

2.1.1.2 window字段介绍

"backgroundTextStyle":"dark"    --下拉刷新小圆点颜色 只支持light和dark
"navigationBarBackgroundColor": "#0094FF",  --设置导航栏颜色
"navigationBarTitleText": "我的应用",	--设置导航栏简介
"navigationBarTextStyle":"white"	 --设置导航栏文字颜色（只支持黑白）
"enablePullDownRefresh": true    --刷新功能 默认为false
"backgroundColor": "#eee"			--下拉刷新框的背景色

2.1.1.3 tabBar字段介绍

简记：底部导航

"pagePath": "pagePath",    --页面路径（要跳转的页面）
"text": "text",				--标题 底部导航的字
"iconPath": "iconPath",		--未选中状态的图标
"selectedIconPath": "selectedIconPath" 		--选中状态的图标

与“list"同级的常用属性

"color": "#0094ff",    --未选中字体颜色
"selectedColor": "#ff9400",    --选中字体颜色  只支持16进制颜色
"backgroundColor": "#ff5533",    --背景颜色
"position": "top"	--导航在上还是在下 如果在上 图标不展示

2.1.2 页面配置

作用：

1. 能够修改页面导航栏外观
2. 能够修改自定义属性
3. 修改上拉 下拉菜单外观属性

页面配置很简单：

只需要吧需要的属性从window字段中复制到你需要修改的文件夹下的json文件中即可

2.1.3 小程序配置文件

2.1.3.1 sitemap配置(了解)

小程序根目录下的sitemap. json文件用于配置小程序及其页面是否允许被微信索引.

三、模板语法

WXML (Weixin Markup Language)是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

3.1数据绑定

<!--
  1 text相当于之前的span标签
  2 view 相当于之前的div标签
  3 checkbox就是以前的复选框
-->
<text>hello world</text>
<view>我是demo3</view>

代码示例：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg: "hello world",
    number: 999,
    isgirl: false,
    person: {
      age: 18,
      name: '崔云飞',
      height: 180
    },
    ischecked:true
  },
})

<!-- 1 字符串 -->
<view> {{msg}} </view>
<!-- 2 数字类型 -->
<view> {{number}} </view>
<!-- 3 布尔类型 -->
<view>{{isgirl}}</view>
<!-- 4 对象类型 -->
<text>{{person.name}}</text>
<text>{{person.age}}</text>
<text>{{person.height}}</text>
<!-- 5 在标签的属性中使用 -->
<view data-number="{{number}}">自定义属性</view>
<!-- 
  6 使用布尔类型充当属性 checked 
    字符串和花括号之间一定不要加空格 否则会导致识别失败
-->
<view>
  <checkbox checked="{{ischecked}}"></checkbox>
</view>

3.2 运算

3.2.1 运算符

<!-- 
  7 运算 => 表达式
    1 可以在花括号中加入一些表达式
    2 表达式
          指的是一些简单 运算 数字运算 字符串 拼接 逻辑运算
          1 数字的加减
          2 字符串拼接
          3 三元表达式
    3 语句
        1 复杂的代码段
        2 switch
        3 do while
        4 for
 -->
 <view>{{1+1}}</view>
 <view>{{'1'+'1'}}</view>
 <view>{{11%2==0 ? '偶数' : '奇数'}}</view>

3.3 列表渲染

3.3.1 wx:for

<!-- 
   8 列表循环
      1 wx:for="{{数组或者对象}}"  wx:for-item="循环项的名称"  wx:for-index="循环项的索引"
      2 wx:key="唯一的值" 用来提高列表渲染的性能
          1 wx:key 绑定一个蒲婷的字符串的时候 那么这个字符串名称 肯定是 循环数组中的 对象的 唯一属性
          2 wx:key ="*this" 就表示 你的数组 是一个普通数组 *this 表示是 循环箱
              [1,2,3,4,5]
              ["1","23","aseff"]
      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 wx:for-item="value" wx:for-index="key"

  -->

例子：

<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index"  wx:key="id">
      索引：{{index}} -- 值{{item.name}},{{item.age}}
  </view>
-------分割线-------
  <view wx:for="{{list}}" wx:key="id">
      索引：{{index}} -- 值{{item.name}},{{item.age}}
  </view>
  -------------分割线-------
  <view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="age">
      键:{{key}} -- 值：{{value}}
  </view>

我们可以看到：

3.3.2 block

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

作用：

1 占位符标签

2 写代码的时候 可以看到标签存在

3 页面渲染时 小程序会把他移除

示例：

3.4 条件渲染

<!-- 
  11 条件渲染
      1 wx:if="{{true/false}}"
        1 if elif else
          wx:if 
          wx:elif 
          wx:else
      2 hidden 隐藏
        1 在标签上直接加入属性hidden
        2 hidden="{{true}}"
      3 什么场景下用哪个
        1 当标签不频繁切换显示 使用 wx:if
          直接删除标签
        2 当标签频繁切换显示 使用 hidden
          通过添加样式的方式切换
        不能和display一起使用
 -->

代码示例：

<view>
  <view>----------条件渲染----------</view>
  <view wx:if="{{true}}">显示</view>
  <view wx:if="{{false}}">隐藏</view>

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

  <view hidden>我会被隐藏</view>
  <view hidden="{{false}}">我会显示</view>

  <view hidden style="display:flex;">设置display之后会隐藏吗</view>
</view>

4.1 小程序事件的绑定

小程序中绑定事件，通过bind关键字来实现。如 bindtap bindinput bindchange等

不同的组件支持不同的事件，具体看组件的说明即可。

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

代码示例：

<input type="text" bindinput="handleInput" />
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>
  {{num}}
</view>

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