微信小程序
基础知识点
组件使用的严格的XML标准(开闭标签问题)
写路径的时候不需要写扩展名,系统根据路径统一执行
文件夹里面的json会优先外部的json执行
navigationBarBackgroundColor导航条背景颜色
navigationBarTitleText导航条文本内容
navigationBarTextStyle导航条文本样式颜色
标签栏配置:
list里的对象2-5个,iconPath是未选中时候的图标,selectedIconPath是被选中时的图标。selectedColor是被选中时的颜色。
"tabBar": {
"list": [{
"pagePath": "pages/about/about",
"text": "关于",
"iconPath": "image/icon/ab1.png",
"selectedIconPath": "image/icon/ab2.png"
},
{
"pagePath": "pages/weekly/weekly",
"text": "每周推荐",
"iconPath": "image/icon/m1.png",
"selectedIconPath": "image/icon/m2.png"
}
],
"color": "#000000",
"selectedColor": "blue"
}
JS
-
小程序不是运行在浏览器中的,所以没有DOM,BOM对象
-
小程序的JS有一些额外的成员。比如:
App方法:用来定义应用程序实例对象
Page方法:用来定义页面对象
getApp方法:用来获取全局应用程序对象
wx对象,用来提供核心Api -
小程序的JS是支持CommonJS规范的。
CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。require方法用于加载模块。
列表数据渲染
循环体默认遍历数据对象是item,默认遍历下标(索引)是index
js里data的数据(用法和vue相似):
info[
{name:"html",checked:true},
{name:"css",checked:false}
]
<view wx:for="{{ info }}">
<checkbox checked="{{ item.checked }}"></checkbox>
<text>{{ item.name }}</text>
</view>
注意:
插值表达式如果写在标签里面,需要在{{}}外面加上双引号""
可以使用wx:for-item="a"
给当前遍历数据对象起别名,本例中item别名为a
可以使用wx:for-index="i"
给当前遍历下标起别名,本例中index别名为i
事件处理
-
事件基本使用
bind[xxx]
xxx是事件名
<button bindtap="inHandle"></button>
-
其中catchtap="函数名"绑定事件并且阻止冒泡
-
给函数传参通过
<data-name="zs">
事件处理函数里面的this指向的还是页面对象!
inHandle: function(e){
//e.target拿到的是点击的元素,dataset指的是元素上所有以data开头的属性集合
console.dir(e.target.dataset)
}
单向数据流,实现双向绑定
//bindinput输入框里的值发生变化,就会触发inHandle函数
<input value="{{ message }}" bindinput="inHandle"/>>
<text>{{ message }}</text>
data:{
message:"first"
}
inHandle: function(e){
//this.setData用来改变data中的数据,e.detail.value可以拿到输入框里的值
this.setData({
message:e.detail.value
})
}
条件渲染
block是一个控制属性(wx:)的载体,页面渲染的时候没有实际意义。
block wx:if="{{ !show }}">
条件为假的时候不渲染,没有该元素
而hidden="{{ !show }}
只是把元素隐藏起来了(频繁切换建议使用)
wxss和css差异
在不同的设备让相同的代码可以起作用。开发的时候建议用iphone6作为标准
rpx可以根据屏幕宽度进行自适应,规定屏幕宽度为750rpx或者20rem
基础组件内容
icon:type,size,color用于定义图标类型,大小,颜色
text: 可以控制页面上的内容,可以嵌套,还支持换行。
progress: 进度条。
表单组件(更多看官方文档)
button一些属性:
type 的合法值primary,default,warn
size 的合法值default,mini。
plain 镂空,背景色透明。
hover-class=“类名” 指定按钮按下去的样式类。
input 输入框。type类型 placeholder输入框为空时占位符 placeholder-style指定 placeholder 的样式等等
API 界面 交互(更多看官方文档)
wx.showModal显示模态对话框
wx.showLoading显示loading提示框。
wx.showActionSheet显示操作菜单。
组件的分类
- 功能型组件
- 布局型组件
- API型(使用的角度)
页面间的跳转和传值
快速创建页面:app.json中pages里写好路径后,系统自动创建相关的页面
页面之间的跳转:<navigator url="../demo2/demo2">点击我跳转</navigator>
,url是相对路径。
json文件必须有内容,否则无法显示正常页面,里面可以加一个花括号{}也行。
页面间参数传递:
- 传值 跳转链接上加问号参数。
<navigator url="../demo2/demo2?name=小明&age=18">小明</navigator>
- 接受 onload 的第一个参数(对象)
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
console.log(options)
}
页面导航模式(不再返回):加上 redirect
<navigator url="../demo2/demo2" redirect>跳转过去(不回来了)</navigator>
导航元素点击高亮:
<navigator hover-class="my-hover">点我点我</navigator>
.my-hover {
color: red;
}
或者使用 cursor pointer 的方式,可以让任何元素点击时高亮
<image class="hover-demo" src="../../images/poster.jpg"></image>
.hover-demo {
cursor: pointer;
}
页面导航ApI
<button type="primary" bindtap="tapHandle">跳转过去</button>
tapHandle: function () {
wx.navigateTo({
url: '../demo2/demo2?id=123'
})
// 或者,跳转过去(不再有回来按钮)
wx.redirectTo({
url: '../demo2/demo2'
})
}
<button bindtap="backHandle">返回</button>
backHandle: function () {
// 默认返回到上一页
// wx.navigateBack()
// 指定delta 就是返回到指定页面
// delta 过大(超出历史记录)默认返回最开始的页面
wx.navigateBack({
delta: 100
})
}