微信小程序的探讨

从php获取json数据

1 . 将数组转化为json数据

<?php$x=$_POST['x'];//获取post数据//写文件$myfile = fopen("newfile.txt", "w") or die("Unable to open file!");$txt = $_POST['x'];fwrite($myfile, $txt);fclose($myfile);$v=array("x"=>$x , "m"=>"280");$json=json_encode($v);header("content-type:application/json");echo $json;?>

2 . 直接输出json数据

<?phpheader("content-type:application/json");// 尽量不要用text/json 某些浏览器会不兼容$json='{"name":"\u5F20\u4E09","addtime":"2014-01-01","username":"abc","tngou":[{"id":"1","img":"123"},{"id":"2","img":"12344444444444"}]}';//在json里传递json数组echo $json;?>

与外站进行数据传输

    <view class="bt-ok" bindtap="okClick">确定提交</view>

Page({//确认提交  okClick: function () {  var that = this;//此处必须重定义，才能在回调函数里使用      wx.request({   //发起url请求        url: 'http://wq.ycwjwl.com/json.php',        method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT        data: {  //传递参数          x: 'df so handsome',          y: '2'        },        header: {   //请求方式          'content-type': 'application/x-www-form-urlencoded'   //post must be this           //'content-type': 'application/json'     //this for get        },        success: function (res) {       //访问成功之后的返回值     return  data、statusCode、header           console.log(res);         var r = res.data.x;      //获取json参数里的x的值          that.setData({   //异步传输数据到前端            toastHidden: false,            toastTxt: "提交成功",            rt: r          });                 }      })      console.log("log:"+this.data.rt);     }  })

前后端交互

Page({ data: {//页面初始数据    orderList: [],    total: 0, //总价格     }, onLoad: function(options) {  //自带的事件   [说明](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html)    // Do some initialize when page load.  },    //自定义函数 returnClick: function () {    wx.navigateBack();  },})

 <view class="cost">总价：<span>￥{{total}}</span></view> <view class="bt-return" bindtap="returnClick">返回修改</view><view class="orderlist" wx:for="{{orderList}}" wx:key="item.id">     //遍历一个数组      <span>{{item.title}}</span><span style="float:right;">￥{{item.cost}} * {{item.num}}</span>    </view>

页面之间传值

//homePage({//提交订单  sublimitClick: function (e) {     var agrs = JSON.stringify(this.data.orderList);//将json数组转化为get参数    wx.navigateTo({      url: '../order/order?order=' + agrs    })  },})//orderPage({// 页面初始化 options为页面跳转所带来的参数  onLoad: function (options) {    //object 转 array    var order = JSON.parse(options.order);  //将get到的json字符串转化为json数组    var t_order = [];    var t_total = 0;    for (var k in order) {      if (order[k].num > 0) {        t_order.push(order[k]);        t_total = t_total + order[k].cost * order[k].num; //计算总价格      }    }    this.setData({  //与前端进行交互      orderList: t_order,      total: t_total    });  },  })

从外部文件获取json数据

Page({    data: {        scrollH: 0,        imgWidth: 0,        loadingCount: 0,        images: [],        col1: [],        col2: [],        page: 1    },loadImages() {        var that = this        wx.showToast({        title: '拼命加载中...',        icon: 'loading',        duration: 2000        })        wx.request({          url:'http://wq.ycwjwl.com/js.php?url=http://www.qq.com&page='+this.data.page,            success: function(res) {                    wx.hideToast()                that.setData({                    loadingCount: res.data.tngou.length,                    images: res.data.tngou,                    page: that.data.page+1                })            }        })    },    onLoad () {        wx.getSystemInfo({            success: (res) => {                let ww = res.windowWidth;                let wh = res.windowHeight;                let imgWidth = ww * 0.48;                let scrollH = wh;                this.setData({                    scrollH: scrollH,                    imgWidth: imgWidth                });                this.loadImages();            }        })    }})

<view style="display:none">  <image wx:for="{{images}}" wx:key="id" id="{{item.id}}" src="{{item.img}}" bindload="onImageLoad"></image></view><scroll-view scroll-y="true" style="height:{{scrollH}}px" bindscrolltolower="loadImages">  <view style="width:100%">    <view class="img_item">      <view wx:for="{{col1}}" wx:key="id">        <image bindtap="goProfile" data-avatar="{{item.img}}" src="{{item.img}}" style="width:100%;height:{{item.height}}px"></image>      </view>    </view>    <view class="img_item">      <view wx:for="{{col2}}" wx:key="id">        <image bindtap="goProfile" data-avatar="{{item.img}}" src="{{item.img}}" style="width:100%;height:{{item.height}}px"></image>      </view>    </view>  </view></scroll-view>

常用元素

<view class="lsit">  <!-- 设置一个显示区域   类似于html的div-->  <view class="liItem" wx:for="{{lists}}" wx:key="item.Id"><!-- wx:for="{{lists}}"设置存放数组   wx:key="item.Id"设置主键 -->    <navigator url="/pages/message/message?id={{item.Id}}">    <!-- 设置链接 -->      <view class="liImgs">       <!-- 设置一个显示区域 -->        <image src="{{item.mainimg}}" wx:if="{{item.mainimg!=undefined}}" class="liImg" />        <!-- 一张图片    wx:if="{{item.mainimg!=undefined}}"设置显示条件 -->      </view>      <view class="liDiv">        <text class="liTit">{{item.title}}</text>        <!-- 显示文字 -->        <text class="liCnt">{{item.content}}</text>      </view>    </navigator>  </view></view>