微信小程序 商城开发(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 相关文章推荐
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
javascript web页面刷新的方法收集
Jul 02 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
js制作简易年历完整实例
Jan 28 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 Javascript
vue 图片裁剪上传组件的实现
Nov 12 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中的unset究竟会不会释放内存
2013/07/18 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
Python实现二维数组输出为图片
2018/04/03 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
python 随机森林算法及其优化详解
2019/07/11 Python
python生成随机红包的实例写法
2019/09/02 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
Django中FilePathField字段的用法
2020/05/21 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
外贸英语毕业生自荐信
2013/11/14 职场文书
大学生的应聘自我评价
2013/12/13 职场文书
酒店执行总经理岗位职责
2013/12/15 职场文书
《囚绿记》教学反思
2014/03/01 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA