编写手机端的一些示例

Question

#编写构建和存储的位置
#轮播图的展示成果及示例
#跳转页面或注册模式

Answer 1

1.1运行news

    "pages/news/news",             03(5)


.img {
  width: 700rpx;
  height: 500rpx;
}                  04(3)                          


<image class="img" src='../images/star.jpg'></image>              05(4)


    <button bindtap="goNews">点我跳转</button>            06(10)


  goNews: function () {
    wx.navigateTo({
      url: '../news/news'
    })
  },               07(12)


1.2运行movie

    "pages/music/music",
    "pages/movie/movie",
    "pages/logs/logs"
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/music/music",
        "text": "音乐",
        "iconPath": "pages/images/music.png",
        "selectedIconPath": "pages/images/music2.png"
      },
      {
        "pagePath": "pages/movie/movie",
        "text": "电影",
        "iconPath": "pages/images/movie.png",
        "selectedIconPath": "pages/images/movie2.png"
      }
    ]
  },                      03（4）


    <button bindtap="goTabBar">进入导航</button>                  04（10）


  goTabBar: function () {
    wx.switchTab({
      url: '../music/music'
    })
  },                      05（13）


1.3前往付款

    "pages/payment/payment",               03（4）


    <view class="btn-area">
      <button bindtap='showPrompt'>查看提示</button>
      <button bindtap='goPayment'>前往付款</button>
    </view>                         04（10）


.btn-area{
  display: flex;
  flex-direction: row;
  align-items: center;
}                      05（3）


  //查看提示-显示消息提示框的函数
  showPrompt: function () {
    wx.showToast({
      title: '请谨慎付款',
      icon: 'success',
      image: "../images/sch.png", 
      duration: 5000
    });
  },
  //前往付款-弹出模态窗口的函数
  goPayment: function () {
    wx.showModal({
      title: '再次提醒',
      content: '确定要跳转付款页面么?',
      success(res) {
        if (res.confirm) {
          wx.navigateTo({
            url: '../payment/payment'
          })
        } else if (res.cancel) {
          console.log('用户点击了取消');
        }
      }
    });
  },                      06（12）


2.1轮播图运行效果

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true">
  <block wx:for="{{imgUrls}}" wx:key="key">
    <swiper-item>
      <image src="{{item}}" mode="widthFix"/>
    </swiper-item>
  </block>
</swiper>                02（3）


  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
    })      
  }                          03（18）


2.2天气预报

  <view class="btn-area" wx:for="city" wx:key="citykey">
    <button bindtap="goWeather" data-btnId="{{index}}">
      {{city[index]}}
    </button>
  </view>                02（10）


  goWeather: function(event) {
    var cityIdx = event.target.dataset.btnid;
    wx.navigateTo({
      url: '../weather/weather?id=' + cityIdx
    })
  }                             03（7）


  // 获取按钮在city数组中的下标，将城市名和回调函数名传给getLocalWeatherData函数
  onLoad: function(options) {
    var idx = options.id;
    this.getLocalWeatherData(this.data.city[idx], this.myCallback);
  },

  // 获取指定城市的本地json数据，传给回调函数callback处理
  getLocalWeatherData: function (city, callback) {
    var cityJson = localJsonData.dataList[`${city}`];
    callback(cityJson);
  }, 

  // 回调函数的实现
  myCallback: function(resData) {
    this.data.city = resData.result.city;
    this.data.realtime = resData.result.realtime;
    this.data.future = resData.result.future;
    this.setData({
      city: this.data.city,
      real:this.data.realtime,
      future:this.data.future
    }); 
  },                            04（11）


2.3模拟快递查询

    <button class="btn-clear" type="primary" plain 
      bindtap="bindOnClear">清空</button>
    <button class="btn-search" type="primary" plain 
      bindtap="bindOnSearch" loading="{{loading}}">查询</button>      02（13）


  // 选择快递公司函数
  bindExpressChange: function(e) {
    this.setData({
      index:e.detail.value
    });
  },
  // 清空函数
  bindOnClear: function() {
    this.setData({
      jsonObj:{},
      loading:false
    });
  },                                03（14）


  // 查询函数
  bindOnSearch: function() {
    this.setData({
      loading: !this.data.loading
    });
    var com = this.data.key[this.data.index];
    var arrJson = localJsonData.dataList[`${com}`];
    var idx = Math.floor(Math.random() * arrJson.length);
    setTimeout(this.myCallback, 3000, arrJson[idx]);
  },
  // 回调函数（获取json格式的订单数据之后，用此函数处理）
  myCallback: function(orderJsonObj) {
    // 若获取订单数据成功，则将物流跟踪数据的数组逆序（不成功时json中无此数组）
    orderJsonObj.result.list.reverse();
    // 拿到Json数据，切换正在加载的图标，并推送到视图渲染线程
    this.setData({
      loading: !this.data.loading,
      jsonObj: orderJsonObj
    });
  }                                   04（27）


3.1播放白蛇传界面

    <view class='audioContainer'>
      <!--当前为停止状态-->
      <view id='play' wx:if="{{isplay==false}}" bindtap='play'>
        <image class='audioImg' src='../images/play.png' />
      </view>
      <!--当前为播放状态  -->
      <view id='pause' wx:if="{{isplay==true}}" bindtap='paues'>
        <image class='audioImg' src='../images/pause.png' />
      </view>
    </view>
    <view style='width:40%;'>
      <button bindtap='review' type='primary' >重新播放</button>
    </view>                02（14）


  // 播放
  play: function() {
   innerAudioContext.play();
   this.setData({
     isplay:true
    });
  },
  // 暂停
  pause: function() {
    innerAudioContext.pause();
    this.setData({
      isplay:false
    });
  },
  // 重播
  review: function() {
    innerAudioContext.stop();
    innerAudioContext.play();
    this.setData({
      isplay:true
    });
  },                      03（31）


  onReady: function() {
    // 监听音频自然播放至结束的事件
    innerAudioContext.onEnded(this.onEndedCallback);
  },
  onEndedCallback() {
    this.setData({
      isplay:false
    });
  },                      04（57）


3.2发送弹幕

  <video id="myVideo" src="{{src}}" loop="true" autoplay show-progress="true" object-fit="cover" enable-danmu danmu-btn controls></video>
  <view class="inner-container">
    <input class="input-danmu" bindblur="inputBullet" placeholder="在此输入弹幕内容" />
    <view class="btn-area">
      <button bindtap="play">播放</button>
      <button bindtap="pause">暂停</button>
      <button bindtap="sendBullet">发送弹幕</button>                    02（3）


    this.videoContext=wx.createVideoContext('myVideo')
    this.data.src = `${this.data.filePath}` + 
                    `${this.data.fileName}`;
    this.setData({
      src: this.data.src
    });
  },

  // 输入弹幕信息
  inputBullet(e) {
    var danmuStr=e.datail.value.trim();
    if (danmuStr !="") {
      this.data.inputValue=danmuStr;
    } else {
      this.data.inputValue='哈哈哈，真搞笑！';
    }
  },
  // 发送视频弹幕
  sendBullet() {
    this.videoContext.sendDanmu({
      text:this.data.inputValue,
      color:getRandomColor()
    })                       03（22）


    this.videoContext.play();
  },
  // 视频暂停
  pause() {
    this.videoContext.pause();                   04（48）


3.3显示缓存数据

    wx.setStorage({
      key:param.username.trim(),
      data:param.password
    });                     02（52）


    wx.getStorage({
      key:param.username.trim(),
      success(res) {
        // 通过用户名，从本地缓存数据中成功获取到注册时设置的密码
        // 回调函数succCallback中，将输入密码和缓存密码比对，处理跳转
        that.succGetUserName(param, res.data);
      },
      fail(res) {
        // 如果没有获取到缓存密码，在此处理
        that.failGetUserName(param);
      }
    });                          03（28）


      var flag=wx.getStorageSync(userName);
      if(flag) {
        return true;
      } else {
        wx.showModal({
          title:'提示',
          showCancel:false,
          content:'该手机尚未注册！'
        });
        return false;
      }                         04（76）


      wx.setStorage({
        key:userName,
        data:newPwd
      });                       05（36）