微信小程序开发之实战--仿今日美食food-职坐标

微信小程序开发之实战--仿今日美食food

凌雪 2018-10-10 来源：网络阅读 1487 评论 0

摘要：本文将带你了解微信小程序开发之实战--仿今日美食food，希望本文对大家学微信有所帮助。

本文将带你了解微信小程序开发之实战--仿今日美食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"
],
效果预览：项目功能： * 首页插入一组图片，并实现跳转　 * scroll-view的使用，可滚动视图区域生成　 * 视频播放，video组件使用　 * 发表评论　 * 评论显示　 * 获取数据及交互反馈　 * 获取用户信息　 * 动态获取评论时间　 * 利用mock 传数据　具体功能解析1. 插入一组图片，并实现跳转　因为是要插入一组图片，所以我们可以用wx:for={{}}来实现 HTML结构
　

　　
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结构

            {{videoInfo.title}}
            {{videoInfo.number}}
            {{videoInfo.time}}
            {{videoInfo.desc}}





            {{item.nickName}}
            {{item.time}}

            {{item.desc}}






            {{item.nickName}}
            {{item.time}}

            {{item.desc}}


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

console.log("handleLower");
},
３.　视频播放，video组件使用（这是我踩过的坑！）HTML结构






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结构　

        发布


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结构


     {{item.nickName}}
     {{item.time}}

     {{item.desc}}

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
            })
    }
})