文章目录
帐号设置
官网: https://mp.weixin.qq.com/
申请成功后,回到网站首页,使用注册的邮箱账号和密码(或微信扫码)进入到微信小程序官方控制平台中。
进入微信小程序官方控制平台后,主要为了得到开发所要用到的appid
和secret
这两项值。这两项值后续需要用到:
需要注意:AppSecret不会明文存储并显示在页面上,需要点击生成
按钮在显示弹窗后自行保存并记录,一旦离开当前页面(或刷新)就无法查看已经生成的AppSecret,只能对原先的进行重置。
微信开发者工具
1、工具的下载与安装
工具集成了公众号网页调试和小程序调试两种开发模式,开发者可以编译小程序在电脑上看到模拟器编译效果,此处根据电脑类型自行下载如下:
2、helloworld项目
在桌面上双击运行微信开发者工具
,参考以下图示进行项目创建:
创建好项目后显示效果如下:
小程序目录结构及配置
1、目录结构
小程序包含一个描述整体程序(全局)的app和多个描述各自(局部)页面的page。
一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:
文件 | 必填 | 作用 |
---|---|---|
app.js | 是 | 小程序逻辑-小程序入口文件 |
app.json | 是 | 小程序公共配置文件 |
app.wxss | 否 | 小程序公共样式表 |
一个小程序page页面由四个文件组成,分别是:
文件类型 | 必填 | 作用 |
---|---|---|
js | 是 | 页面逻辑 |
wxml | 是 | 页面结构 |
wxss | 否 | 页面样式表 |
json | 否 | 页面配置 |
2、全局配置文件app.json
参考网址:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
app.json文件用来对微信小程序进行全局配置的,设置小程序页面数量、窗口表现、设置底部或顶部菜单、网络请求超时时间等。
app.json由于是json文件
,所以其中不能添加任何注释,key和value字符串必须用双引号引起来,数组或对象最后一定不能有逗号。
常用的全局配置:
- pages:注册小程序的页面路径列表
数组的第一项代表小程序的初始页面(首页)。小程序中新增/减少页面,都需要对 pages 数组进行修改。
- window:全局的默认窗口表现
用于设置小程序的状态栏、导航条、标题、窗口背景色
-
tabBar:小程序底部或顶部菜单定义(换句话说,小程序的菜单是通过json配置来实现的)
-
networkTimeout:小程序网络请求超时时间设置
-
usingComponents:自定义组件配置
app.json
{
"pages": [
"pages/index/index",
"pages/fen/fen",
"pages/car/car",
"pages/mine/mine"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "每日优鲜",
"navigationBarTextStyle": "black",
"enablePullDownRefresh":true
},
"tabBar": {
"color":"#000",
"selectedColor": "#ff0000",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath":"static/img/index1.png",
"selectedIconPath": "static/img/index2.png"
},
{
"pagePath": "pages/fen/fen",
"text": "分类",
"iconPath":"static/img/fen1.png",
"selectedIconPath": "static/img/fen2.png"
},
{
"pagePath": "pages/car/car",
"text": "购物车",
"iconPath":"static/img/car1.png",
"selectedIconPath": "static/img/car2.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath":"static/img/mine1.png",
"selectedIconPath": "static/img/mine2.png"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}
3、全局样式文件app.wxss
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。
/**app.wxss**/
/* app.wxss 全局css样式*/
/* 引入公共css */
/* @import '/static/css/common.wxss'; */
page{
width: 750rpx;
font-size: 24rpx;
background:deeppink
}
4、小程序生命周期
每个小程序都需要在 app.js
中调用 App
方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。
// app.js
// 注册整个小程序实例对象
// 必须调用且只能调用一次
App({
// 整个小程序得生命周期函数
onLaunch() {
console.log('监听小程序初始化')
},
onShow(){
console.log('监听小程序启动或切前台。')
},
onHide(){
console.log('监听小程序切后台。')
},
globalData: {
nameArr: ['张文静','岳小慧','宋江燕']
}
})
5、全局数据 globalData
整个小程序只有一个 App 实例,是全部页面共享的。开发者可以通过 getApp
方法获取到全局唯一的 App 实例,获取App上的数据或调用开发者注册在 App
上的函数。
在app.js 文件中,定义globalData 属性,该属性中存放的数据在每个页面都可以获取和修改。
// 在app.js 中定义全局数据
globalData: {
nameArr: ['张文静','岳小慧','宋江燕']
}
// 在 index.js 中获取
const app = getApp();
onLoad: function (options) {
console.log(app) //获取 App 实例,并获取全局变量数据 globalData
},
handleFn(){
app.globalData.nameArr.push('逯鑫') //可以在事件中修改 globalData全局数据
}
WXML语法
WXML:页面的视图结构文件。简单来说,其是基于html的基础之上,小程序框架自己设计的一套标记语言。使用这套标记语言,结合JS逻辑部分、样式部分(WXSS),可以允许开发者构建出页面的效果。
注意点:该语言标签严格要求,标签有开始,必须也有结束。
1、WXML数据绑定
a. 页面中的数据都是来自于页面的逻辑文件(js文件)的data属性
例如,我们也在page/index/index.js
文件中新增一个数据“msg”,其值是“HTML5”。则如下:
b. 数据可以在页面结构文件(wxml文件)中展示,例如将刚才index页面的msg数据在index.wxml中展示输出(类似于vue的插值表达式)
<text class="user-motto">{
{msg}}</text>
c. 使用 setData 方法来对数据进行修改。在使用时注意this关键词指向的问题,因为这个方法是对象实例里的方法。例如,假设需要msg数据在页面加载完成后5秒钟将值修改为“H5”,则代码如下:
针对数据的修改一般写在页面的生命周期函数中。
语法:
this.setData({
msg: "H5"
});
2、WXML循环
**语法:**其循环的实现与vue及其相似,也是通过标签的属性来实现循环的。其属性如下:
- wx:for:该属性表示循环,其属性值是要循环的数据,默认下标名为 index,当前项为 item
- wx:key:使用wx:for 渲染列表,必须循环体的唯一标识符,建议可以使用数组每一项得id。
- wx:for-index:(可选)用于自定义索引变量名,默认值是
index
- wx:for-item:(可选)用于自定义循环到的元素的变量名,默认值是item
关于新建page的操作提示:
- 在pages目录下新建一个空的文件夹
- 右键新建好的空的文件夹,选择菜单中的“新建page”
- 输入页面的名称,回车即可生成page需要的四个文件及其初始化的内容
- 根据需要决定是否要设置页面为默认页面(在app.json文件中修改新建页面的顺序)
定义一个数据源,稍后演示循环操作:
data: {
users: ['张三', '李四', '王五'],
obj: [
{
id: 1,
user: 'zhangsan'
},
{
id: 2,
user: 'lisi'
},
{
id: 3,
user: 'wangwu'
}
]
},
参考代码:
<!--pages/wxfor/wxfor.wxml-->
<text>pages/wxfor/wxfor.wxml</text>
<!-- 在wxml里面不用div,div可以用view标签替代 -->
<!-- 使用默认的索引和元素变量循环 -->
<view wx:for="{
{users}}" wx:key="index">
{
{index}} - {
{item}}
</view>
<!-- 使用自定义的索引和元素变量循环 -->
<view wx:for="{
{users}}" wx:for-index="key" wx:for-item="val" wx:key="key">
{
{key}} - {
{val}}
</view>
<!-- 循环数组对象的操作 -->
<view wx:for="{
{obj}}" wx:key="index">
{
{item.id}} - {
{item.user}}
</view>
3、WXML判断
语法:与vue一样,小程序中的判断也是通过特定的属性来实现的。属性是:wx:if、wx:elif、wx:else。
例如,有以下的数据源:
data: {
age: 19
}
在视图结构代码中依据是否成年的规则去判定age是否成年了:
<!--pages/wxif/wxif.wxml-->
<text>pages/wxif/wxif.wxml</text>
<view wx:if="{
{age > 18}}">
成年了,可以去蹦迪了
</view>
<view wx:elif="{
{age == 18}}">
刚好成年,不建议现在去蹦迪
</view>
<view wx:else>
未成年,回去写作业去
</view>
4、模板页面引用
-
WXML提供模板(template)可以在模板中定义代码片段,然后在不同的地方调用。
-
使用 name 属性,作为模板的名字。然后在内定义代码片段,使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入
-
WXML提供两种文件引用方式:
import
(高级)和include
-
import:有点类似以于二阶段,可以把一些常用自定义函数,写到一个文件中,在用的时候可以导入进来,然后再去调用里面的特定的函数。(按需使用)
-
include:将目标文件中所有的代码(除了template标签段、wxs标签段)统统在引入的位置直接用(直接使用)
4.1 页面内使用模板:
当前页面内定义模板,并在当前页面使用,数据item 为当前页js 中定义的数据。
<!-- 定义模板 -->
<template name="msgItem">
<view>
<text> {
{index}}: {
{msg}} </text>
<text> Time: {
{time}} </text>
</view>
</template>
<!-- 使用模板 -->
<template is="msgItem" data="{
{...item}}"/>
<!-- js -->
Page({
data:{
item: {
index: 0,
msg: '我是模板',
time: '2016-09-15'
}
},
例子
4.2 页面外使用模板
-
把模板定义到外部,然后多个页面间可以共用使用定义的模板
-
import
可以在当前文件中使用目标文件定义的template
(代码区块[标签],可以有多个)。
语法:
- 在pages 目录下新建 页面temp,其代码如下:
<!--pages/temp/temp.wxml-->
<view>
<template name="msgItem">
<view>
<text> {
{index}}: {
{msg}} </text>
<text> Time: {
{time}} </text>
</view>
</template>
</view>
- 在其他页面如首页中引入模板temp,并使用模板,数据item1为使用页数据(如首页)
<!-- 引入模板 -->
<import src="../temp/temp.wxml"/>
<!-- 使用模板 -->
<template is="msgItem" data="{
{...item1}}"/>
例子
注意事项:
- import的标签使用可以存在套娃行为,也就是说可以允许出现以下情况:在C文件中importB文件,在B文件中importA文件
- import在套娃的时候需要注意,其使用template存在作用域的概念的。import导入,在使用时只能使用导入的目标文件的template,不能使用导入文件中的导入的目标文件的template。(不允许隔代使用)
4.3 include
include
可以将目标文件除了<template/>
<wxs/>
外的整个代码引入,相当于是拷贝到include
位置。
注意:只能引入静态html代码,如果代码中涉及data中得变量,需要在引入到得当前页面data中重新定义该变量。
语法:
- 在pages 中新建 temp1页面
<!--pages/temp1/temp1.wxml-->
<view class="box">
<view wx:for='{
{fruitArr}}' wx:key='index'>
{
{item}}
</view>
</view>
2.在使用的页面中引入模板:
<!-- 使用include 引入模板 -->
<include src="../temp1/temp1.wxml" />
例子
小结:
- include形式不支持对目标文件的template和wxs区块的解析
- include引入即使用,import在引入后还需要再去单独使用
WXSS样式
WXSS是一套样式语言,用于描述WXML的组件样式(有点CSS描述HTML样式的感觉)。
为了适应广大的前端开发者,WXSS具有CSS大部分特性。同时为了更适合开发微信小程序,WXSS对CSS进行了扩充以及修改。例如:
- 新增了尺寸单位
- WXSS在底层支持新的尺寸单位rpx,可以根据屏幕宽度进行自适应,响应式尺寸单位
- 小程序中全屏尺寸数值是 : 750rpx
- 与px的换算关系:
设备 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) |
---|---|---|
iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
-
提供了全局的样式和局部样式
- 定义在app.wxss中的样式为全局样式,作用于每一个页面
- 在page的wxss文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖app.wxss中相同的选择器
-
此外WXSS仅支持部分CSS选择器,目前支持的选择器有:
选择器 | 样例 | 样例描述 |
---|---|---|
.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组件前边插入内容 |
- 单位 rpx 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。在 iPhone6 上,屏幕宽度为375px,1rpx = 0.5px = 1像素,开发建议用 iPhone6 作为视觉稿的标准。
ps设置375。1px相当于2rpx
ps设置750。1px相当于1rpx
tabBar
文档地址:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar
tabBar
就是小程序底部的导航菜单,小程序的tabBar使用比较简单,只需要在全局配置文件app.json中加上下面的配置即可,参考代码如下:
{
"tabBar": {
"color": "color",
"selectedColor": "selectedColor",
"list": [
{
"pagePath": "pagePath",
"iconPath": "iconPath",
"selectedIconPath": "selectedIconPath",
"text": "text"
},
{
"pagePath": "pagePath",
"iconPath": "iconPath",
"selectedIconPath": "selectedIconPath",
"text": "text"
},
]
}
}
参考配置实例:
{
"tabBar": {
"color": "#C0C0C0",
"selectedColor": "#000000",
"backgroundColor": "#FFFFFF",
"list": [
{
"pagePath": "pages/include/include",
"text": "导入",
"iconPath": "./assets/images/more.png",
"selectedIconPath": "./assets/images/more-active.png"
},
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "./assets/images/cookbook.png",
"selectedIconPath": "./assets/images/cookbook-active.png"
}
]
}
}
注意点:
- pages数组中的默认页面(第一个元素)一定要出现在tabbar配置的list数组中,如果没有则底部菜单是不显示的;
- 如果默认页面在菜单的list数组中,但是不是list数组的一个元素,那么默认页面在第一个元素,那个菜单就会被默认选中;
- 正常来讲,pages数组中的第一个元素(页面),即菜单list数组中的第一个栏目;
代码: