微信小程序开发

标题

"navigationBarBackgroundColor": "#FFC0CB" 标题背景颜色

"navigationBarTitleText": "第一个小程序"  标题栏名字

"navigationBarTextStyle":"white"  标题字体等颜色

底部导航栏

"tabBar": {

    "color": "#f60",  未被选中时字体颜色

    "selectedColor": "#38f",  被选中时字体颜色

    "backgroundColor": "#EE82EE",  背景颜色

    "list": [

      {

        "pagePath": "pages/my/my",  点击时跳转到指定页面

        "text":"我的",  名字

        "iconPath": "images/n2.png",  未被选中时显示图片

        "selectedIconPath": "images/n5.png"  选中时显示图片

      }

引入文字

 text{

    color:red;  文字颜色

    font-size: 60px;  文字大小

    font-family: "楷体";  字体

    background-color: lime;  背景颜色

    border:10px dotted pink;  边框

    display: block;  显示区块，占用一整行

    text-align: center;  文字居中

}

按钮

button{

    background-color: #f60;  背景颜色

}

图标

<icon type="success" size="50"></icon>  图标大小

<icon type="success_no_circle"></icon>  没有背景的图标

引入图片

<image mode="aspectFill" src="../../images/n10.png"></image>  mode缩放模式图片按原比例缩放

<image src="../../images/aa.gif"></image>

view实现视图

 view使用方法和一样 view实现视图，容器类的布局

.box{

    width:750rpx;  rpx是一个相对单位，宽度750rpx和当前屏幕一样

    height: 100px;  高度

    background:url('data:image/gif;base64,............

    背景图片不能本地路径,可以使用网络地址，或者base64位图片

data

<text>{ {msg}}</text>  显示data中的msg

<button bindtap="sub">-</button>  点击事件

<text>{ {num}}</text>  显示data中的num

<button bindtap="add">+</button>  点击事件

<image bindtap="change"  src="{ {src}}"></image>  显示data