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 小程序基本配置目录
- pages 字段——用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录.
- 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 页面配置
作用:
- 能够修改页面导航栏外观
- 能够修改自定义属性
- 修改上拉 下拉菜单外观属性
页面配置很简单:
只需要吧需要的属性从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
})
}
})