5.24 更新
来,一起学小程序!
文件概述:
所有小程序的component都包含四个文件
.js 这个就是用来写 JS 的地方,也就是小程序的逻辑层 需要一个 Page({}) 放在最外面 用来对 Page 内的 data 和 functions 进行操作。
.wxss 类似于 css 这边可以对 wxml 中 class="" 进行样式定义。
.json 配置文件 同时可以对一些部位的视图层进行属性操作(比如标签栏)。
.wxml 类似于 xml ,视图层。 一般的标签有 <view> <text> <navigation><button> 等。这个类似于 html 语言,但是有微信的修改。
最外侧的 app 代表的是全局的 config 或者样式:
app.wxss这里定义可全局引用的模版
app.json 这里可以定义一些特殊部位的属性,如 TabBar。非常重要的 "pages" 字段,这里的 pages 后的 list 相当于对 页面进行了注册。(其实也就谁放在第一个比较重要点。。)
在 自动创建工程生成的 utils 文件中,微信写好了很多方法。比如:
var util = require('../../utils/util.js');
var time = util.formatTime(new Date());
这两句话可以获取当前时间
这个之后做一个常用包的整理好了!
概述结束 简要说一下一些比较基础常用的东西吧!
页面生命周期:
onUnload: 页面被关闭或者卸载。
常用的 wxss 中的样式定义
rpx 这个是根据 手机的宽自适应的标准 横向最大为 750rpx 一半为 375rpx 在 iphone6 状态下刚好 1 px = 2 rpx
vh 页面视高,定义方法和 rpx 相似 最多100(百分制)
display:flex; 弹性布局,默认为横向 display: inline; 使得该元素和下一元素保持同一直线
flex-direction:column; 默认是 row ,纵向弹性布局
普通 css 有的特点也会有。
border-radius:50%; 圆形
font-weight:bold; 加粗
justify-content: space-around; 留空
常用 wxml 属性:
{{}} 数据绑定。使得 view 层和逻辑层中 Page 下 Data 的值绑定在一起。
Page 下定义的数据可以通过 setData 动态添加或者修改。
setData({
data:data;
})
任何 view 层的用户操作都不会直接改变 data 的值。
调用某个参数中的name参数如下:
{{thisWeekMovie.name}}
<navigation> 跳转:
open-type='redirect' \ 'switchTap' \ 'navigation'
这三个属性是微信小程序 navigation 的三大属性,在之后的笔记中还会提到。
分别代表“不可返回,且销毁页面”,“和 tapBar 保持一致(就是这个的跳转会影响到 tap 中定义的事件”、“跳转且可以返回”
hover-class='' 点击颜色
这个必须注意,微信的实现方法是在原有的 class 后添加 hover-class 后的样式,所以如果有默认的 class ,必须在 wxss 样 式中写在 hover-class 对应的样式之前
<swiper> 轮播元素
内部为 <swiper-item>
indicator-dots='true' 显示点(于是就从外面看到这是第几张图片了)
current="0" 显示这是第几张图片
基础 xml 特性仍然继承,如:
<class="" id="" >
wx 特性事件
1.条件渲染{{(score >= 60)?"及格":count}}
条件渲染 和 hidden 的区别在于 hidden 的元素仍然生成,只是改变 可见度 (可见性需要频繁切换的时候)
具体写法如:
<text wx:if="{{thisWeekMovie.isHighlyRecommended}}" style="font-size:16px; color:red;">强烈推荐</text>2.列表渲染
wx:for=“{{参数}}”
这个有点类似于 html 中的 {% for i in list %} {% endfor %}
会自动生成两个可以在视图层调用的变量。
item: 相当于 loop 中的单个 item
index: item 在 list 中的位置点击:
冒泡事件: 会向上传递事件。比如子事件被点击,点击会传递到父事件查看是否有相应的点击事件,有也会执行。
非冒泡事件 不是上面的事件
bindtap='' 冒泡
catchtap='' 非冒泡
""内的是方程名 一般定义方式如下
fo: function(event){
console.log(event)
}
event 是绑定的事件。如果想要获取 currentTaget 中 view 包裹的的属性需要通过这个获取。不需要,可以不写。
在 app.json 中添加 tabBar 和 默认标题栏
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "index",
"iconPath": "/icon/1.jpg",
"selectedIconPath": "/icon/2.jpg"
},
{
"pagePath": "pages/weekly/weekly",
"text": "weekly",
"iconPath": "/icon/2.jpg",
"selectedIconPath": "/icon/1.jpg"
}
],
"color": "#000000",
"selectedColor": "green"
},
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
}