My first wechat app
小程序目录
- My first wechat app
- 一、微信小程序
- 1.1 微信小程序历史
- 1.2 环境准备
- 1.2.1 注册账号
- 1.2.2 获取APPID
- 1.2.3 微信开发者工具下载地址
- 1.2.4 创建项目
- 1.2.5 微信开发者工具介绍
- 二、小程序结构
- 2.1 文件结构和web结构对比
- 2.1.1 小程序基本配置目录
- 2.1.1.1 新建页面
- 2.1.1.2 window字段介绍
- 2.1.1.3 tabBar字段介绍
- 2.1.2 页面配置
- 2.1.3 小程序配置文件
- 2.1.3.1 sitemap配置(了解)
- 三、模板语法
- 3.1数据绑定
- 3.2 运算
- 3.2.1 运算符
- 3.3 列表渲染
- 3.3.1 wx:for
- 3.3.2 block
- 3.4 条件渲染
- 4.1 小程序事件的绑定
一、微信小程序
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数据绑定
<text>hello worldtext>
<view>我是demo3view>
代码示例:
Page({
/**
* 页面的初始数据
*/
data: {
msg: "hello world",
number: 999,
isgirl: false,
person: {
age: 18,
name: '崔云飞',
height: 180
},
ischecked:true
},
})
{{msg}}
{{number}}
{{isgirl}}
{{person.name}}
{{person.age}}
{{person.height}}
自定义属性
3.2 运算
3.2.1 运算符
<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 条件渲染
{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}}">1view>
<view wx:elif="{{false}}">2view>
<view wx:else="{{true}}">3view>
<view hidden>我会被隐藏view>
<view hidden="{{false}}">我会显示view>
<view hidden style="display:flex;">设置display之后会隐藏吗view>
view>
4.1 小程序事件的绑定
小程序中绑定事件,通过bind关键字来实现。如 bindtap bindinput bindchange等
不同的组件支持不同的事件,具体看组件的说明即可。
代码示例:
<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
})
}
})