吃货福利get-本日美食food微信小顺序

2019年8月25日 138次阅读来源: caraline

wechat-todayFood

微信小顺序仿本日美食food

初学微信小顺序，嗯，还不错嘛，挺风趣的！因而自身着手撸了一个?。你别说一看题目就晓得我是吃货呀，我是不想这么快就被揭露的，然则这个小顺序就是这么有意思呀。好了我要进入正题了，我们一同去看看我的demo吧。

开辟东西：

下载开辟者东西：微信小顺序官网，下载好后就能够举行开辟了哟。假如你想要宣布你的小顺序的话呢，就要在建立小顺序的时刻猎取AppId,能够去https://mp.weixin.qq.com 这里相识概况猎取;
开辟文档：微信小顺序宝典秘笈，这个是开辟小顺序的宝典，内里包括了种种组件，API,框架and so on…　
3.　Easy Mork： easy-mock,经由过程它能疾速天生模仿数据的效劳，它能为我们供应一个数据接口url，然后运用wx.request({ url: url, …..})来发送数据要求，我的数据大部分都是经由过程Mork模仿的；

建立小顺序后：

会自动天生一些基础文件：

page文件夹, 页面文件夹包括你一切的页面文件,最少包括.js .wxml .wxs后缀文件，.json可选
utlis文件夹 ,安排一些全局须要运用的js文件
app.js 掌握全局的逻辑构造
app.json 设置一些全局数据，一切页面都要在此处注册
* app.wxml 内容构造

* app.wxss 全局款式

页面注册：

  "pages":[
    "pages/index/index",
    "pages/detail/detail"
  ],

结果预览：

《吃货福利get-本日美食food微信小顺序》

项目功用：

* 首页插进去一组图片，并完成跳转　

* scroll-view的运用，可转动视图地区天生　

* 视频播放，video组件运用　

* 宣布批评　

* 批评显现　

* 猎取数据及交互反应　

* 猎取用户信息　

* 动态猎取批评时候　

* 运用mock 传数据　

详细功用剖析

1. 插进去一组图片，并完成跳转　

由于是要插进去一组图片，所以我们能够用wx:for={{}}来完成

HTML构造

<view wx:for="{{foodList}}" wx:key="item" bindtap="bindViewTap" id="{{item.id}}" class="list">
  　<view class="image">
 <image src="{{item.src}}"/>
  　</view>

js设置

我是在这里插进去了图片的地点信息，在data数组内里

//事宜处置惩罚函数
bindViewTap: function(e) {
  console.log(e.currentTarget.id)
  var id = e.currentTarget.id
  wx.navigateTo({
    url: '../detail/detail?id='+ id
  })
  　},

２.　scroll-view的运用，可转动视图地区天生

在须要设置转动地区，用scroll-view标签把内容包住

HTML构造

<scroll-view class="scroll-user" style="height:{{windowHeight}}px" scroll-y="true" bindscrolltolower="handleLower" bindscrolltoupper="handleUpper">
    <view class="box">
            <text  class="text1">{{videoInfo.title}}</text>
            <text class="text2">{{videoInfo.number}}</text>
            <text  class="text3">{{videoInfo.time}}</text>
            <text  class="text4">{{videoInfo.desc}}</text>   
    </view>
<view class="comment" wx:for="{{userlist}}">
          <view class="userInfo">
            <view class="userinfo-top"> 
            <image class="userinfo-avatar" src="{{item.avatarUrl}}" background-size="cover"></image>
            <text class="userinfo-nickname">{{item.nickName}}</text>
            <text class="text4">{{item.time}}</text>
            </view>
            <text class="con">{{item.desc}}</text>
            <div class="clear"></div>
          </view>      
</view> 
<view class="comment" wx:for="{{comment}}">
          <view class="userInfo">
            <view class="userinfo-top"> 
            <image class="userinfo-avatar" src="{{item.avatarUrl}}" background-size="cover"></image>
            <text class="userinfo-nickname">{{item.nickName}}</text>
            <text class="text4">{{item.time}}</text>
            </view>
            <text class="con">{{item.desc}}</text>
          </view>      
</view>
</scroll-view>

js设置

handleUpper: function (event) {
    console.log("handleUpper");
  },handleLower: function (event) {

console.log("handleLower");
  },

３.　视频播放，video组件运用（这是我踩过的坑！）

HTML构造

<view class="video">
            <video src="{{videoInfo.src}}" crossOrigin="anonymous"autoplay controls/>
              <button bindtap="bindButtonTap"></button>
</view> 
<view class="video">
       <video id="item.id" src=""  controls binderror="videoErrorCallback" hidden="{{hiddenVideo}}"></video>
       <button bindtap="bindButtonTap"></button>
</view>

js设置

在 data中写入videoInfo: {}， hiddenVideo: true,

    onReady: function (res) {
    this.videoContext = wx.createVideoContext('item.id')
 },
  videoErrorCallback: function(e) {
  console.log('视频错误信息:')
  console.log(e.detail.errMsg)
 },
 bindButtonTap:function(){
        var that = this;
        wx.chooseVideo({
            sourceType:['album','camera'],
            maxDuration:60,
            camera:['front','back'],
            success:function(res){
                that.setData({
                    src:res.api_url
                })
            }
        })
    },
})

４.　宣布批评（最大的坑！）　
　

包括：

* 猎取数据及交互反应　

* 猎取用户信息　

* 动态猎取批评时候　

HTML构造　

<view class="inputtext">   
        <input type="text" name="com" class="text"bindinput="bindInput" value="{{content}}" placeholder="我来讲两句" />
        <button type="submit"  bindtap="issue"  class="btn">宣布</button>
     </view>
</view>

js设置

输入批评及猎取其信息：

comment:[],
bindInput:function(e){
  var that=this;
  var value= e.detail.value;
  console.log(value);
  that.setData({
    content:value
  })
},

猎取数据及交互反应：

content:"",
issue:function(){
  var that=this ;
  var arr=new Array();
  if(this.data.content===""){
    wx.showModal({
  title: '提醒',
  content: '请填写批评',
  success: function(res) {
    if (res.confirm) {
      console.log('用户点击肯定')
    } else if (res.cancel) {
      console.log('用户点击作废')
    }
  }
  })
  }else{
  arr.push({
    nickName:this.data.nickName,
    avatarUrl:this.data.avatarUrl,
    time:util.formatTime(new Date()),
    desc:this.data.content
  })
  this.setData({
    comment:this.data.comment.concat(arr),
    content:""
  })
  console.log(this.data.comment)
  console.log(this.data.nickName)
 setTimeout (function(){
  wx.showToast({
    title: '批评胜利',
    icon: 'success',
    duration: 2000
  })
},1000)
}
},

动态猎取批评时候　

在util.js中　

module.exports = {
  formatTime: formatTime
}

５.　猎取用户信息：

HTML构造

<view class="userInfo">
     <view class="userinfo-top"> 
     <image class="userinfo-avatar" src="{{item.avatarUrl}}" background-size="cover"></image>
     <text class="userinfo-nickname">{{item.nickName}}</text>
     <text class="text4">{{item.time}}</text>
     </view>
     <text class="con">{{item.desc}}</text>
</view>

js构造

    var that = this
    wx.getUserInfo({
   success: function(res) {
    var userInfo = res.userInfo
    var nickName = userInfo.nickName
    var avatarUrl = userInfo.avatarUrl
    that.setData({
      nickName:nickName,
      avatarUrl:avatarUrl
    })
  }
})

６.　用ｍｏｃｋ通报数据

var id=options.id; 
    //挪用运用实例的要领猎取全局数据
  var api_url='https://www.easy-mock.com/mock/5966410258618039284c745b/list/list';
  console.log(api_url);
  wx.request({
    url: api_url,
    method:'GET',
    success: function(res) {
    var info = res.data.data[id];
       that.setData({
              hidden: true,
              videoInfo: info
            })
    }
  })

坑．．．　

１．由第一个页面中通报过来的数据不在是一个数组，而是一个对象，获得其id就获得其内容。

２．宣布批评的时刻要对输入的批评内容举行推断，到场批评信息时能够把已有的批评信息和及时到场的批评信息当做两个数组，运用ｐｕｓｈ（）要领把批评内容加　入，再运用concat()要领把两个数组连接起来。

３.就是去看文档啊，看文档！

项目地点：

https://github.com/carolineLH…

对了，视频能够不太好放出来，有时刻要看缘分，由于视频自身权限缘由，我也好惆怅啊?

嘻嘻，假如您以为还不错的话，能够给个star哟，感谢。

    原文作者：caraline
    原文地址: https://segmentfault.com/a/1190000010337549
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

wechat-todayFood

开辟东西：

建立小顺序后：

页面注册：

结果预览：

项目功用：

详细功用剖析

1. 插进去一组图片，并完成跳转

２. scroll-view的运用，可转动视图地区天生

３. 视频播放，video组件运用（这是我踩过的坑！）

４. 宣布批评（最大的坑！）

５. 猎取用户信息：

６. 用ｍｏｃｋ通报数据

坑．．．

项目地点：

1. 插进去一组图片，并完成跳转　

２.　scroll-view的运用，可转动视图地区天生

３.　视频播放，video组件运用（这是我踩过的坑！）

４.　宣布批评（最大的坑！）　
　

５.　猎取用户信息：

６.　用ｍｏｃｋ通报数据

坑．．．　