微信小程序学习

参考文件：https://developers.weixin.qq.com/miniprogram/dev/component/

view：相当于html的div

text：相当于html的span

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'
    ],
    indicatorDots: false,    //是否有小黑点0
    autoplay: false,    //是否自动跳转
    interval: 5000,//自动跳转时间为5秒
    duration: 1000
  },
  changeIndicatorDots(e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay(e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange(e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange(e) {
    this.setData({
      duration: e.detail.value
    })
  }
})

 app.json

{
  "pages":[
    "pages/index/index",
    "pages/user/user",
    "Pages/cars/cars"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",//头顶颜色
    "navigationBarTitleText": "WeChat",    //顶部显示标题
    "navigationBarTextStyle":"black"  //顶部字体只能是黑白
  }，
"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",//指定访问页面
        "text": "随时随地",    //显示标题
        "iconPath": "/images/c2.jpg",//不在当前页面时候显示图标
        "selectedIconPath": "/images/c1.jpg"//当前页面显示图标
      },
      {
        "pagePath": "pages/user/user",
        "text": "电商",
        "iconPath": "/images/c2.jpg",
        "selectedIconPath": "/images/c1.jpg"
      },
      {
        "pagePath": "Pages/cars/cars",
        "text": "电商",
        "iconPath": "/images/c2.jpg",
        "selectedIconPath": "/images/c1.jpg"
      }
    ]
  }
}

 

 

/**app.wxss**/
page{
  font-size: 30rpx;//page整体页面字体大小
  color: #ccc;//字体颜色
  font-family: mirrosoft yaei;//字体类型
}
.pro{
  width: 30%;//class为pro的宽度
}
.pro image{
  width: 100%;
  height: 200rpx;
}

.content{
  width: 100%;
  margin-top: 20rpx;//距离上边20rpx
  display: flex;//class为content的让里面的浮动起来
  flex-flow: wrap;//超过就跳转
  justify-content: space-around;//图与图之间增加间距
}

 

跳转：

//index.wxml
<button type='default'ontap="goToMyPage">跳转到我的页面 </button>

<view>
  <navigator url="../mypage/mypage" hover-class='navigator-hover'>navigator跳转</navigator>
</view>

//index.js
 goToMyPage:function(){
    wx.navigateTo({
      //url是相对路径，不需要后缀
      url:'../mypage/mypage'
    })
    //不能返回之前的页面，
    // wx.redirectTo({
    //   url: '../mypage/mypage',
    // })
  }

<view>
  <navigator url="../mypage/mypage" redirect hover-class='navigator-hover'>重定向navigator跳转</navigator>
</view>

 

点击触发函数：

//index.wmxl
<button type='default' bindtap="anyfunction">测试点击触发函数
<text>{{mytext}}</text>
<text>mytext2->{{mytext2.num}}</text>
</button>

//index.js
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    mytext: "我的第一个页面",
    mytext2:{
      num:300
    }
  },, anyfunction: function () {
    console.log("anyfunction");
    this.setData({
      //修改变量
      mytext : 200,
      //修改字典
      "mytext2.num":90
    })
  }
  , goToMyPage:function(){
    wx.navigateTo({
      //url是相对路径，不需要后缀
      url:'../mypage/mypage'
    })
    //不能返回之前的页面，
    // wx.redirectTo({
    //   url: '../mypage/mypage',
    // })
  }
})