微信小程序1

index,wxnl中是文本     最简单的只需要这几个文件就行

将刚才创建的目录添加进来

组件的使用 从https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html  上查询 具体效果如下

数据绑定

first.wxml

<button type="default" hover-class="other-button-hover"> default </button><button type="primary" bindtap='btnClick'> {{ btnText }}</button> <text>{{ text }}</text>

first.js

  data: {    text : "这里是内容",    btnText :"这是按钮的内容"  },

  btnClick : function () {    console.log("按钮被点击了")    this.setData({text:"这是一个新的内容"})  }

循环和判断标签使用

<view wx:if="{{show}}">{{ text }}1</view> <!--判断--><view wx:else>{{ text }}2</view><!--循环标签--><view wx:for="{{news}}" wx:for-item="itemx"> {{index}}-{{itemx}}  <!--通过index显示当前是第几条--></view>

 data: {    text : "这里是内容",    btnText :"这是按钮的内容",    show :false,    news :['aaa','bbb','ccc']  },

  btnClick : function () {    console.log("按钮被点击了")    var isShow = this.data.show;    console.log(isShow)    var newsdata = this.data.news;    newsdata.shift();    this.setData({text:"这是一个新的内容",show:!isShow,news:newsdata})  }

logs目录 如果有相同的内容在不同的页面重复用到  就写入logs文件中

使用模板

<include src="../templates/head" />gg<button type="default" hover-class="other-button-hover"> default </button><button type="primary" bindtap='btnClick'> {{ btnText }}</button> <view wx:if="{{show}}">{{ text }}1</view> <!--判断--><view wx:else>{{ text }}2</view><!--循环标签--><view wx:for="{{news}}" wx:for-item="itemx"> {{index}}-{{itemx}}  <!--通过index显示当前是第几条--></view><import src="../templates/footer" /><template is="footer1" data="{{text:'导入设置的内容'}}"/><!--要显示哪个模板-->

头部

<text>这里是头部的组件...</text>

尾部

<template name="footer1">这是底部内容1-{{text}}</template><template name="footer2">这是底部内容2-{{text}}</template>

事件

touchend是正常的触摸结束  touchcancel是手指未离开被打断 例如突然来电话

index文件中进行以下的修改

<view class="view1" bindtap="view1click">view 1  <view class="view2" bindtap="view2click">  view 2    <view class="view3" bindtap="view3click">    view 3    </view>  </view></view>

如果通过catchtap绑定不触发冒泡事件

/**index.wxss**/.view1{  height: 500px;  width: 100%;  background: rebeccapurple}.view2{  height: 400px;  width: 80%;  background: red}.view3{  height: 300px;  width: 60%;  background: saddlebrown}

//事件处理函数  view1click:function(){    console.log("view1");  },  view2click: function(){    console.log("view2");  },  view3click: function(){    console.log("view3");  },

稍作修改并给每个view标签添加相应的id属性

点击view3打印

dataset方便添加属性

例如

<viewclass="view3"bindtap="view3click"id="3"data-title="hha">

给view3添加一个title属性  那么dataset会打印出title

生命周期

//app.jsvar appConfig = {  onLaunch: function () {    // 展示本地存储能力    var logs = wx.getStorageSync('logs') || []    logs.unshift(Date.now())    wx.setStorageSync('logs', logs)    console.log("--onShow--");    // 登录    wx.login({      success: res => {        // 发送 res.code 到后台换取 openId, sessionKey, unionId      }    })    // 获取用户信息    wx.getSetting({      success: res => {        if (res.authSetting['scope.userInfo']) {          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框          wx.getUserInfo({            success: res => {              // 可以将 res 发送给后台解码出 unionId              this.globalData.userInfo = res.userInfo              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回              // 所以此处加入 callback 以防止这种情况              if (this.userInfoReadyCallback) {                this.userInfoReadyCallback(res)              }            }          })        }      }    })  },   onShow:function(){    console.log("---onShow---");  },  onHide:function(){    console.log("---onHide---");  } ,  globalData: {    userInfo: null  },}App(appConfig)

先打印onlounch中的--onshow--

然后再打印onshow中的---onshow---

当切换到后台就出现--onhide---

经常在app。js中定义全局数据！！！！！！

flex-direction:row;横着排列 默认

column 竖着排列

flex-wrap 决定元素如何换行 （在排列不下时）

flex-wrap: wrap-reverse/wrap/no-wrap;

flex-flow：row wrap 是direction和wrap的简写

justify-content 元素在主轴上的对齐方式、

justify-content:center 在水平居中

flex-start 居左

flex-end 居右

space-around

align-item  ：flex-end  下面  center垂直居中

flex-grow 当有多余空间 元素的放大比例

默认为0   例如flex-grow：1

flex-shrink 空间不足 元素缩小的比例

默认为1

flex-basis 元素在主轴上占的

flex是上面简写  例如 flex：0 1 50px

配置：

app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

{  "pages": [    "pages/index/index",    "pages/logs/index"  ],  "window": {    "navigationBarTitleText": "Demo"  },  "tabBar": {    "list": [{      "pagePath": "pages/index/index",      "text": "首页"    }, {      "pagePath": "pages/logs/logs",      "text": "日志"    }]  },  "networkTimeout": {    "request": 10000,    "downloadFile": 10000  },  "debug": true}

导航的配置如

"window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "red",    "navigationBarTitleText": "WeChat",    "navigationBarTextStyle":"white"  }

navigationBarTextStyle 导航字的颜色只支持white和black

tabBar

以上为list接受的属性

"tabBar": {

"list": [

{

"pagePath":"pages/index/index",

"text":"首页"

},

{

"pagePath":"pages/logs/logs",

"text":"日志"

}

]，

"color": "green",

"selectedColor":"white",

"backgroundColor":"pink"

}

结果如下

在app.js中注册

App({  onLaunch: function(options) {    // Do something initial when launch.  },  onShow: function(options) {      // Do something when show.  },  onHide: function() {      // Do something when hide.  },  onError: function(msg) {    console.log(msg)  },  globalData: 'I am global data'})

onLounch在初始化时触发

onShow在进入前台触发

onHide在进入后台触发

初始化数据

view>{{text}}</view><view>{{array[0].msg}}</view>

Page({  data: {    text: 'init data',    array: [{msg: '1'}, {msg: '2'}]  }})

page（）

//index.jsPage({  data: {    text: "This is page data."  },  onLoad: function(options) {    // Do some initialize when page load.  },  onReady: function() {    // Do something when page ready.  },  onShow: function() {    // Do something when page show.  },  onHide: function() {    // Do something when page hide.  },  onUnload: function() {    // Do something when page close.  },  onPullDownRefresh: function() {    // Do something when pull down.  },  onReachBottom: function() {    // Do something when page reach bottom.  },  onShareAppMessage: function () {   // return custom share data when user share.  },  onPageScroll: function() {    // Do something when page scroll  },  // Event handler.  viewTap: function() {    this.setData({      text: 'Set some data for updating view.'    }, function() {      // this is setData callback    })  },  customData: {    hi: 'MINA'  }})

onPullDownRefresh: 下拉刷新

onReachBottom: 上拉触底

onPageScroll: 页面滚动

事件处理函数

示例代码：

<view bindtap="viewTap"> click me </view>

Page({  viewTap: function() {    console.log('view tap')  }})

setData() 参数格式

<!--index.wxml--><view>{{text}}</view><button bindtap="changeText"> Change normal data </button><view>{{num}}</view><button bindtap="changeNum"> Change normal num </button><view>{{array[0].text}}</view><button bindtap="changeItemInArray"> Change Array data </button><view>{{object.text}}</view><button bindtap="changeItemInObject"> Change Object data </button><view>{{newField.text}}</view><button bindtap="addNewField"> Add new data </button>

//index.jsPage({  data: {    text: 'init data',    num: 0,    array: [{text: 'init data'}],    object: {      text: 'init data'    }  },  changeText: function() {    // this.data.text = 'changed data'  // bad, it can not work    this.setData({      text: 'changed data'    })  },  changeNum: function() {    this.data.num = 1    this.setData({      num: this.data.num    })  },  changeItemInArray: function() {    // you can use this way to modify a danamic data path    this.setData({      'array[0].text':'changed data'    })  },  changeItemInObject: function(){    this.setData({      'object.text': 'changed data'    });  },  addNewField: function() {    this.setData({      'newField.text': 'new data'    })  }})

视图容器

view

属性 hover-class  ：none 默认     按下去的样式 

hover-stop-propagation ：false 默认      阻止冒泡

hover-start-time   按下多久出现效果

hover-stay-time   效果持续多久

scroll-view

例子

<!--index.wxml-->

<viewclass="container">

<scroll-viewscroll-y="true"style="height: 200px;"bindscrolltoupper="srcollToUpper"

bindscrolltolower="scrollToLower"bindscroll="scroll"

scroll-into-view="{{intoview}}"

>

<viewid="green"class="scroll-view-item bc_green"></view>

<viewid="red"class="scroll-view-item bc_red"></view>

<viewid="yellow"class="scroll-view-item bc_yellow"></view>

<viewid="blue"class="scroll-view-item bc_blue"></view>

<viewid="red1"class="scroll-view-item bc_red"></view>

<viewid="yellow1"class="scroll-view-item bc_yellow"></view>

</scroll-view>

<viewstyle="height:100px;width:200px;background-color:red;margin-top:20px"bindtap="click"/>

</view>

.scroll-view-item{

height:100px;

}

.bc_green{

background-color:green;

}

.bc_red{

background-color:red;

}

.bc_yellow{

background-color:yellow;

}

.bc_blue{

background-color:blue;

}

  srcollToUpper:function(event){
    console.log(event)
  },

  scrollToLower:function(event){
    console.log(event)
  },


  scroll:function(event){
   // console.log(event)
  },

  click:function(){
    console.log("click...")
    this.setData({intoview:"blue"})
  }

结果

竖着的滚动条 

<scroll-viewscroll-y="true"style='height:200px;'bindscrolltoupper="scrollToUpper"bindscrolltolower="scrollToLower"bindscroll="scroll"upper-threshold="100"scroll-into-view="{{intoview}}">

scroll-x  横向 滚动条    scroll-y竖直滚动条  默认值为false  为true代表启用

    bindscrolltoupper="scrollToUpper"  滚动到顶部/左边，会触发 scrolltoupper 事件这里的scrolltoupper事件为

srcollToUpper:function(event){
    console.log(event)
  },

bindscrolltolower="scrollToLower"   滚动到底部/右边，会触发 scrolltolower 事件

bindscroll   滚动时触发事件

upper-threshold  距顶部/左边多远时（单位px），触发 scrolltoupper 事件

lower-threshold  距底部/右边多远时（单位px），触发 scrolltolower 事件

scroll-into-view="{{intoview}}”   这里intoview要等待最下方红色按钮按了之后 将blue送到intoview中 然后点击之后直接跳到蓝色方块  期待值为某元素的id！！！！！！！

swiper

<!--logs.wxml-->

<viewclass="container">

<swiperindicator-dots="{{indicatorDots}}"style="width:300px"

autoplay="{{autoplay}}"interval="{{interval}}"duration="{{duration}}"bindchange="change">

<blockwx:for="{{imgUrls}}">

<swiper-item>

<imagesrc="{{item}}"class="slide-image"width="355"height="150"/>

</swiper-item>

</block>

</swiper>

</view>

.log-list {

display:flex;

flex-direction:column;

padding:40rpx;

}

.log-item {

margin:10rpx;

}

Page({

data: {

imgUrls: [

'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',

'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',

'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'

],

autoplay: true,

indicatorDots: true,

interval: 2000,

duration: 500

},

onLoad: function (options) {

// 页面初始化 options为页面跳转所带来的参数

},

onReady: function () {

// 页面渲染完成

},

onShow: function () {

// 页面显示

},

onHide: function () {

// 页面隐藏

},

onUnload: function () {

// 页面关闭

},

change: function (event) {

console.log(event)

}

})

例如

<swiperindicator-dots="{{indicatorDots}}"style="width:300px"

autoplay="{{autoplay}}"interval="{{interval}}"duration="{{duration}}"bindchange="change">

indicator-dots：false默认           是否显示面板指示点  即图片下方的小点

indicator-color ：rgb      指示点颜色

indicator-active-color   当前选中指示点的颜色

autoplay：false  默认      是否自动播放

interval   切换的时间

duration 滑动持续时间

bindchange  当前index改变触发  也就是图片切换触发

circular：false  是否衔接播放

vertical：false  滑动条是否是垂直

movable-view 可移动的块

<view class="section">  <view class="section__title">movable-view区域小于movable-area</view>  <movable-area style="height: 200px;width: 200px;background: red;">    <movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all">    </movable-view>  </movable-area>  <view class="btn-area">    <button size="mini" bindtap="tap">click me to move to (30px, 30px)</button>  </view>  <view class="section__title">movable-view区域大于movable-area</view>  <movable-area style="height: 100px;width: 100px;background: red;" direction="all">    <movable-view style="height: 200px; width: 200px; background: blue;">    </movable-view>  </movable-area></view>

Page({  data: {    x: 0,    y: 0  },  tap: function(e) {    this.setData({      x: 30,      y: 30    });  }})

结果为

点击按钮可以将小方块移到30 30 的位置

   <movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all">    </movable-view>

x y定义移动的方向

direction：移动方向，属性值有all、vertical、horizontal、none

cover-view ：覆盖在原生组件上的文本视图

<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls="{{false}}" event-model="bubble">  <cover-view class="controls">    <cover-view class="play" bindtap="play">      <cover-image class="img" src="/path/to/icon_play" />    </cover-view>    <cover-view class="pause" bindtap="pause">      <cover-image class="img" src="/path/to/icon_pause" />    </cover-view>    <cover-view class="time">00:00</cover-view>  </cover-view></video>

.controls {  position: relative;  top: 50%;  height: 50px;  margin-top: -25px;  display: flex;}.play,.pause,.time {  flex: 1;  height: 100%;}.time {  text-align: center;  background-color: rgba(0, 0, 0, .5);  color: white;  line-height: 50px;}.img {  width: 40px;  height: 40px;  margin: 5px auto;}

Page({  onReady() {    this.videoCtx = wx.createVideoContext('myVideo')  },  play() {    this.videoCtx.play()  },  pause() {    this.videoCtx.pause()  }})