一、标签
text 行内元素像
view 块级元素 像div一样
block 无意义标签 不存在于dom的标签 block起到包裹作用
是图片标签
../../上一级的上一级
微信小程序选择器:使用类选择器(class)
二、小程序中的app
app.json中的window
- backgroundTextStyle:下拉活动所展示的样式,只有dark和light俩种可以选,一个深色,一个浅色,对 应诸如下拉刷新这样的行为所展示的样式。
- navigationBarBackgroundColor:顶部导航栏的背景颜色,可以直接用颜色代码指定,比如"#0094ff"
- navigotionBarTitleText:顶部导航栏的内容,如:“我的导航栏”
- navigationBarTextStyle:顶部导航栏内容的颜色,这里只能写black和white俩种颜色
- enablePullDownRefresh:下拉刷新是否开启,默认false
- backgroundColor:下拉刷新区域的背景颜色,可自定义
app.js、app.wxss中设置的为所有页面通用的js和样式
三、小程序中的js
作用:JS主要是用来做交互,比如:响应用户的点击、获取用户的位置等等。通过编写 JS 脚本文件来处理用户的操作。
简单来说,WXML决定有什么内容,WXSS决定内容长什么样子,JS呢,决定了页面和用户操作的交互,体验好不好就看JS了。 1:在wxml中获取index.js中的data值 小程序的插值语法 {{ }} 可以获取index.js中data里的值;
<view bindtap="handle" data-msg="hi">{{username}}</view>
2:在创建的文件wxml中有对应的js文件里面有data值
handle:function(e){
/* 解构赋值 */
let {currentTarget:{dataset:{msg}}} = e;
// console.log(msg)
/* 想要设置值 视图和数据双向绑定显示 要使用this.setDate */
this.setData({
username:"李四"
})
/* 获取小程序里面的值要使用this.data.的方式 */
console.log(this.data.username)
},
3:获取全局数据在app.js文件中写
/* 全局数据 使用getApp()方法获取 */
globalData: {
userInfo: null,
name:'taotao'
}
在创建的文件的js中获取全局数据
dian:function (){
/* 使用getApp获取全局数据 */
const {globalData:{name}} = getApp()
console.log(name)
},
4:点击事件 bindtap 是小程序中的点击事件 会产生冒泡显示 catchtap 同为点击事件但是它可以阻止默认的冒泡事件
插值语法、点击事件用法:
<view bindtap="handle">{{username}}</view>
复制代码
5:在创建的文件的:需要在对应的json中配置onReachBottomDistance:0 主页面y轴出现滚动条 onReachBottomDistance表示滚动条距离底部多少的时候触发*/ 小程序自带单位rpx 把屏幕的宽度 等比例分成750份 占满宽度直接写750rpx即可 rpx总体上的大小 比 px要小