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 switch3 do while4 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 elsewx:if wx:elif wx:else2 hidden 隐藏1 在标签上直接加入属性hidden2 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时间绑定关键字 bindinput2 如何获取 输入框的值通过事件源对象来获取通过e.detail.value3 把输入框的值 赋值给data中不能直接赋值 如： this.detail.valuethis.setData({num:e.detail.value})4 需要加入一个点击事件1 bindtap2 无法在小程序的事件中 直接传参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)//  获取自定义属性 operationconst operation = e.currentTarget.dataset.operation;this.setData({num:this.data.num+ operation})}
})