微信小程序 商城开发(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 相关文章推荐
JavaScript入门之对象与JSON详解
Oct 21 Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 Javascript
实用的Vue开发技巧
May 30 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
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安装为Apache DSO
2006/10/09 PHP
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
学习php中的正则表达式
2014/08/17 PHP
浅谈PHP的反射机制
2016/12/15 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
一个tab标签切换效果代码
2009/03/27 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
Javascript中replace()小结
2015/09/30 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
Python 专题四 文件基础知识
2017/03/20 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
简单了解python变量的作用域
2019/07/30 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
python 高阶函数简单介绍
2021/02/19 Python
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
保密工作责任书
2014/04/16 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript