欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 微信小程序实战--仿今日美食food

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:740

高端HTML5响应式企业通用网

2020-05-06   浏览:521

html5响应式外贸网站英文版

2020-05-08   浏览:511

HTML5自适应律师工作室类网

2020-04-04   浏览:505

HTML5影视传媒文化公司类网

2020-05-12   浏览:502

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

发布时间:2020-11-16  

初学微信小程序,嗯,还不错嘛,挺有趣的! 于是自己动手撸了一个。你别说一看标题就知道我是吃货呀,我是不想这么快就被揭穿的,但是这个小程序就是这么有意思呀。好了我要进入正题了,我们一起去看看我的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结构

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

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

  

js配置 
 我是在这里插入了图片的地址信息,在data数组里面

//事件处理函数 bindViewTap: function(e) { console.log(e.currentTarget.id) var id = e.currentTarget.id wx.navigateTo({ url: '../detail/detail?id='+ id })   },2. scroll-view的使用,可滚动视图区域生成

在需要设置滚动区域,用scroll-view标签把内容包住
HTML结构

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

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

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

 

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

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

js配置 

handleUpper: function (event) { console.log("handleUpper"); },handleLower: function (event) { console.log("handleLower"); }, 3. 视频播放,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 }) } }) }, }) 4. 发表评论(最大的坑!)   

包括 :
  * 获取数据及交互反馈 
  * 获取用户信息 
  * 动态获取评论时间 
HTML结构 

发布