微信小程序 商城开发(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 相关文章推荐
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
jquery 多行滚动代码(附详细解释)
Jun 17 Javascript
js 分页全选或反选标识实现代码
Aug 09 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 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
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
jquery操作select option 的代码小结
2011/06/21 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
windows下python安装小白入门教程
2018/09/18 Python
python实现可变变量名方法详解
2019/07/01 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
美国最大的团购网站:Groupon
2016/07/23 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
高中生物教学反思
2014/02/05 职场文书
办公室副主任职责范本
2014/03/08 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
村党建工作汇报材料
2014/11/02 职场文书
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技
mysql数据库如何转移到oracle
2022/12/24 MySQL