微信小程序 商城开发(ecshop )简单实例


Posted in Javascript onApril 07, 2017

最近小程序特别火,所以我们公司也针对ecshop平台对接了小程序

包括完整的用户系统和购物体统

用户系统:收货地址,订单管理,消息管理,优惠券管理等等

购物系统支付购物车管理,微信支付等等

微信小程序 商城开发(ecshop )简单实例

微信小程序 商城开发(ecshop )简单实例

微信小程序 商城开发(ecshop )简单实例

微信小程序 商城开发(ecshop )简单实例

微信小程序 商城开发(ecshop )简单实例

微信小程序 商城开发(ecshop )简单实例

相信有很多小伙伴都用的是ecshop作为自己的商城,最近小程序又火了,于是就有人问ecshop对接小程序怎么做。

正好最近在开发一个对接ecshop的小程序项目,就将我的一些开发经验分享一下。

一:扫描小程序二维码后的用户信息的获取和缓存

获取用户信息需要用到两个api

wx.login(OBJECT)

调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的 会话密钥(session_key)。用户数据的加解密通讯需要依赖会话密钥完成。

wx.getUserInfo(OBJECT)

获取用户信息,需要先调用 wx.login 接口。

获取缓存需要用到的api

wx.setStorageSync(KEY,DATA)

将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。

下面就是具体实例代码:

我们可以将这段写在公共的app.js页面

//app.js 
App({ 
 onLaunch: function() { 
 }, 
 getUserInfo: function (cb) { 
 var that = this 
 if (this.globalData.userInfo) { 
  typeof cb == "function" && cb(this.globalData.userInfo) 
 } else { 
  //调用登录接口 
  wx.login({ 
  success: function (res) { 
   if (res.code) { 
   var userid = wx.getStorageSync('scuserid') 
   var sc_session_id = wx.getStorageSync('sc_session_id') 
   var openid = wx.getStorageSync('sc_session_id') 
   if(!userid){ 
     wx.request({ 
     url: 'xxxx/data.php?action=sendCode', 
     data: { 
      code: res.code, 
     }, 
     success: function (res) { 
      //console.log(res) 
      var status = res.data.status 
      if(status == 1){ 
       wx.showToast({ 
       title: res.data.message, 
       icon: 'success', 
       duration: 2000 
       }) 
      }else if(status == 2){ 
       var scuserid = res.data.userid 
       if(scuserid > 0){ 
        //缓存user_id 
        wx.setStorageSync('scuserid', scuserid) 
        wx.setStorageSync('openid', res.data.openid) 
        wx.setStorageSync('sc_session_id', res.data.session_id) 
       } 
      }else{ 
       //缓存session_id 
       wx.setStorageSync('openid', res.data.openid) 
       wx.setStorageSync('sc_session_id', res.data.session_id) 
       //获取用户信息 
       wx.getUserInfo({ 
       success: function (res) { 
        that.globalData.userInfo = res.userInfo 
        typeof cb == "function" && cb(that.globalData.userInfo) 
        //console.log(res); 
        wx.request({ 
        url: 'xxxx/data.php?action=saveUserInfo', 
        data: { 
         userinfo: res.userInfo, 
         openid: wx.getStorageSync('openid'), 
        }, 
        success: function (res) { 
         //console.log(res.data) 
         var status = res.data.status 
         if(status == 1){ 
          wx.showToast({ 
           title: res.data.message, 
           icon: 'success', 
           duration: 2000 
          }) 
         }else{ 
          var scuserid = res.data.userid 
          if(scuserid > 0){ 
          //缓存user_id 
          wx.setStorageSync('scuserid', scuserid) 
          } 
         } 
        } 
        }) 
       } 
       }) 
      } 
     } 
     }) 
   } 
   } 
  } 
  }) 
 } 
 }, 
 globalData: { 
 userInfo: null 
 } 
})

二:获取微信用户的信息以及如何将用户信息缓存起来

要获取用户的地理信息则要用到

wx.getLocation(OBJECT)

获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用;当用户点击“显示在聊天顶部”时,此接口可继续调用。

具体实例代码:

//获取纬度,经度 
 wx.getLocation({ 
  type: 'wgs84', 
  success: function (res) { 
  var latitude = res.latitude 
  var longitude = res.longitude 
  wx.request({ 
   url: 'http://XXXXXX/data.php?action=get_dq', 
   data: { 
   latitude: latitude, 
   longitude: longitude 
   }, 
   headers: { 
   'Content-Type': 'application/json' 
   }, 
   success: function (res) { 
   //console.log(res.data) 
   var province = res.data.result.addressComponent.province 
   //console.log(province) 
   var city = res.data.result.addressComponent.city 
   var district = res.data.result.addressComponent.district 
   var diqu = province+city+district 
   //缓存当前所在地区 
   wx.setStorageSync('dq_diqu', diqu) 
   wx.setStorageSync('dq_district', district) 
   } 
  }) 
  } 
 }) 
if($act=="get_dq"){ 
 //获取当然城市 
 //http://api.map.baidu.com/geocoder/v2/?ak=327381a342077a8f3d584251b811cce5&callback=renderReverse&location=30.593099,114.305393&output=json 
 //纬度 
 $latitude = $_REQUEST['latitude']; 
 //经度 
 $longitude = $_REQUEST['longitude']; 
 $url = 'http://api.map.baidu.com/geocoder/v2/?ak=327381a342077a8f3d584251b811cce5&location='.$latitude.','.$longitude.'&output=json'; 
 $result = file_get_contents($url); 
 exit($result); 
}

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JQuery 入门实例1
Jun 25 Javascript
jQuery 源码分析笔记(3) Deferred机制
Jun 19 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
Nov 26 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
js控制文本框禁止输入特殊字符详解
Apr 07 #Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 #Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 #Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 #Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 #Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 #Javascript
socket.io实现在线群聊功能
Apr 07 #Javascript
You might like
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
wxPython事件驱动实例详解
2014/09/28 Python
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
分享Python开发中要注意的十个小贴士
2016/08/30 Python
python opencv实现图像边缘检测
2019/04/29 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
工会文体活动总结
2015/05/07 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书
详解如何用Python实现感知器算法
2021/06/18 Python
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
python编程项目中线上问题排查与解决
2021/11/01 Python