一、微信开发者工具下载
首先进入微信公众号平台网页:https://mp.weixin.qq.com/ ,
然后申请一个微信小程序账号,
其次下载微信开发者工具,
最后新建一个小程序的项目。如图所示:
二、微信开发者工具结构配置介绍
2.1、文件结构
一个小程序包含一个描述整体程序的app和多个描述各个页面的pages。
一个小程序主体由三个文件组成,必须放在项目的根目录下:
app.js:小程序逻辑文件
app.json: 小程序公共设置(主体配置文件)
app.wxss:小程序公共样式表(全局样式) (可以删除)
一个小小程序page页面由四个文件组成,分别是:
js:页面逻辑
wxml:页面结构
wxss:页面样式(可以删除)
json:页面配置(可以删除)
utils:工具目录(可以删除),实现了模块化工具类,工具函数。
sitemap.json:小程序搜索所用。
project.config.json:编辑器配置。
2.2、小程序配置app.json
app.json 文件用来对小程序进行全局配置,决定小程序的页面数量、窗口表现、设置网络超时时间、设置底部或顶部菜单等。
app.json 中不能添加任何注释,key 和 value 字符串必须用双引号引起来,数组或对象最后一位不能有逗号。
2.2.1、app.json 配置项列表
2.2.2、pages
"pages":[
"pages/index/index", // 数组第一项,小程序的初始页面。
"pages/logs/logs"
],
pages指定由哪些页面组成,每一项代表对应页面【路径+目录名+文件名】。
pages数组的第一项代表小程序的初始页面(首页/展示页)。
小程序中新增/减少页面,都需要对pages数组进行修改 。
2.2.3、window
用于设置小程序的状态栏、导航条、标题、窗口背景色。
"window":{
"enablePullDownRefresh": true, //是否开启开启全局的下拉刷新 true开启,false关闭。
"backgroundColor":" #ccc", //窗口的背景色
"backgroundTextStyle":"light", //下拉loading 的样式,仅支持dark和light
"navigationBarBackgroundColor": "#fff", //导航栏背景色
"navigationBarTitleText": "Weixin", //导航栏标题文字内容
"navigationBarTextStyle":"black" //导航栏标题颜色,仅支持白色(white)和黑色(black)
},
2.2.4、tabBar
设置小程序的底部或顶部菜单栏。
注释:当设置position 为top 时,将不会显示icon图标。
当tabBar 中的list是一个数组,只能配置最少2个、最多5个菜单。
"tabBar": {
"color": "#999", //tab上文字默认颜色,仅支持十六进制颜色
"selectedColor": "", //tab 上的文字选中时的颜色,仅支持十六进制颜色
"backgroundColor": "", //tab 的背景色,仅支持十六进制颜色
"position":"bottom" , //tabBar 的位置,仅支持
bottom
/top
"borderStyle": "black", //tabbar 上边框的颜色, 仅支持
black
/white
"list": [
{
"pagePath": "pagePath",//页面路径
"text": "text", //页面文字
"iconPath": "iconPath", //默认图标路径
"selectedIconPath": "selectedIconPath" //选中图标路径
},
{
"pagePath": "pagePath",//页面路径
"text": "text", //页面文字
"iconPath": "iconPath", //默认图标路径
"selectedIconPath": "selectedIconPath" //选中图标路径
}
]
},
2.2.5、networkTimeout
可以设置各种网络请求的超时时间,单位毫秒。
"networkTimeout": {
:"request": 10000 //发起HTTP请求的超时时间 10s (一般设置5s:5000毫秒)
},
"debug": false, 一般设置为false 不开启
三、生命周期
由框架自己触发的一系列事件函数,不需要人来参与。
.onLoad(Object[json] query)
页面加载时触发,一个页面只会调用一次,可以在onLoad的参数中获取打开当前页面路径中的参数。
参数说明:
query:object类型,打开当前页面路径中的参数 json对象
.onShow()
页面显示/切入前台时触发,一个页面可以触发很多次。
.onReady()
页面初次渲染完成时触发。一个页面只会调用一次
.onHide()
页面隐藏/切入后台时触发,一个页面可以触发多次。
.onUnload()
页面卸载时触发。
四、视图结构wxml
4.1、wxml的概述
HTML是用来描述当前这个页面的结构,同样道理,在小程序中WXML就充当HTML的角色。
小程序提倡把渲染和逻辑分离,简单来说就是不要再让JS直接操控DOM,JS中只负责数据的处理,然后在通过一种模板语法来警醒界面结构展示。
在视图层中通过{{ }}语法把一个标量绑定到视图界面上,称为数据绑定。
<view>{{ 变量 }} </view>
当然仅仅通过数据绑定还是不够,还需要if/else 、 for 等控制能力,在小程序里边,这些控制能力都用 wx: 开头的属性来表达。
例如:wx:if
wx:for
bind.wxml 中
<!--view组件 相当于HTML中的div 容器 盒子-->
<view>{{ name }}</view>
bind.js 中
data: {
name:'张三'
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//方法:逻辑层的数据刷新到视图层 this .setData({变量名:值})
/** var _this=this;
setTimeout(function(){
_this.setData({
name:'李四'
})
},1500);*/
setTimeout(() =>{
this.setData({
name:'李四'
})
},1500);
},
解决this指向问题:如果只有一个参数则小括号可以不写,
如果只有一个返回则大括号可以不写。
逻辑层刷新到视图层
this.setData({ key:value })
一定手动触发
4.2、列表渲染 for
语法:wx:for 循环
wx:for-index 可以指定数组当前下标的变量名 默认名为index
wx:for - item 可以指定数组当前元素的变量名 默认名为item
wx:key 可以定义也可以不定义 唯一的标识符 提高性能。
<!--<view wx:for="{{ users }}"> //item 默认值
<view>ID:{{ item.id }}</view>
<view>姓名:{{ item.name }}</view>
<view>年龄:{{ item.age }}</view>
</view>
-->
<!-- 指定循环元素的对象名称-->
<view wx:for="{{ users }}" wx:for-item="val">
<view>ID: {{ index }}--{{ val.id }}</view>
<view>姓名:{{ val.name }}</view>
<view>年龄:{{ val.age }}</view>
</view>
<!-- 指定循环元素的索引(key)名称-->
<view wx:for="{{ users }}" wx:for-item="val" wx:for-index="key">
<view>ID:{{ key }}--{{ val.id }}</view>
<view>姓名:{{ val.name }}</view>
<view>年龄:{{ val.age }}</view>
</view>
<!-- 指定循环key wx:key-->
<view wx:for="{{ users }}" wx:for-item="val" wx:for-index="key" wx:key="users">
<view>ID:{{ key }}--{{ val.id }}</view>
<view>姓名:{{ val.name }}</view>
<view>年龄:{{ val.age }}</view>
</view>
<!-- 书写属性但不解析组件 Vue中和它有相同功能的是template-->
<block wx:for="{{ users }}" wx:for-item="val" wx:for-index="key" wx:key="users">
<view>
<view>ID:{{ key }}--{{ val.id }}</view>
<view>姓名:{{ val.name }}</view>
<view>年龄:{{ val.age }}</view>
</view>
</block>
4.3、条件渲染
语法:wx:if
在框架中,使用wx:if="{{ condition }}" 来判断是否需要渲染该代码块,也可以用 wx:elif 和 wx:else 来添加一个else块。
<!--if语法块中不能有其他的组件 -->
<block wx:if="{{ age <= 10}}">
<view>儿童</view>
</block>
<block wx:elif="{{ age <= 20}}">
<view>少年</view>
</block>
<block wx:elif="{{ age <= 50}}">
<view>青年</view>
</block>
<block wx:else>
<view>夕阳红</view>
</block>
4.4、引用(包含)
把模板定义到外部,然后多个页面间可以共同使用定义的模板WXML结构显示。
WXML提供两种文件引用方式import 和 include。
4.4.1、模板
定义template
<template name="名称">
wxml语法b
</template>
调用
<template is="模板定义时的name名称" [data="{{传给参数模板的数据参数}}"]/>
在哪个页面定义就在哪个页面调用,不可以调用其他页面。
在template.js中
data: {
item:{id:1, name:'李四', age:20}
},
在template.wxml中
<!-- 定义静态模板-->
<template name="user">
<view>
<view>ID: 1</view>
<view>姓名:张晓明</view>
<view>年龄:18</view>
</view>
</template>
<!-- 调用静态模板-->
<!--<template is="user" />
<template is="user" />
<template is="user" />
-->
<!-- 定义动态模板-->
<template name="user">
<view>
<view>ID: {{item.id}}</view>
<view>姓名: {{item.name}}</view>
<view>年龄: {{item.age}}</view>
</view>
</template>
<!-- 调用动态模板-->
<!--<template is='user' data="{{item}}" />-->
<!-- es6中的参数展开-->
<template name="user">
<view>
<view>ID: {{id}}</view>
<view>姓名: {{name}}</view>
<view>年龄: {{age}}</view>
</view>
</template>
<!-- 调用动态模板(利用参数展开)-->
<template is='user' data="{{...item}}" />
4.4.2、include和import引用
include引用:
在user.wxml 中和在tmpl2.wxml中
<!-- include 引用,就是直接将代码块复制到需要的地方-->
<view>
<view>ID: {{item.id}}</view>
<view>姓名: {{item.name}}</view>
<view>年龄: {{item.age}}</view>
</view>
<!-- 引用 include 动态文件资源(js,wxs)用相对地址 ,静态文件资源(wxml,wxss)用绝对地址-->
<include src="/tmpl/user.wxml" />
import引用:
在user_import.wxml 中
<template name="user">
<!-- import就是真正引用,相当于在此处定义函数 -->
<view>
<view>ID1: {{item.id}}</view>
<view>姓名: {{item.name}}</view>
<view>年龄: {{item.age}}</view>
</view>
</template>
<template name="user2">
<!-- import就是真正引用,相当于在此处定义函数 -->
<view>
<view>ID2: {{id}}</view>
<view>姓名: {{name}}</view>
<view>年龄: {{age}}</view>
</view>
</template>
在tmpl2.wxml中
<!-- 引用import -->
<import src="/tmpl/user_import.wxml"/>
<!-- 调用 -->
<template is="user" data="{{item}}"></template>
<template is="user2" data="{{...item}}"></template>
import和include的区别:
- 定义方式不一样。
- 引用方式不一样,include相当于复制代码过来,import相当于调用函数。
- 数据的传递不一样,include直接获取js中的数据,import必须通过template date 属性获取。
五、小程序的样式
5.1、概述
WXSS用来决定WXML的组件应该怎么显示。说白了就是样式。
为了适应广大的前端开发者,WXSS具有CSS大部分特性。同时为了更适合开发小程序,WXSS对CSS进行了扩充以及修改。
- 新增加了尺寸单位:WXSS在底部层支持新的尺寸单位rpx 响应式尺寸单位rem
- 。小程序中全屏尺寸数值是:750rpx。
- 提供了全局的样式和局部的样式:app.wxss作为全局样式。局部页面样式page.wxss仅对当前页面生效,app.wxss < page.wxss < 行级。
- 此外WXSS仅支持部分CSS选择器。
5.2、选择器
目前支持的选择器有:
选择器 | 样例 | 样例描述 |
.class | .intro | 选择所有拥有class="intro"的组件 |
#id | #firstname | 选择拥有id="firstname"的组件 |
element | view | 选择所有view的组件 |
element,element | view,CheckBox | 选择所有文档的view组件和所有的CheckBox组件 |
::after | view::after | 在view组件后边插入内容 |
::before | view::before | 在view组件前边插入内容 |
5.3、样式导入
使用@import 语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
在样式表中引入@import路径。
第一步 :定义外部样式
@font-face {font-family: "iconfont";
src: url('//at.alicdn.com/t/font_2354477_mqaigy1h4fa.eot?t=1611823437981'); /* IE9 */
src: url('//at.alicdn.com/t/font_2354477_mqaigy1h4fa.eot?t=1611823437981#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMkAAsAAAAABvQAAALXAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBeIFtATYCJAMICwYABCAFhG0HNhsZBsiemjwhAgoiACAbM4PDTQTRfr/Z9+6rkVSjNs+i3awEQiNGUiF7JvO/Ou0XiFWi0FYCMMgOK09RSnRINN0GBFvHW5vMxIRPgPx/n+dyetdYQvMD5bbWprHoMMB4Wy/QvSwKOJACC0Abxi54gbcJVI3K4rBXWd8O7hJ7USCedTIH7oWYJLFiWSg27EyODpvBRTlb4/gEeI2+H7804Q4yhRzslYe3FSIUf8A/Ti/2F+gPCJAv5wHbR45lIBGnjb59TklumZOqnnM2CY5VGXywHzjEUf88UQS7vA6GoeyZ5J7iUcszkODoKXAx6XdJnQCFs7DuxpkDc/tPX1978+zB+UPnbnGl04bWndizO7h9/21P3w6/dTB3OsV37dn6NaGd7zo9157cu9dh/lyyV7c7JGKHe0aMydxhqtcGZe/+lfqLIi12T1RXzEOHoII9Pyu8wtS3+inmUUX00rtyTv3XD7MxkT59ruqM4MLLEcFXs44qlEuBd+EzDX6Nj6s8Q+4OyyHrX6YXh8UWdO7snXNIvB0KsAX89xmnxbz8Jz/m7+DRIb/8/+5ezgDvG3sbkHQY1xkCoHwrjvBLxyVneySutHNZAjpaAplTsy7MUFXFPxTq+jbVNLj/UigbvEWgZCRDrmyaTMxlFNSsoKhsE1VLqvbX9FBOInkAi1YAhLZLyDS9Idf2lEzMrygYsoiidjih6jyCTqyZDZ1nGcUcwyLix5FOIGbJdTLPuLIVyzYjR/PKiN+JqVWXRGqFqlyswmZMl1hjHZE1jElIosSEKsF92GgkyEKJHgtMoWXMkqtUSk0vUgjEBJ52URiHwUQIbxyiIyDMpKAz41n5fCtMZmPEoR2UumQnjLLSTY6oKagGkFU68yDKozxjNUKmwTASREIRJkgl8GBGJ0cgluZpepiAUdBOyFjkUqJ20lCdYnuD6e92QZVtzsLZ7AT1O2IbtQlabCBmGQAA') format('woff2'),
url('//at.alicdn.com/t/font_2354477_mqaigy1h4fa.woff?t=1611823437981') format('woff'),
url('//at.alicdn.com/t/font_2354477_mqaigy1h4fa.ttf?t=1611823437981') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('//at.alicdn.com/t/font_2354477_mqaigy1h4fa.svg?t=1611823437981#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-gouwuchekong:before {
content: "\e600";
}
.icon-gouwuchekong2:after {
content: "\e600";
}
第二步:在需要引用样式的文件中引入 @import 绝对地址。
@import '/style/font.wxss';
/*页面全局样式*/
page{
background: #abcdef;
}
.font30{
font-size: 30px;
}
<view class="iconfont font30 icon-gouwuchekong"></view>