小白之微信小程序第一次完成搭建本地服务与页面进行交互

Posted 橙子不是orange

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小白之微信小程序第一次完成搭建本地服务与页面进行交互相关的知识,希望对你有一定的参考价值。

如果忘记了搭建json-server的过程,可看上一篇随笔

1. index.xml  代码

 1 <!--index.wxml-->
 2 <swiper indicator-dots="{{indicatorDots}}" indicator-dots="true"
 3   autoplay="{{autoplay}}" autoplay="true" interval="{{interval}}" duration="{{duration}}">
 4   <block wx:for="{{imgUrls}}" wx:key="">
 5     <swiper-item>
 6       <image src="{{item}}" class="slide-image"/>
 7     </swiper-item>
 8   </block>
 9 </swiper>
10 <view class=\'pro-list\'>
11   <view class=\'pro-item\' wx:for="{{ proList}}" wx:key="" bindtap=\'toDetail\' data-index="{{index}}"> 
12     <image class=\'pro-logo\' src="{{item.img}}"></image>
13     <view class=\'pro-body\'>
14       <view class=\'pro-title\'>{{item.title}}</view>
15       <text class=\'pro-desc\'>{{item.desc}}</text>
16       <view class=\'pro-footer\'> 
17         <image class="btn-detial" src="/images/btn_detail.png"></image>
18         <button class="btn-ask" open-type="contact">
<
image class=\'btn-img\' src="/images/btn_ask.png"/>
</
button> 20 </view> 21 </view> 22 </view> 23 </view>

 

2.index.wxss

 1 /**index.wxss**/
 2 swiper{
 3   width:100%;
 4   height:340rpx;
 5 }
 6 .slide-image{
 7   display: block;
 8   width:100%;
 9   height:100%;
10 }
11 .pro-list{
12   width: 100%;
13   height:auto;
14 }
15 .pro-item{
16   padding:30rpx;
17   overflow: hidden;
18 }
19 .pro-logo{
20   width:190rpx;
21   height:190rpx;
22   float: left;
23 }
24 .pro-body{
25   margin-left:213rpx;
26 }
27 .pro-title{
28   color:#212121;
29   font-size: 34rpx;
30   line-height: 1;
31 }
32 .pro-desc{
33   font-size: 24rpx;
34   color:#9a9a0a;
35   line-height:1.2;
36 }
37 .pro-footer{
38   overflow: hidden;
39 
40 }
41 .btn-detial{
42   float: left;
43   width:170rpx;
44   height:52rpx;
45 }
46 .btn-ask{
47   padding:0;
48   float:left;
49   width:224rpx;
50   height:52rpx;
51   margin-left:20rpx;
52   line-height: 1;
53 }
54 .btn-img{
55   width:100%;
56   height:100%;
57 }

 

3.index.js

//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    imgUrls: [
      \'/images/swiper01.jpg\',
      \'/images/swiper02.jpg\',
      \'/images/swiper03.jpg\'
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000,
    proList: null,
  },
  //事件处理函数
  toDetail: function (e) {
    console.log(e);
    var index = e.currentTarget.dataset.index;
    console.log(index);
  },
  getProList:function(){
    var self = this;
    wx.request({
      url: \'http://127.0.0.1:3000/data\', 
      method: \'GET\',
      success: function (res) {
        console.log(res);
        self.setData({
          proList: res.data,
        })
      }
    });
  },
  onLoad: function () {
    this.getProList();
  }
})

4. index.json (此json不是在项目里的index.json内写的,而是自己找个文件夹放置,然后json-sever index.json打开的,不明白可看上篇随笔)

 1 {
 2   "data": [
 3     {
 4       "img": "/images/pro_01.jpg",
 5       "title": "test",
 6       "desc": "这是个测试1"
 7     },
 8     {
 9       "img": "/images/pro_02.jpg",
10       "title": "test",
11       "desc": "这是个测试2"
12     },
13     {
14       "img": "/images/pro_03.jpg",
15       "title": "test",
16       "desc": "这是个测试3"
17     },
18     {
19       "img": "/images/pro_01.jpg",
20       "title": "test",
21       "desc": "这是个测试4"
22     }
23   ]
24 }

 

效果图

 

以上是关于小白之微信小程序第一次完成搭建本地服务与页面进行交互的主要内容,如果未能解决你的问题,请参考以下文章

Consul服务之微信H5炸金花出租平台搭建注册与发现

SAP成都研究院大卫哥:SAP C4C中国本地化之微信小程序集成

《选中圆角样式之微信小程序》

记一次微信小程序页面加载慢的排查过程

《scrollTop VS scrollLeft 之微信小程序》

APP自动化测试必知必会Appium之微信小程序自动化测试