微信/抖音商城小程序源码开源版（下载）

　　在开商城小程序系统时，访问小程序的授权登录可以快速实现用户注册和登录的步骤，是快速建立用户体系的重要一步。本文将介绍Python+sanic+微信小程序的全栈解决方案，实现用户快速注册登录。
　　源码：xcxyms.top
　　这个过程分为两个部分：
　　●小程序使用 wx.login() API 获取代码并调用 wx.getUserInfo () API 获取加密数据和IV，然后将这三个信息发送给第三方服务器。
　　●第三方服务器获取code、加密数据和IV后，与code_Key交换session，然后设置session_Key，使用加密数据和IV解密在服务器端获取用户信息。根据用户信息，返回JWT数据，完成登录。

　　商城小程序源码系统构成：
　　一、前端部分（对用户或客户端可见的部分）。例如，首页、目录页、产品信息页等。网站设计；
　　二、数据库；
　　三、管理员控制面板。添加，删除项目，接收订单。这通常由管理员或操作员使用。
　　方法#1：从头开始创建一切（从零开始）
　　许多网站（包括在线商店）都是用 PHP 编写的。但是没有人用纯 PHP 编写代码。因为这将非常耗时。有许多基于 PHP 的所谓“代码库”（也称为框架）。
　　最广泛使用的 PHP 框架是 Laravel、Yii 或 Codeigniter。请记住：程序员通常不会使用所有编程语言。甚至 PHP 程序员也有自己喜欢的框架。有些人喜欢使用 Laravel 框架，有些人喜欢他们喜欢的方法。因此，您选择一种编程语言（例如 PHP）来构建您未来的网站，然后选择基于该语言的框架。而已！
　　从头开始创建所有内容有一些优点和缺点。
　　坏消息是：你会花更多的时间和金钱。在创建过程中可能会出现许多意想不到的错误（错误）。需要在开展业务之前测试所有功能。
　　好消息是：你可以无限制地创造任何你想要的东西。您可以随时扩展您网站的功能。

 
　　从头开始创建它的步骤。
　　1、规划和设计。聘请网页设计师来创建您未来网站的界面。这也需要一些时间，具体取决于您的设计师的专业程度。但现在有现成的设计库——预制的网络元素。也称为设计库或 UI 工具包。
　　2、HTML/CSS 编码。因此，一旦您对未来网站进行了详细设计，就需要将它们转换为 html / css 文件。
　　3、创建数据库。可以使用mysql、postgresql、mongodg等。
　　4、将您的 html 页面与数据库集成。
　　5、测试和修复错误。
　　6、上传到服务器并启动。
　　因此，从头开始创建所有内容的过程完全取决于您。只需要金钱、时间和经验丰富的程序员。
　　方法#2：使用现成的代码
　　还有另一种方法可以节省大量时间和精力。如果有人使用 PHP 或其他语言从头开始创建站点，那么您可以获得该代码的副本以加快该过程。
　　方法#3：CMS系统的使用
　　CMS（内容管理系统）。这也是与上述方法类似的现成代码。但它不是“某人”创建的代码，而是一个拥有自己的生态系统和支持团队的社区。一个例子是 Wordpress CMS。
　　Wordpress 也是一个用 PHP 创建的系统。换句话说，它是一个用 PHP 创建的现成网站，有自己的管理面板和前视图。通常 CMS 系统有额外的插件。插件——它是一组可以增强系统功能的附加代码。例如，Wordpress 实际上是为简单的博客网站设计的。但它有一个名为 Woocommerce (woocommerce.com) 的插件，允许创建在线商店。
　　方法#4：SAAS系统的使用
　　这是最简单快捷的方法。SAAS 是指软件即服务。您需要开立账户并开始上传您的产品。
　　最流行的 SAAS 系统是 shopify.com。它通过为您的网站预先制作的设计模板提供所有基本功能。或者您也可以创建自己的设计。经营您的商店只需按月付费。
　　SAAS 系统的好处是，您无需担心托管服务器、寻找程序员、安全性、支付系统等。Shopify 已经与 Paypal 和 Visa、Master Card 集成。
　　方法#5：基于 Headless CMS 或 API 创建
　　这种方法通常使用现代 javascript。例如。ReactJS、VueJS 或其他库。这意味着，您的前端（用户的可视部分）和后端（管理控制）部分是完全分开的。它们通过 API（应用程序编程接口）或特殊代码进行通信，以从数据库中检索任何信息（例如，产品名称和图片）。
　　您可以使用此方法使用 PHP + Larevel 创建您的网站。或者您可以使用现成的代码库。
　　它提供了您需要的一切（管理控制、数据库等），但没有前端（您网站的可视化部分）。您将使用他们的 API 与您的自定义 html 模板集成。有时这种方法也称为 SPA（单页应用程序）

　　小程序端代码：
　　为简单起见，在小程序启动时请求授权。代码实现如下。

　　//app.js
　　var config = require('./config.js')
　　App({
　　onLaunch: function() {
　　//Call API to get data from local cache
　　var jwt = wx.getStorageSync('jwt');
　　var that = this;
　　if (! jwt.access_ Token) {// check whether JWT exists, if not, call login
　　that.login();
　　} else {
　　console.log(jwt.account_id);
　　}
　　},
　　login: function() {
　　//Login part code
　　var that = this;
　　wx.login({
　　//Call login to get the code
　　success: function(res) {
　　var code = res.code;
　　wx.getUserInfo({
　　//Call getUserInfo to get encrypteddata and IV
　　success: function(res) {
　　// success
　　that.globalData.userInfo = res.userInfo;
　　var encryptedData = res.encryptedData || 'encry';
　　var iv = res.iv || 'iv';
　　console.log(config.basic_token);
　　wx.request ({// send a request to get JWT
　　url: config.host + '/auth/oauth/token?code=' + code,
　　header: {
　　Authorization: config.basic_token
　　},
　　data: {
　　username: encryptedData,
　　password: iv,
　　grant_type: "password",
　　auth_approach: 'wxapp',
　　},
　　method: "POST",
　　success: function(res) {
　　if (res.statusCode === 201) {
　　//After the JWT is stored, it is stored,
　　wx.showToast({
　　Title: 'login succeeded',
　　icon: 'success'
　　});
　　wx.setStorage({
　　key: "jwt",
　　data: res.data
　　});
　　that.globalData.access_token = res.data.access_token;
　　that.globalData.account_id = res.data.sub;
　　} else if (res.statusCode === 401){
　　//If there is no registration, call the registration interface
　　that.register();
　　} else {
　　//Prompt error message
　　wx.showToast({
　　title: res.data.text,
　　icon: 'success',
　　duration: 2000
　　});
　　}
　　},
　　fail: function(res) {
　　console.log('request token fail');
　　}
　　})
　　},
　　fail: function() {
　　// fail
　　},
　　complete: function() {
　　// complete
　　}
　　})
　　}
　　})
　　},
　　register: function() {
　　//Registration code
　　var that = this;
　　wx.login ({// call the login interface to get the code
　　success: function(res) {
　　var code = res.code;
　　wx.getUserInfo({
　　//Call getUserInfo to get encrypteddata and IV
　　success: function(res) {
　　// success
　　that.globalData.userInfo = res.userInfo;
　　var encryptedData = res.encryptedData || 'encry';
　　var iv = res.iv || 'iv';
　　console.log(iv);
　　wx.request ({// request to register user interface
　　url: config.host + '/auth/accounts/wxapp',
　　header: {
　　Authorization: config.basic_token
　　},
　　data: {
　　username: encryptedData,
　　password: iv,
　　code: code,
　　},
　　method: "POST",
　　success: function(res) {
　　if (res.statusCode === 201) {
　　wx.showToast({
　　Title: 'registered successfully',
　　icon: 'success'
　　});
　　that.login();
　　} else if (res.statusCode === 400) {
　　wx.showToast({
　　Title: 'user registered',
　　icon: 'success'
　　});
　　that.login();
　　} else if (res.statusCode === 403) {
　　wx.showToast({
　　title: res.data.text,
　　icon: 'success'
　　});
　　}
　　console.log(res.statusCode);
　　console.log('request token success');
　　},
　　fail: function(res) {
　　console.log('request token fail');
　　}
　　})
　　},
　　fail: function() {
　　// fail
　　},
　　complete: function() {
　　// complete
　　}
　　})
　　}
　　})
　　},
　　get_user_info: function(jwt) {
　　wx.request({
　　url: config.host + '/auth/accounts/self',
　　header: {
　　Authorization: jwt.token_type + ' ' + jwt.access_token
　　},
　　method: "GET",
　　success: function (res) {
　　if (res.statusCode === 201) {
　　wx.showToast({
　　Title: 'registered',
　　icon: 'success'
　　});
　　} else if (res.statusCode === 401 || res.statusCode === 403) {
　　wx.showToast({
　　Title: 'not registered',
　　icon: 'error'
　　});
　　}
　　console.log(res.statusCode);
　　console.log('request token success');
　　},
　　fail: function (res) {
　　console.log('request token fail');
　　}
　　})
　　},
　　globalData: {
　　userInfo: null
　　}
　　})