微信小程序day01

快捷方式

• 添加注释ctrl+/

1.utils/app.json

(全局的一个.json,类似母版)

window窗口

"window": {`
    "enablePullDownRefresh": true,//
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#708090",//背景颜色 
     "navigationBarTitleText":"Demo01",//标题内容             
    "navigationBarTextStyle": "white",//字的颜色
    
​
  },

 

tabBar（下边导航栏）

"tabBar": { 
​
  "backgroundColor": "#708090",//背景颜色
  "borderStyle": "black",//上边界线颜色
  "color": "#ddd",//文字颜色
  "selectedColor": "3cc51f",//选中后的文字颜色
    "list": [
     {
      "pagePath": "pages/index/index",//页面链接
      "text": "首页",
      "iconPath": "image/home.png",//默认图片链接
      "selectedIconPath": "image/home_select.png"//选中后图片链接
     },
     {
​
      "pagePath": "pages/second/second",
      "text": "我的",
      "iconPath": "image/mine.png",
      "selectedIconPath": "image/mine_select.png"
     }
    ]
  },
​

 

2.数据绑定

message、列表渲染

wxml

<!--index.wxml-->
​
<view class="container">
​
<button bindtap="click">按钮1</button>
​
<button>按钮2</button>
​
<button>按钮3</button>
​
<!-- 数据绑定 -->
​
<view>{{message}}</view>
​
<!-- 列表渲染 -->
​
<view wx:for="{{array}}" wx:key="item">{{item}}</view>
​
</view>

js

Page({
​
 //初始化数据
 data: {
  message:"123456",
  array:[1,2,3,4,5]
 },
 //请求数据
 onLoad() {
 },
 click:function(){
  wx.showToast({
   title: 'OKK',
  })
 }
})

 

3.

video、input、button

wxml

<!--pages/second/second.wxml-->
<view class="container">
<!-- 视频 -->
<video 
id="myVideo" 
src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
danmu-list="{{danmuList}}"
danmu-btn="ture"
enable-danmu="ture">
</video>
<!-- 输入框-->
<input bindblur="inputD" placeholder="输入弹幕内容" />
<!-- 按钮 -->
<button bindtap="send" >发送弹幕</button>
</view>

js

  /**
​
   \* 页面的初始数据
​
   */
​
  data: {
    danmuList:[
      {
       text:"勇敢牛牛",
       time:3,
       color:"#0f0"
      },
      {
        text:"求破泪",
      time:10,
       color:"#f00"
      }
   ]
  },
​
  inputValue:"",
  inputD:function(e){
  console.log(e)
  this.inputValue=e.detail.value;
​
  },
​
   /**
​
   \* 生命周期函数--监听页面初次渲染完成
​
   */
​
  onReady: function () {
//获取视频
      this.videoContext=wx.createVideoContext('myVideo', this)
  },
​
  //按钮事件
​
  send:function(){
   //点击按钮将弹幕发送到弹幕视频中
   this.videoContext.sendDanmu({
     text:this.inputValue,
     color:'red'
    })
  },

wxss

​
video{
  width:100%;
  height:300px;
}
input{
  /* dashed 虚线 */
  border:2px dashed salmon;
  /* 外边距 */
  margin:20px;
}
button{
  /* 按钮背景 */
  background-color: darkcyan;
  /* 字体颜色 */
  color: white;
}