提供微商城·微分销·小程序开店需求
5分钟开通你的微信商城店铺!2017-05-22 作者:黄保
2017年5月22日,微信小程序推出之时,限制非常多,现在越来越开放。微信小程序开发教程也受到越来越多人的关注,下面从多个方面来谈谈微信小程序开发教程的一些内容。
什么是微信小程序?
微信小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。这体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题,应用将无处不在,随时可用,但又无需安装卸载。
作为一个菜鸟级的初学者,笔者懵懵懂懂的花了点时间仿了一个必胜客的订餐小程序,希望能对一些有需要的朋友提供一点启发。
首页页面,结构如下图所示:
点击饭食,跳转到了饭食页面:
订单页面:
点击登录,跳转到登录页面:
最后是我的页面:
app.json:
{ "pages":[ "pages/index/index", "pages/dingdan/index", "pages/my/index", "pages/action/action", "pages/denglu/denglu", "pages/fanshi/fanshi", "pages/logs/logs" ], "window":{ "backgroundTextStyle": "light", "navigationBarTextStyle": "black", "navigationBarTitleText": "必胜客宅急送", "navigationBarBackgroundColor": "yellow", "backgroundColor": "#F2F2F2", "enablePullDownRefresh": true }, "tabBar": { "color": "#666666", "selectedColor": "yellow", "borderStyle": "white", "backgroundColor":"#ffffff", "list": [{ "pagePath": "pages/index/index", "iconPath": "image/1.png", "selectedIconPath": "image/2.png", "text": "首页" },{ "pagePath": "pages/dingdan/index", "iconPath": "image/3.png", "selectedIconPath": "image/4.png", "text": "订单" },{ "pagePath": "pages/my/index", "iconPath": "image/5.png", "selectedIconPath": "image/6.png&quo微信小程序 apit;, "text": "我的" }] } }
1.实现首页头部轮播图效果
<swiper class="banner&怎么做小程序quot; indicator-dots="true" autoplay="true" interval="3000" duration="500"> <block wx:for="{{banners}}" wx:key="id"> <swiper-item> 小程序设计 <image src="{{item.img}}"/> </swiper-item> </block> </swiper>
在index.js中设置数据
Page({ data: { items:[], banners: [ { id: 1, img: 'https://img.4008123123.com/resource/BannerP/Banner_1_2017_04_12_15_21_14.jpg', }, { id: 2, img: 'https://img.4008123123.com/resource/BannerP/Banner_1_2017_04_12_15_40_55.jpg', }, { id: 3, img: 'https://img.4008123123.com/resource/BannerP/Banner_1_2017_04_12_15_43_38.jpg', }, { id: 4, img: 'https://img.4008123123.com/resource/BannerP/Banner_1_2017_04_12_15_46_28.jpg', } ] } })
实现效果:
2.利用navigator实现页面的跳转
一种方法是在xwml中直接使用<navigator url="../action/action" >披萨</navigator>,
然后在公共页面设置好路径"pages/action/action" 即可实现页面条状
另一种方法是首先对text 设置监听事件
制作小程序<view bindtap="toast" class="usermotto">
<text></text>
</view>
然后对该text 设置事件跳转。
toast: function() {
wx.navigateTo({
url: "../action/action" })
}
最后需要在 app.json 中添加页面配置
"pages":[ "pages/index/index", "pages/dingdan/index", "pages/my/index", "pages/action/action", "pages/denglu/denglu", "pages/fanshi/fanshi", "pages/logs/logs" ]
3.利用Easy Mock 模拟一个数据库
到了这一步,估计有些刚入门的朋友是不太了解的Easy Mock,我在这简单的解释一下。EasyMock 是一套通过简单的方法对于指定的接口或类生成 Mock 对象的类库,它能利用对接口或类的模拟来辅助单元测试。
在Mock数据里面手动设置模拟数据,在点击窗口打开就可以得到我们想要的网站,然后在index.js中进行引用。
onLoad: function () { var that = this; wx.request({ url: 'https://www.easy-mock.com/mock/59082eb57a878d73716e5b73/aa/list', method: 'get', data: {}, header: { 'Accept': 'application/json' }, success: function(res) { console.log(res.data.items); that.setData({ items: res.data.items }); } }) }
最后在index.wxml中进行引用就可以实现首页数据的引用。
<block wx:for="{{items}}" wx:key="item"> <view class="flex item" bindtap="bindViewTap"> <view class="item_left"> <image src="{{item.imageUrl}}"/> </view> <view class="flex_auto item_middle"> <view> <text class="title">{{item.sub_name}}</text> <text class="title price">¥{{item.sub_price}}</text> <text class="title">{{item.sub_desc}}</text> </view> </view> <view class="item_right"> <navigator url="../action/action" class="action"> <button>开始订餐</button></navigator> </view> </view>微信小程序appid </block>
点击开始订餐,跳转到点餐页面:
hishop微信小程序可以实现一键开通微信小程序,结合移动云商城,可以实现七大端口的线上和线下结合模式。
推荐文章
微信小程序滚动字幕已经是当下微信小程序开发最热门的话题,下面将从多方面来谈谈微信小程序滚动字幕及弹幕的实现技巧...
2017年6月14日,微信小程序开发教程已经是当下最热门的话题,下面将从多方面来谈谈Array数组对象相关的内容。...
最近在微信社群都可以看到拼多多的拆红包的界面,这又是一款拼多多的裂变营销方式,很多朋友对此表示很怀疑,到底是不...
Hishop最新消息,有这样一个小程序可以无需询问,就知道朋友的位置了,那么是如何定位分享位置的呢。...
目前最好最受欢迎的收银系统品牌有HiShop友数、商米等,每个品牌都有各自的特点和主要发展的行业,下面小编就为大家来介...
餐饮行业是国内规模万亿级别的市场,如今市面上的餐饮品牌门店数不胜数,在如今这个互联网时代,许许多多餐饮门店都开...
连锁超市在选择收银系统的时候,首先会考虑到收银系统的操作便捷,能够给收银员的工作提升效率的同时,避免出现错误,...
超市收银系统百科 超市收银系统是零售业中用于处理销售交易的关键技术,它不仅提高了结账效率,还增强了顾客的购物体...
酒吧收银系统百科 1. 酒吧收银系统概述 酒吧收银系统是专为酒吧、夜店等娱乐场所设计的一套集成化管理软件,它能够实现...
生鲜超市收银系统十大品牌有哪些呢?下面小编就为大家来讲解一下各收银系统的特...