前言
作者本人是一名Android开发者,前端开发知识了解不多,小程序正式发布之后,好奇心的驱使下,作为一个闲不住的IT男(当然还有boss的要求),自然是要撸一撸小程序的,下面记录下我初入小程序过程中的一些心得和知识点
开发工具
小程序的开发工具可以有多种选择,这里推荐两个:
- 官方IDE
- EgretWing
官方IDE调试方便,但代码提示很差,EgretWing这个工具最新版本支持小程序,代码提示会比较全面,但是只能预览静态页面,无法调试和运行动态数据(也可能是我不太会用),放一张截图
ok,所以我建议开两个窗口,使用EgretWing编辑小程序代码,在官方IDE中调试和查看log
具体的IDE对比可以参考该文章:五大微信小程序开发IDE深度评测
小程序的文件结构
小程序整体包含两个部分
app全局
- app.js 全局逻辑和生命周期处理
- app.json 全局配置
- app.wxss 全局公共样式
page页面
- js 页面逻辑
- wxml 页面布局
- wxss 页面样式表
- json 页面配置
文件类型总共就只有js wxml wxss json四种,简单明了
注意:
- 任意页面必须有.js和.wxml
- 同一页面的文件需要在同一文件夹下,且文件名相同(仅文件类型不同)
- 使用EgretWing会生成一些ide的配置文件,无需理会
配置
小程序配置使用.json文件
//app.json
{
"pages": [//指定所有页面路径
"pages/index/index",
"pages/logs/logs",
"pages/info/info"
],
"window": {
"enablePullDownRefresh": true,//全局支持下拉事件
"backgroundTextStyle": "dark",//窗口背景色
"navigationBarBackgroundColor": "#000",//导航栏背景色
"navigationBarTitleText": "WeChat",//导航栏title
"navigationBarTextStyle": "white"//导航栏字体颜色
}
}
//index.json
{
"navigationBarTitleText": "小程序",
"enablePullDownRefresh": true
}
- 所有页面必须在app.json中的pages节点下注册,路径为全路径
- page.json只支持window节点下的属性
- page.json在实际页面中会覆盖app.json中的同属性
- .json文件中不允许任何形式的注释(上面代码是个错误示范2333)
生命周期
App生命周期
- onLaunch()当小程序初始化完成时，会触发onLaunch（注意全局只触发一次）
- onShow()当小程序启动，或从后台进入前台显示，会触发onShow
- onHide()当小程序从前台进入后台，会触发onHide
page生命周期
- data 页面的初始数据
- onLoad 生命周期函数--监听页面
- onReady 生命周期函数--监听页面初次渲染完成
- onShow 生命周期函数--监听页面显示
- onHide 生命周期函数--监听页面隐藏
- onUnload 生命周期函数--监听页面卸载
- onPullDownRefresh 页面相关事件处理函数--监听用户下拉动
- onReachBottom 页面上拉触底事件的处理函数
其中使用比较多的onLaunch()用来初始化一些全局数据,page.onLoad加载页面数据,onPullDownRefresh和onReachBottom处理列表数据
页面布局
页面布局使用wxml和wxss配和使用,可以使用class和style引入样式
基础
//wxml
<view class="container">
<image src="{{imageUrl}}" class="image" mode="aspectFill"></image>
<view class="msg">
<text class="text">描述: {{title}}</text>
<text class="text">来源: {{source}}</text>
<text class="text">类型: {{resType}}</text>
</view>
</view>
//wxss
.image {
width: 100%;
height: 60vw;
}
.msg {
width: 100%;
padding: 10px;
}
.text {
display: block;
}
数据绑定
小程序中视图层与逻辑层的关联方式全部都是数据绑定,这与Android开发完全不同,没有FindViewById,没有view.setXxx()方法,一开始会不习惯这种方式
//wxml
<text class="text">描述: {{title}}</text>
//js
data: {
title: 'this is title'
}
如果需要更新text,则使用setData()方法
that.setData({
title:"呵呵"
})
- 为什么不直接使用this.setData(),是因为上下文对象不同,后面实际开发中会提到
wx:for
重复渲染组件,用于列表或轮播图(注意:wxml中没有直接提供列表组件)
<view wx:for="{{items}}">
{{index}}: {{item.message}}
</view>
- 其中默认指定index为下标,item为当前项
- {{}}双括号内表示引用data中的数据
- wx:for="{{items}} 会重复渲染items数组长度个数的view区块,从而形成列表
wx:if
条件渲染,其实就是提前给个条件,满足条件时才会展示这个view,基本等同于hidden属性,具体差异可以查看官方文档
逻辑处理
网络请求
wx.request({
url: 'https://gank.io/api/data/福利/10/1'
data: {},//请求参数key:value形式
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {}, // 设置请求的 header
success: function (res) {
console.log("请求成功" + res)
},
fail: function () {//失败
},
complete: function () {//完成
}
})
- 请求协议为https
- 最多只能并行执行5个请求
- header中可以指定Content-Type
数据绑定与更新
使用app或page下的data存储数据,wxml组件绑定data中的数据,数据有更新时使用setData()更新数据并刷新界面
//wxml
<view class="container">
<image src="{{imageUrl}}" class="image" mode="aspectFill"></image>
<view class="msg">
<text class="text">描述: {{title}}</text>
<text class="text">来源: {{source}}</text>
<text class="text">类型: {{resType}}</text>
</view>
</view>
//js
Page({
data: {//定义数据,用于组件绑定数据
title: '',
imageUrl: '',
resType: '',
source: ''
},
onLoad: function (res) {//取值
this.setData({//更新数据并刷新绑定了这些数据的组件
title: res.title,
imageUrl: res.imageUrl,
resType: res.resType,
source: res.source,
})
}
})
点击事件
点击事件使用bindtap属性,用来指定一个函数处理该事件,参数为event
<view class="item-text" bindtap="itemClick">
//js
bindViewTap: function (event) {
wx.navigateTo({
url: '../logs/logs'
})
},
- 如果需要处理列表中item的点击事件,则需要知道当前的index,即事件传值,后面会具体说道
- 除了点击,还要一些其他的事件,具体可以查看官方文档
这篇就到这里了,下一篇将开发具体Demo加以记录分享出来,轮播,列表的实现,刷新+分页,点击传值跳转等.
