用小程序·云开发轻松构建二手书商城小程序丨实战

<button class="phone" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
                  <block wx:if="{{phone==''}}"> 请点击获取您的手机号</block>
                  <block wx:if="{{phone!==''}}"> {{phone}}</block>
                  <image wx:if="{{phone==''}}" class="right" src="/images/right.png" />
</button>

 //获取用户手机号
      getPhoneNumber: function(e) {
            let that = this;
            //判断用户是否授权确认
            if (!e.detail.errMsg || e.detail.errMsg != "getPhoneNumber:ok") {
                  wx.showToast({
                        title: '获取手机号失败',
                        icon: 'none'
                  })
                  return;
            }
            wx.showLoading({
                  title: '获取手机号中...',
            })
            wx.login({
                  success(re) {
                        wx.cloud.callFunction({
                              name: 'regist', // 对应云函数名
                              data: {
                                    $url: "phone", //云函数路由参数
                                    encryptedData: e.detail.encryptedData,
                                    iv: e.detail.iv,
                                    code: re.code
                              },
                              success: res => {
                                    wx.hideLoading();
                                    //获取成功，设置手机号码
                                    that.setData({
                                          phone: res.result.data.phoneNumber
                                    })
                              },
                        })
                  },
            })
      },

if (!(/^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/.test(email))) {
                  wx.showToast({
                        title: '请输入常用邮箱',
                        icon: 'none'
                  });
                  return false;
            }

//手机号
/^[1][3,4,5,6,7,8,9][0-9]{9}$/
//QQ号
/^\s*[.0-9]{5,11}\s*$/
//微信号
/^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/

<view class="beibox">
      <view wx:if="{{!focus}}" bindtap="focus" >{{beizhu?beizhu:'请输入信息'}}</view>
      <textarea wx:if="{{focus}}" focus="{{focus}}" bindblur="loose" bindinput="beiInput" value="{{beizhu}}"></textarea>
</view>

      data: {
            beizhu:'',
            focus: false //默认不聚焦
      }
    //点击聚焦显示textarea隐藏view
      focus() {
            let that = this;
            that.setData({
                  focus: true
            })
      },
      //失焦隐藏textarea显示view
      loose() {
            let that = this;
            that.setData({
                  focus: false
            })
      },

//监测屏幕滚动
      onPageScroll: function(e) {
            this.setData({
                  scrollTop: (e.scrollTop) * （wx.getSystemInfoSync().pixelRatio)
            })
      },

<view class="totop" bindtap="gotop" hidden="{{ scrollTop<500 }}">
       <image  lazy-load src="/images/top.png" />
</view>

      data: {
            scrollTop: 0 //初始滚动高度为0
      },
        //监测屏幕滚动
      onPageScroll: function(e) {
          this.setData({
              scrollTop: parseInt((e.scrollTop) * wx.getSystemInfoSync().pixelRatio)
          })
      },
      //返回顶部
      gotop() {
            wx.pageScrollTo({
                  scrollTop: 0
            })
      },

    const cloud = require('wx-server-sdk')
    const QcloudSms = require("qcloudsms_js")
    const envid = 'zf-shcud'; //云开发环境id
    const appid = 140000001 // 替换成您申请的云短信 AppID 以及 AppKey
    const appkey = "abcdefghijkl123445"
    const templateId = 1234 // 替换成您所申请模板 ID
    const smsSign = "腾讯云" // 替换成您所申请的签名
    cloud.init({
      env: envid,
    })
    // 云函数入口函数
    exports.main = async (event, context) => new Promise((resolve, reject) => {    
      /*单发短信示例为完整示例，更多功能请直接替换以下代码*/
      var qcloudsms = QcloudSms(appid, appkey);
      var ssender = qcloudsms.SmsSingleSender();
      var params = ["测试内容"];
      // 获取发送短信的手机号码
      var mobile = event.mobile
      // 获取手机号国家/地区码
      var nationcode = event.nationcode
      ssender.sendWithParam(nationcode, mobile, templateId, params, smsSign, "", "", (err, res, resData) => {
          /*设置请求回调处理, 这里只是演示，您需要自定义相应处理逻辑*/
          if (err) {
            console.log("err: ", err);
            reject({ err })
          } else {
            resolve({ res: res.req, resData })
          }
        }
      );
    })

{
  "navigationStyle":"custom"
}

<view class="contain">
     <view class="go">
             <button  bindtap="go">跳过{{count}}s</button> 
     </view>
     <image class="bg" src="{{bgurl}}"></image>
</view>

.contain {
      width: 100%;
      height: 100%;
      position: relative;
}
.bg {
      position: absolute;
      left: 0rpx;
      top: 0rpx;
      width: 100%;
      height: 100%;
      z-index: -1;
}
.go {
      position: absolute;
      right: 30rpx;
      top: 150rpx;  
      z-index: 9;
}
.go button {
      font-size: 28rpx;
      letter-spacing: 4rpx;
      border-radius: 30rpx;
      color: #000;
      background: rgba(255, 255, 255, 0.781);
       display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      width: 160rpx;
      height: 60rpx;
}

countDown: function() {
            let that = this;
            let total = 3;//倒计时总数3秒
            this.interval = setInterval(function() {
                  total > 0 && (total--, that.setData({
                        count: total
                  })), 0 === total && (that.setData({
                        count: total
                  }), wx.switchTab({
                        url: "/pages/index/index"
                  }), clearInterval(that.interval));
            }, 1e3);
      },