微信小程序 商城开发(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 相关文章推荐
Cookie 注入是怎样产生的
Apr 08 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
vue 中的keep-alive实例代码
Jul 20 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
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下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
thinkphp分页实现效果
2016/10/13 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
javascript 类定义的4种方法
2009/09/12 Javascript
Javascript 中介者模式实例
2009/12/16 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
Windows8下搭建Node.js开发环境教程
2014/09/03 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
js实现随机8位验证码
2020/07/24 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
Python中特殊函数集锦
2015/07/27 Python
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
python同步两个文件夹下的内容
2019/08/29 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
python中如何进行连乘计算
2020/05/28 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
Python实现简单猜数字游戏
2021/02/03 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
html5 div布局与table布局详解
2016/11/16 HTML / CSS
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
《盘古开天地》教学反思
2014/02/28 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书