微信小程序 商城开发(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文件缓存的代码
Apr 09 Javascript
基于jquery的修改当前TAB显示标题的代码
Dec 11 Javascript
js中string转int把String类型转化成int类型
Aug 13 Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
vuejs点击class变化的实例
Sep 05 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 Javascript
原生js中运算符及流程控制示例详解
Jan 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中对xml读取的相关函数的介绍一
2008/06/05 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
php生出随机字符串
2017/07/06 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
一些技巧性实用js代码小结
2009/10/14 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
angular中的post请求处理示例详解
2020/06/30 Javascript
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
PyTorch安装与基本使用详解
2020/08/31 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
init进程的作用
2015/08/20 面试题
复核员上岗演讲稿
2014/01/05 职场文书
将相和教学反思
2014/02/04 职场文书
道路建设实施方案
2014/03/18 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
开幕式邀请函
2015/01/31 职场文书
管理失职检讨书范文
2015/05/05 职场文书
结婚主持人致辞
2015/07/28 职场文书
mysql中between的边界,范围说明
2021/06/08 MySQL