小程序模板网

微信小程序实用功能代码分享二

作者:lu521

一、从服务器获取数据

 

1.设置config

HTTP_BASE_URL_JSON :'https://api.bssolution.cn/apis'

 

2.请求服务器(三个get  post  unload)

function PostJSON (url,data, cb ){

                wx.request({

                method:'POST',

                url:  config.HTTP_BASE_URL_JSON + url,

                data: data,

                success: (res) => {

                typeof cb == "function" && cb(res.data,"");

                },

                 fail: (err) => {

                 typeof cb == "function" && cb(null,err.errMsg);

                 console.log("http请求:"+config.HTTP_url);

                 console.log(err)

       }

       });

};

        

3.绑定到http上

httpPostJSON: PostJSON

 

4.在该页面的js中

写入方法获取数据,将该方法绑定在onload中(setData)

 

二、使用json数据

 

1.直接在页面中应用

a.在该页面的js上,在data中写入数据    items:[{},{},{}]

b.遍历到网页中         

wx:for="{{items}}"  wx:key="{{item.id}}"   

使用:{{item.title}}

 

二层遍历的时候 wx:for="{{item}}"    

使用:{{item}}

 

2.调用template模板

a.import引入模板

b.在该页面的js上,在data中写入数据    

list_index_item1:{

items:[{},{},{}]

}

注:list_index_item1是模板的名字

c.遍历到网页中(同直接在页面中应用的 b.)

 

二、点击列表list进入不同的详情页detail

 

(在index上)

1.在服务器获取数据

例如:http.httpGet("/v2/goods?page=1&per_page=10",{

                appid:config.APPID,

         },function(res){

                var goods_list;

                that.setData({

                goods_list:res

                });

                });

 

2.在wxml页面上遍历数据

在上一个view遍历数据,在下面的view上绑定事件,同时设置相应的id

例如:<block  wx:for="{{goods_list.products}}" >

        <view class="list_left_right_body"    bindtap="tiao"  id="{{item.id}}" >

        <view class="list_left_right_img" >

        <image src="{{item.default_photo.thumb}}" />

        </view>  

        </view>

       </block>

 

3.事件的编写

第一步:获取到相应的id

第二步:跳转到相应的页面

例如:tiao:function(e){

      var id = e.currentTarget.id

      wx.navigateTo({

            url: '../details/detail?name=asdfads&id='+id,

 

                })

       }

 

(在detail上)

4.detail页面引入参数

在onload方法里注入options参数,即可获取

例如:onLoad:function(options){

      console.log("event------------"+options.id);

      console.log("event------------"+options.name);

      }

 

5.从后台上获取detail页面的数据

例如: onLoad:function(options){

    var that = this;

    var id = options.id;

    var data = {id:id};

    http.httpGet("/v2/detail?id="+id,data,function(res){

        var goods_info = res;

        that.setData({

            goods_info: goods_info 

        });

        console.log("goods_info------------"+goods_info);

        console.log("goods_info-image------------"+res.photos[0].thumb);

    });

}

 

6.在detail页面插入数据

注:不需要wx:for=""遍历,直接调用就可以

例如: <view class="title">{{goods_info.name}}</view>

<view class="price">¥{{goods_info.current_price}}</view>

<view class="number">成交笔数{{goods_info.sales_count}}</view>



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23396.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询