-- 时常在想,怎么样才能把知识写的清晰,其实是我理解的不够清晰

微信小程序其实是一个客户端页面,也是需要和服务器交互才能体现数据。

1 --服务器搭建Web API :MVC4 中的一个模板, 如下是Query API  的一个Get 方式,只是为了了解 JsonConvert.SerializeObject(_dt.ToList());   值如何返回到界面

   #region  --- 查询绑定信息 ---
[HttpGet]
public string GetQuery(string strEcNo)
{
//查询此EC单是否被绑定过
try
{
PcdbE.PcdbDataContext _Pc = new PcdbE.PcdbDataContext(); var _dt = from s in _Pc.EcDressLogs
where s.EcNo == strEcNo
select s; var _count = _dt.Count(); if(_count.Equals())
{
return "没有绑定记录";
} return JsonConvert.SerializeObject(_dt.ToList());
}
catch (Exception)
{
return "error";
} }
#endregion

2 -- 客户端如何Call 个API  ,先要在小程序管理员去注册API 发布的服务器域名, https://  这部分,好像之前做过了
BtnQuery 是绑定给界面的一个方法,在.wxml文件中

 <!--按钮-->
<view class="loginBtnView">
<button type="primary" bindtap="BtnQuery"> Query </button>
</view>

3 -- 在.js 文件中

 BtnQuery: function (){
if (this.data.ecno.length == 0)
{
wx.showToast({
title: '不能为空',
icon: 'loading',
duration: 2000
}) }else{ wx.request({
method: "GET",
url: 'https://(这里是你在微信小程序注册的你发布的API 域名)/api/pc/GetQuery', //仅为示例,并非真实的接口地址
data: {
strEcNo: this.data.ecno
},
header: {
'content-type': 'application/json' // 默认值
},
success: (res) => {
this.setData({
warning: res.data
})
var result = JSON.parse(res.data);
if(res.data !="")
{
console.log(result)
}
var x = result[0].Xdress
var y = result[0].Ydress
wx.navigateTo({ url: '/pages/tzdress/tzdress?xdress='+x+'&ydress='+y})
} }) }
},

主要的部分还是succes 返回里面的数据格式, 由于在API 中返回的是list ,我这里因为只有一个数据,所以取得是list里面第一个位置,当然如果是list表数据多,就需要写循环的方式了, 而最后面的wx.navigateTo 是为了在微信小程序客户端进行,页面跳转使用的,并传递了,值

4 --  那么问题来了:

wx.navigateTo({ url: '/pages/tzdress/tzdress?xdress='+x+'&ydress='+y}) 

传递的值,在对应页面又如何的接收?

对应就需要到tzdress.js文件中去看, onLoad 是小程序页面的生命周期中的一个页面加载部分,页面加载时执行, 而值传递,值都是在options中的。

所以取值就是options.xdress 参数名称即可

  onLoad: function (options) {

     var _this = this;
wx.getSystemInfo({
success: function (res) {
_this.setData({
view: {
Height: res.windowHeight - 150
},
longitude: options.xdress,
latitude: options.ydress,
circles: [{
latitude: options.ydress,
longitude: options.xdress,
color: '#FF0000DD',
fillColor: '#7cb5ec88',
radius: 3000,
strokeWidth: 1 }]
})
}
})
}

20171018 微信小程序客户端数据和服务器交互的更多相关文章

  1. 微信小程序wx.request请求服务器json数据并渲染到页面

    [原文出自]: https://blog.csdn.net/weixin_39927850/article/details/79766259 微信小程序的数据总不能写死吧,肯定是要结合数据库来做数据更 ...

  2. 微信小程序开放数据解密 AES-128-CBC 解密(C#版本)

    最近在开发小程序,需要跟微信服务端交互,微信敏感数据都有加密返回,需要在服务端接收进行解密后再返回给客户端小程序,今天就通过C# 进行数据的解密,官方下载下来是Node.C++.php等,就是没有C# ...

  3. 微信小程序请求数据

    微信小程序请求数据,在页面展示,可以在onLoad生命周期中进行请求. 1.新建目录http,新建文件http.js 2.在js文件中暴露需要使用的变量 var baseUrl = 'http://1 ...

  4. 微信小程序之数据缓存

    关于缓存,举个示例,假定我不是通过微信授权登录的方式,小程序又是如何识别我登录后的身份呢???效果图: 这个功能我是通过缓存实现的. 关键核心代码如下: wx.setStorage({ key: 'u ...

  5. 微信小程序-关于post 过来服务器没有获取到数据问题

    查看一下服务器接收的post 参数是以什么形式接收的 微信给出得demo 请求的方式是Json 参数传递的 所以如果服务器使用的from 表单形式接收数据需要更改微信小程序中的 header 将 he ...

  6. 微信小程序用户数据解密

    概述 通过微信web开发者工具创建登录,获取用户信息,发送至后台,进行用户数据解密 详细 代码下载:http://www.demodashi.com/demo/10705.html 一.准备工作 1. ...

  7. 微信小程序动态数据跑马灯组件编写

    开发必备:熟悉微信小程序组件开发 开发思路:如果只有一条数据,直接用css3关键帧动画:如果有多条数据,则在当前动画运动到一定时间的时候,将其数据替换掉,使之在视觉效果上有一个从下到上播放的状态.数组 ...

  8. 【微信小程序】数据与界面UI不同步,不能直接操作Page.data

    问题:数据层与UI不同步 微信小程序也采用UI绑定数据源的形式,根据以前做WPF的经验,直觉上认为修改了数据层(Page.data)后,UI会自动更新,然而实验发现数据层修改后UI层未修改,导致数据层 ...

  9. 微信小程序 --- 缓存数据

    保存数据  /  读取数据  /  删除数据  /  数据异步操作 每一个微信小程序都可以有自己的本地缓存,可以通过wx.setStorage( wx.setStorageSync) ,wx.getS ...

随机推荐

  1. 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载

    title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...

  2. Error LNK1104 cannot open file &#39;libboost_system-vc140-mt-gd-1_58.lib&#39;

    I had a similar problem when trying to use boost unit testing in Visual Studio 2015 (Community Editi ...

  3. perl 调用shell脚本

    perl调用shell命令 perl调用shell shell调用perl Perl执行shell命令的几种方式及其区别

  4. ural 1075. Thread in a Space

    1075. Thread in a Space Time limit: 1.0 secondMemory limit: 64 MB There are three points in a 3-dime ...

  5. 使用curl获取网站的http的状态码

    发布:thebaby   来源:net     [大 中 小] 本文分享一例shell脚本,一个使用curl命令获取网站的httpd状态码的例子,有需要的朋友参考下.本文转自:http://www.j ...

  6. python selenium启动浏览器打开百度搜索

    python selenium打开百度搜索 #!usr/bin/python from selenium import webdriver import time browser = webdrive ...

  7. jsp相对路径和绝对路径小谈

    很长一段时间纠结过JSP中的相对路径和绝对路径,也研究过一段时间,今天趁着有点时间,记下来,也有大家分享一下. 1)我们先来理解一下相对路径 首先还是我们的开始,建一个WEB项目,只是测试一下而已,名 ...

  8. 九天学会Java,第一天,变量和数据类型,赋值和输出

    用9天入门三门编程语言,有可能嘛,尤其是对没有基础的同学来说?对于想学好的编程的人来说,无论从哪一门语言开始入手,语言的本身其实并不是我们最应该的关心的,至少不是作为一个初学者首先关心的. 网络上,网 ...

  9. NHibernate教程(19) —— 一级缓存

    本节内容 引入 NHibernate一级缓存介绍 NHibernate一级缓存管理 结语 引入 大家看看上一篇了吗?对象状态.这很容易延伸到NHibernate的缓存.在项目中我们灵活的使用NHibe ...

  10. Python-接口自动化(三)

    python基础知识(三) (三)函数 1.函数 函数的语法: def 函数名(): 函数体 a.函数的关键字是def,函数体就是你希望这个函数帮你实现什么功能,函数名命名需要遵循的原则是以小写字母分 ...