微信小程序实例

写一些在编辑过程中的问题
1.上传图片
直接放在项目里是无效的

image.png

打开项目所在文件放进去才可以

image.png

2.toggle效果

image.png

wm是不支持dom操作的，我们可以通过改变绑定的class类名来完成
wxml

  
                  闲置图书（共12本）
                  .《蓝色的海洋幻想》
                  .《蓝色的海洋幻想》
                  .《蓝色的海洋幻想》
                  .《蓝色的海洋幻想》
                  {{isOpenText}}

 bookBlock_open:function(){
    var vals = this.data.isOpen;
    if (vals){
      //将做收起状态
      this.setData({ isOpenText: '展开'});
      this.setData({ isOpenClass: 'close' });
      this.setData({ isOpen: false });
    }else{
      //将做收起状态
      this.setData({ isOpenText: '收起' });
      this.setData({ isOpenClass: 'open' });
      this.setData({ isOpen: true });
    }
  }

wxss

.bookBlock-item-header-con{
  position: relative;
  padding:20rpx;
  overflow: hidden;
}
.bookBlock-item-header-con.close{
 height:220rpx;
}
.bookBlock-item-header-con.open{
 height:auto;
}

1.对话框：http://www.jb51.net/article/111586.htm
2.for循环点击事件：

{{item.title}}{{item.content}}

这个data-id也可以是data-XX
js文件：

     readArticle:function(e){

            var $id = e.currentTarget.dataset.id; //打印可以看到，此处已获取到了对应的id           

   })

3.引用公共js的方法
utils.js:

var common = {
    "a": function(){
        return 'ok!';
    }
}
module.exports = common;

在index.js里面用：

 onLoad: function (option) {
    console.log(common.a());//ok!
)}

http://blog.csdn.net/zuoliangzhu/article/details/53862576-----目前为止最全的微信小程序项目实例
4.请求后台数据方法

  data: {
    motto: 'Hello World',
    roomList:[],
  },
  loadroomList:function(){
    var that = this; 
     wx.request({
       url: 'https://you-server/test.json',
       method:'GET',
       success:function(res){
         that.setData({
            roomList:res.data
          });
       }
     })
  })
}，
onRead:function(){
this. loadroomList();
}

在wxml中

 
        
        {{item.projectname}}

在onread中写ajax获取方法
5.获取用户信息，比如头像啊这些
js

const app = getApp()
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse) {
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function (e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },

html:

6.微信轮播
so easey！用它的自身组件
html

css

.swiper {
 height: 400rpx;
 width: 100%;
}
.swiper image {
 height: 100%;
 width: 100%;
}

7.表单提交

image.png

这里有普通input，复选框，时间选框

filterForm:function(e){
console.log(e);
}

点击提交

image.png

数据就全在里面啦
复选框的写法：

lable的作用是点击lable就能触发checkbox选中
checkbox的样式，它没改之前不是这样的是一个框内打绿勾的样子

//改变框的样式
.chooseYard .yradname>checkbox .wx-checkbox-input{
   width: 20rpx; /* 背景的宽 */
   height: 20rpx; /* 背景的高 */
}
//改变选中框的样式
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
   background: #5eb2ae;
}
//改变选中框中对勾的样式
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
  display: none;
}

还有button的样式，也不是简单button{}就可以改变的，尤其是它自定义的边框
button::after{
border:1px solid transparent;
}

微信小程序实例

你可能感兴趣的:(微信小程序实例)