微信小程序（note2：tabBar&变量的使用&组件&转义换行符\n&外部样式&内联样式&rpx&小栗子：欢迎页面+自动跳转 ）

tabBar

---

微信小程序官方文档 [框架]-[小程序配置]-[全局配置]-[tabBar]：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

变量的使用

---

user.js中data中定义变量及初始值

Page({
	data: {
	    text:"I'm user's text."
	},
)}

user.wxml中{{变量名}}双花括号使用

<text>{{text}}</text>

每次新建文件夹，然后右键该文件夹新建页面，在生成的.js文件中，自动添加了放数据的地方、生命周期钩子函数等。

组件

---

用过的组件：

• <view></view>
• <text></text>
• <icon></icon>
• <image></image> 默认加载成 320*240
• <navigator></navigator> 声明式导航 很重要 而且感觉限制的很死
• <swiper></swiper> 轮播图

  <swiper>
  		<swiper-item></swiper-item>
  		<swiper-item></swiper-item>
  </swiper>
  

转义换行符

---

\n 换行

在html中可以直接使用<br />换行，但是小程序wxml中使用<br />无效，可以换成\n。

Page({ 
    data: { 
        text: "I'm user's text.\n More infomation."
    } 
})  

<text>{{text}}</text>

wxss

---

微信小程序官方文档 [开发]-[指南]-[小程序框架]-[视图层]-[WXSS]：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

rpx

rpx尺寸单位可以根据屏幕宽度进行自适应。
官方建议：开发微信小程序时设计师可以用iPhone6作为视觉稿的标准。

外部样式导入

@import "common.wxss";

内联样式

官方建议：内联样式使用动态样式，尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view style="color:{{color}};" />

.json配置文件

---

微信小程序官方文档 [指南]-[配置小程序]：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

官方建议：使用flex布局。

完成欢迎页面视图

---

1、首先完成欢迎页页面布局；
2、然后设置自动跳转，跳转到首页。

>>user.wxml

<view>
    <image src="../../imgs/timg.jpg"></image>
    <text>{{text}}</text>
</view>

>>user.wxss

view{
    display: flex;
    flex-direction: column;
    align-items: center;
}
image{
    width: 300rpx;
    height: 300rpx;
    border-radius: 50%;
    margin: 200rpx;
}
text{
    text-align: center;
    line-height: 100rpx;
}

>>user.js

Page({
	data: {
	    text: "sky别样宇宙;\n欢迎归来 "
	},
	
	//生命周期函数--监听页面显示
	onShow: function () {
	    //1s后自动跳转到index
	    setTimeout(function () {
	        //页面跳转相当于	
	        wx.reLaunch({
	            url: '../index/index',
	        })
	    }, 1000);
	},
})