微信小程序之开发细节(一)

1.微信小程序 下拉刷新问题

 

单个页面配置  单个页面的JSON文件

{
  "navigationBarTitleText": "新闻",
  "enablePullDownRefresh": true
}

 

全局配置  全局的JSON文件

"window":{
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true
  },

 

JS代码

/**
  * 下拉刷新
  */
  onPullDownRefresh: function () {
    wx.showLoading({
      title: '玩命刷新中', 
    })

    this.setData({
      messages: [
        {
          title: "养狗狗的宠主们应该都知道",
          url: "http://p1.qhimgs4.com/t012f31476e53f4dad0.jpg",
          message: "柴犬目睹主人上厕所，非要跟着学，它的“尿姿”让全家人都笑喷了"
        },
        {
          title: "搞笑聊天记录",
          url: "http://p1.qhimgs4.com/t0192078817f7ab9a79.jpg",
          message: "搞笑聊天记录：小明和女生告白，他拿出个东西，女生一看吓哭了"
        },
        {
          title: "十年前有一部电视剧不知道你看过",
          url: "http://p1.qhimg.com/t01cb5d2fb15793346e.jpg",
          message: "十年前有一部电视剧，只播出5集就被禁播，只因内容太深刻"
        },
        {
          title: "作为驾驶车辆的人员必须要有驾驶证",
          url: "http://p1.qhimgs4.com/t016e5331ce831902b9.jpg",
          message: "全球只有2人允许无证驾驶，国内就有一位，交警见了都要放行"
        },
        {
          title: "澳大利亚媒体SMH",
          url: "http://p0.qhimgs4.com/t014067057f6498883a.jpg",
          message: "刘强东在美涉嫌性侵被捕，深度揭秘细节内幕，网友：原来是这样啊"
        },
        {
          title: "菜花是一种比较难清洗的蔬菜",
          url: "http://p3.qhimg.com/t01deb1f7b9666b3a25.jpg",
          message: "专家:这些食物都是高级致癌物，不要因为嘴馋，让癌细胞找上门"
        },
        {
          title: "八年的抗日战争",
          url: "http://p1.qhimgs4.com/t01d09f381f8e2bdcbf.jpg",
          message: "他牺牲后被日军割下头颅，怀孕的妻子独自前去讨要，日军敬礼目送"
        },
        {
          title: "联合国作为世界上最大的组织",
          url: "http://p2.qhimgs4.com/t014441c417227953ba.jpg",
          message: "此国独立10年已有113国家承认，中俄不承认，联合国也进不来"
        }
      ],
    }) 
    
    setTimeout(function () {
      wx.hideLoading();
      wx.showToast({
        title: '刷新成功',
      })
    }, 1000);
  },

  /**
   * 上拉加载更多
   */
  onReachBottom: function () {
    wx.showLoading({
      title: '玩命加载中'
    })

    this.setData({
      messages: [
        {
          title: "养狗狗的宠主们应该都知道",
          url: "http://p1.qhimgs4.com/t012f31476e53f4dad0.jpg",
          message: "柴犬目睹主人上厕所，非要跟着学，它的“尿姿”让全家人都笑喷了"
        },
        {
          title: "搞笑聊天记录",
          url: "http://p1.qhimgs4.com/t0192078817f7ab9a79.jpg",
          message: "搞笑聊天记录：小明和女生告白，他拿出个东西，女生一看吓哭了"
        },
        {
          title: "十年前有一部电视剧不知道你看过",
          url: "http://p1.qhimg.com/t01cb5d2fb15793346e.jpg",
          message: "十年前有一部电视剧，只播出5集就被禁播，只因内容太深刻"
        },
        {
          title: "作为驾驶车辆的人员必须要有驾驶证",
          url: "http://p1.qhimgs4.com/t016e5331ce831902b9.jpg",
          message: "全球只有2人允许无证驾驶，国内就有一位，交警见了都要放行"
        },
        {
          title: "澳大利亚媒体SMH",
          url: "http://p0.qhimgs4.com/t014067057f6498883a.jpg",
          message: "刘强东在美涉嫌性侵被捕，深度揭秘细节内幕，网友：原来是这样啊"
        },
        {
          title: "菜花是一种比较难清洗的蔬菜",
          url: "http://p3.qhimg.com/t01deb1f7b9666b3a25.jpg",
          message: "专家:这些食物都是高级致癌物，不要因为嘴馋，让癌细胞找上门"
        },
        {
          title: "八年的抗日战争",
          url: "http://p1.qhimgs4.com/t01d09f381f8e2bdcbf.jpg",
          message: "他牺牲后被日军割下头颅，怀孕的妻子独自前去讨要，日军敬礼目送"
        },
        {
          title: "联合国作为世界上最大的组织",
          url: "http://p2.qhimgs4.com/t014441c417227953ba.jpg",
          message: "此国独立10年已有113国家承认，中俄不承认，联合国也进不来"
        },
        {
          title: "养狗狗的宠主们应该都知道",
          url: "http://p1.qhimgs4.com/t012f31476e53f4dad0.jpg",
          message: "柴犬目睹主人上厕所，非要跟着学，它的“尿姿”让全家人都笑喷了"
        },
        {
          title: "搞笑聊天记录",
          url: "http://p1.qhimgs4.com/t0192078817f7ab9a79.jpg",
          message: "搞笑聊天记录：小明和女生告白，他拿出个东西，女生一看吓哭了"
        },
        {
          title: "十年前有一部电视剧不知道你看过",
          url: "http://p1.qhimg.com/t01cb5d2fb15793346e.jpg",
          message: "十年前有一部电视剧，只播出5集就被禁播，只因内容太深刻"
        },
        {
          title: "作为驾驶车辆的人员必须要有驾驶证",
          url: "http://p1.qhimgs4.com/t016e5331ce831902b9.jpg",
          message: "全球只有2人允许无证驾驶，国内就有一位，交警见了都要放行"
        },
        {
          title: "澳大利亚媒体SMH",
          url: "http://p0.qhimgs4.com/t014067057f6498883a.jpg",
          message: "刘强东在美涉嫌性侵被捕，深度揭秘细节内幕，网友：原来是这样啊"
        },
        {
          title: "菜花是一种比较难清洗的蔬菜",
          url: "http://p3.qhimg.com/t01deb1f7b9666b3a25.jpg",
          message: "专家:这些食物都是高级致癌物，不要因为嘴馋，让癌细胞找上门"
        },
        {
          title: "八年的抗日战争",
          url: "http://p1.qhimgs4.com/t01d09f381f8e2bdcbf.jpg",
          message: "他牺牲后被日军割下头颅，怀孕的妻子独自前去讨要，日军敬礼目送"
        },
        {
          title: "联合国作为世界上最大的组织",
          url: "http://p2.qhimgs4.com/t014441c417227953ba.jpg",
          message: "此国独立10年已有113国家承认，中俄不承认，联合国也进不来"
        }
      ],
    }) 

    setTimeout(function () {
      wx.hideLoading();
      wx.showToast({
        title: '加载成功',
      })
    }, 1000);
  },

 

 

 

2.微信小程序传递参数问题

 

传递页面

/**
   * 首页banner点击事件
   */

  swipclick: function (event) {
    var path = this.data.imgUrls[this.data.swiperCurrent]
    wx.navigateTo({
      url: '../index/bannerdetail/bannerdetail?path=' + path,
    })
  },

 

接收页面

 /**
   * 生命周期函数--监听页面加载
   */

  onLoad: function (options) {

    var paths = options.path

    if (null != paths) {
      this.setData({
        src: paths
      })

    }

  },

 

 

 

 

3.微信小程序Banner图问题

 

WXSS代码

.swiper_fatherview {
  width: 100%;
  height: 180px;
}

.slide-image {
  width: 100%;
  height: 100%;
}

.father_view {
  width: 100%;
  height: 100%;
}

.title_view {
  font-family: "微软雅黑";
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: bold;
}

.news_list {
  background-color: #f2f2f2;
}

.item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10px;
  margin-top: 5px;
  background-color: #fff;
}

.item-left {
  margin-top: 15rpx;
  display: table-cell;
  text-align: center;
}

.image {
  width: 88rpx;
  height: 88rpx;
  background-color: #eee;
}

.item-middle {
  flex: 1;
  margin-left: 10rpx;
  padding-top: 13rpx;
  overflow: hidden;
}

.line {
  height: 1px;
  width: 100%;
  background-color: #e0e1e2;
}

title {
  color: #000;
  font-family: "微软雅黑";
  font-weight: bold;
  font-size: 15px;
  overflow: hidden; /*自动隐藏文字*/
  text-overflow: ellipsis; /*文字隐藏后添加省略号*/
}

.message {
  font-family: "微软雅黑";
  color: #808080;
  font-size: 14px;
  overflow: hidden; /**自动隐藏文字*/
  text-overflow: ellipsis; /**文字隐藏后添加省略号*/
  white-space: nowrap; /**强制不换行*/
}

 

 

WXML代码

<view>

  <swiper class="swiper_fatherview" indicator-dots="true" autoplay="true" circular="true" interval="5000" duration="1000" indicator-color="#FFFFFF" indicator-active-color="#00CD00" current="{{swiperCurrent}}" bindchange="swiperChange">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image" mode="aspectFill" bindtap="swipclick" />
      </swiper-item>
    </block>
  </swiper>




  <view class="father_view">

    <view class="title_view">热门新闻</view>

    <view class="news_list" wx:for="{{messages}}"  data-index="{{index}}" bindtap="listBindTap">
      <view class="line"></view>
      <view class="item">
        <view class="item-left">
          <image src="{{item.url}}" class="image" />
        </view>
        <view class="item-middle">
          <view>
            <text class="title">{{item.title}}</text>
          </view>
          <view>
            <text class="message">{{item.message}}</text>
          </view>
        </view>
      </view>
    </view>

  </view>





</view>

 

 

JS代码

 /**
   * 首页banner切换事件
   */

  swiperChange: function (e) {
    this.setData({
      swiperCurrent: e.detail.current
    })
  },

  /**
   * 首页banner点击事件
   */

  swipclick: function (event) {
    var path = this.data.imgUrls[this.data.swiperCurrent]
    wx.navigateTo({
      url: '../index/bannerdetail/bannerdetail?path=' + path,
    })
  },

 

 

 

 

 

4.微信小程序动态显示或是隐藏View问题

 

WXML代码 hidden

<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" hidden="{{hiddenName}}">授权</button>

 

 

JS代码控制

 data: {

    hiddenName: false,
}


/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              this.setData({
                avatarUrl: res.userInfo.avatarUrl,
                userInfo: res.userInfo
              })
            }
          })

          this.setData({
            hiddenName: true
          })

        }else{
          wx.showModal({
            title: '温馨提示',
            content: '您未授权',
          })

          this.setData({
            hiddenName: false
          })
        }
      }
    })
  },

  /**
   * 授权回调
   */

  bindGetUserInfo: function (e) {
    var that = this;
    console.log(e.detail.userInfo)
    if (e.detail.userInfo) {
      //用户按了允许授权按钮
      wx.getUserInfo({
        success: res => {
          this.setData({
            avatarUrl: res.userInfo.avatarUrl,
            userInfo: res.userInfo
          })
        }
      })

      wx.showModal({
        content: "授权成功",
        showCancel: false,
        confirmText: '知道了',
      })

      this.setData({
        hiddenName: true
      })

    } else {
      wx.showModal({
        content: "您已拒绝授权",
        showCancel: false,
        confirmText: '知道了',
        success: function (res) {
          that.setData({
            showModal2: false
          });
        }
      })

      this.setData({
        hiddenName: false
      })

    }
  },