{{userInfo.nickName}}

{{motto}}

index.js，与reaact用法几无二异，换汤不换药。page()来注册一个页面。接受一个 OBJECT 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

var app = getApp() // 获取入口文件app的应用实例

Page({

data: {

motto: 'Hello World',

userInfo: {}

},

//自定义事件处理函数，点击.userinfo的容易触发此函数

bindViewTap: function() {

wx.navigateTo({//全局对象wx的跳转页面方法

url: '../logs/logs'

})

},

onLoad: function () {//发生页面加载时，自动触发该生命周期函数

console.log('onLoad')

var that = this

//调用应用实例的方法获取全局数据

app.getUserInfo(function(userInfo){

//更新数据，页面自动渲染

that.setData({

userInfo:userInfo

})

})

}

})

index.wxss文件只渲染当前所属页面，会覆盖全局app.wxss同一样式。

再分析下logs日志文件夹，logs文件夹下为logs.wxml、logs.js、logs.wxss、logs.json，同理保证同名，才能完成效果渲染。

logs.wxml文件

注意用顺序，自己的样式和脚本必须在后面。

网上引用cdn是

五. CSS基本语法

1.优先级

和原生CSS一样。

#xxx>.xxx>xxx

2.选择器

（1）属性选择器

（2）子选择器

>号

（3）兄弟选择器

临近选择器用+号表示，比如说在一个nav-ul-li结构的导航条里，欲设置两个li之间的外边距。

nav>li+li{

margin-left:10px;

}

指定元素后边的节点用~。比如说查找article元素内h1后面所有的p元素

article h1~p{font-size:20px}

3. 伪类选择器

bootstrap常用的伪类无外乎这几个

4. display属性

display很好用，但是不能乱用。

5.媒询

媒询是bootstrap响应式布局核心的要素，但主要用到的还是min,max和and

@media(max-width: 767px){

/*在小于768像素的屏幕中，这里样式生效*/

}

@media(max-width: 767px) and (max-width: 991px){

/*在768-991像素区间的屏幕中，这里样式生效*/

}

@media(min-width: 1200px){

/*在大于等于1200像素的屏幕中，这里样式生效*/

}

同理还可以用到高度。

6.相关javaScript语法梳理