注册登录

微信小程序开发教程新手怎么快速入门

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微信小程序可以实现一键开通微信小程序,结合移动云商城,可以实现七大端口的线上和线下结合模式。

重磅推荐:小程序开店目录

第一部分:小商店是什么

第二部分:如何开通一个小商店

第三部分:如何登录小商店

第四部分:开店任务常见问题

第五部分:小商店可以卖什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收货/物流

第九部分:小程序怎么结算

第十部分:小程序客服

第十一部分:电商创业

第十二部分:小程序游戏开发

电话咨询 微信咨询 预约演示 0元开店