微信小程序 商城开发(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 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
js实现感应鼠标图片透明度变化的方法
Feb 20 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
TypeScript高级用法的知识点汇总
Dec 17 Javascript
原生JS实现留言板
Mar 26 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 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中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
PHP使用递归生成文章树
2015/04/21 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
6行代码实现微信小程序页面返回顶部效果
2018/12/28 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
token 机制和实现方式
2020/12/15 Javascript
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
Python如何实现强制数据类型转换
2019/11/22 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
上海期货面试题
2014/01/31 面试题
工厂总经理岗位职责
2014/02/07 职场文书
开工仪式策划方案
2014/05/23 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
委托书英文
2015/01/28 职场文书
黄石寨导游词
2015/02/05 职场文书
导游词范文
2015/02/13 职场文书
行政撤诉申请书
2015/05/18 职场文书
主题班会开场白
2015/06/01 职场文书
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python