微信小程序平台规划 第1篇
小程序面向产品与服务，主要以实现业务功能为主，致力于打造线上线下相融合的企业服务场景。
微信公众号主要服务于企业和个人的营销与信息传递需求，是一种新的信息传播方式。公众号依赖粉丝经济，结合H5后，能够在公众号内提供一些简单的营销和交互功能。
用户体验的差别
微信小程序对用用户交互性能做了众多的优化，使用体验接近App。而公众号开发借助于H5 开发技术来实现交互功能，运行环境是基于浏览器，等同于手机网页端的应用。因此上微信公众号主要用于业务逻辑与交互简单的应用中，体验良好的应用都应该用小程序来创建或者重构。
具体上来说微信小程序被微信平台开放了更多的接口功能，基本可覆盖大多数行业的需求。相较于公众号，它在视频直播、商城、小游戏等强互动的领域表现更佳。公众号开发适合用户交互相对较少的应用类型，比如微商城、微官网等。
虽然微信公众号与小程序各有一定的应用场景，但是在实际上使用时不是二选一的，一个企业可以同时注册微信公众号和小程序。企业使用微信小程序承载企业的业务服务，并使用公众号进行企业的宣传与营销。微信公众号是单独申请的，微信小程序即可以单独申请，也可以通过微信公众号快捷申请。对于没有公众号和小程序的商家来说，正确的申请注册流程应该是先申请认证微信公众号，然后在公众号后台的【小程序管理】页面中直接快速注册小程序。微信公众号+小程序的模式已经成为企业运营推广的一个标配。
开发微信小程序需要首先注册一个小程序账号，注册成功后登录微信小程序管理后台，完成小程序开发者绑定、开发信息配置，然后开发者就可以下载开发者工具、使用开、发者工具进行小程序的开发了。
微信公众号是单独注册申请的，微信小程序即可以单独注册申请，也可以通过微信公众号快捷申请注册。对于没有公众号和小程序的商家来说，正确的申请注册流程应该是先申请认证公众号，然后在公众号管理后台的【小程序管理】页面快速申请小程序。微信公众平台的网址为：。微信小程序注册是需要一个邮箱作为账号，小程序注册成功后，可以使用该邮箱+登录密码登录微信小程序管理后台。为方便开发者开发和体验小程序的各种功能，开发者可以申请小程序的测试号，并使用此帐号在开发者工具创建项目并进行开发测试，以及真机预览体验。小程序的测试号使开发者避免了繁琐的注册过程，降低了初始使用小程序开发的门槛。小程序的测试号的申请地址为：
小程序开发的账号申请成功之后，需要登录小程序管理后台进行小程序的设置，填写小程序基本信息，例如名称、头像、介绍以及服务范围等。 您可以在【开发】->【开发管理】页面中看到小程序的AppID。小程序的AppID相当于小程序平台的一个身份证，后续你会在很多地方用到它。
另外在进行小程序开发前，需要在微信小程序后台将开发人员的微信号添加到项目成员中。只有添加到小程序项目成员的人员才可以使用微信小程序开发工具进行小程序开发、调试、上传程序包等功能。建议您可以将全部研发人员加入到项目成员中，项目组的其他非开发人员若需要体验小程序功能则需要添加到体验成员中。
由于小程序采用的是渲染和逻辑分离的运行机制，这种做法与传统的网页的运行机制存在差异，无法使用传统的网页编程中的开发、调试工具，为此微信专门为小程序开发推出了一个一站式IDE：微信开发者工具。开发者可以借助微信开发者工具完成小程序的代码开发、编译运行、界面和逻辑调试、真机预览和提交发布版本等功能。
在小程序开发文档中可以找到小程序开发工具的下载页面，或者直接输入以下 网址进入小程序开发工具的下载页面：。在小程序开发工具的下载页面中根据自己的操作系统下载对应的安装包并进行安装。需要注意的是，小程序开发工具在Windows仅支持Windows 7及以上版，在Mac上支持OS X 及以上版本。另外需要说明的是微信小程序Web开发工具需要扫码登陆才可以使用，所以在使用前必须先绑定开发者。
首次使用开发者工具调试小程序时会出现这样的报错：“xxxxxxxxxx不在合法域名列表中”，这是因为在小程序中发起了请求，但是请求的域名没有在小程序管理后台中进行设置所致。服务器域名的设置请到小程序管理后台【开发】->【开发管理】->【开发设置】->【服务器域名】中进行配置。配置时需要注意：域名只支持https （、、） 和 wss () 协议。域名不能使用 IP 地址（小程序的局域网 IP 除外）或 localhost。
微信小程序平台规划 第2篇
首页进入商家小程序，首先是门店列表及距离信息。 由小程序与门店的关联可以获取与小程序关联的所有门店。 通过高德地图来获取定位。
进入门店，选购商品，商品信息从缓存中获取。
商品详情页：
对于有规格的商品，需要从商品的SKU表中加载：
以下是商品详情页的数据结构： （最多支持3个维度， SKU维度遵循笛卡尔集，事实上电商应用中很少超过3个维度的）， 前端要实现上图商品详情页的效果，需要算法。
{_keys_:[{_key_id_:_10494_,_values_:[{_value_id_:10497,_value_:_1支装_},{_value_id_:10496,_value_:_2支装_},{_value_id_:10495,_value_:_3支装_}],_key_:_包装_},{_key_id_:_10498_,_values_:[{_value_id_:10500,_value_:_顺德陈村_},{_value_id_:10499,_value_:_顺德大良_}],_key_:_产地 _},{_key_id_:_10501_,_values_:[{_value_id_:10502,_value_:_标准_},{_value_id_:10503,_value_:_高档_}],_key_:_档次_}],_values_:[{_standard_price_:,_skus_:[{_value_id_:10497,_value_:_1支装_},{_value_id_:10500,_value_:_顺德陈村_},{_value_id_:10502,_value_:_标准_}],_underline_price_:,_value_ids_:[10497,10500,10502],_stock_:_30_,_sale_price_:},{_standard_price_:,_skus_:[{_value_id_:10497,_value_:_1支装_},{_value_id_:10500,_value_:_顺德陈村_},{_value_id_:10503,_value_:_高档_}],_underline_price_:,_value_ids_:[10497,10500,10503],_stock_:_30_,_sale_price_:},{_standard_price_:,_skus_:[{_value_id_:10497,_value_:_1支装_},{_value_id_:10499,_value_:_顺德大良_},{_value_id_:10502,_value_:_标准_}],_underline_price_:,_value_ids_:[10497,10499,10502],_stock_:_30_,_sale_price_:},{_standard_price_:,_skus_:[{_value_id_:10497,_value_:_1支装_},{_value_id_:10499,_value_:_顺德大良_},{_value_id_:10503,_value_:_高档_}],_underline_price_:,_value_ids_:[10497,10499,10503],_stock_:_30_,_sale_price_:},{_standard_price_:,_skus_:[{_value_id_:10496,_value_:_2支装_},{_value_id_:10500,_value_:_顺德陈村_},{_value_id_:10502,_value_:_标准_}],_underline_price_:,_value_ids_:[10496,10500,10502],_stock_:_30_,_sale_price_:},{_standard_price_:,_skus_:[{_value_id_:10496,_value_:_2支装_},{_value_id_:10500,_value_:_顺德陈村_},{_value_id_:10503,_value_:_高档_}],_underline_price_:,_value_ids_:[10496,10500,10503],_stock_:_30_,_sale_price_:},{_standard_price_:,_skus_:[{_value_id_:10496,_value_:_2支装_},{_value_id_:10499,_value_:_顺德大良_},{_value_id_:10502,_value_:_标准_}],_underline_price_:,_value_ids_:[10496,10499,10502],_stock_:_30_,_sale_price_:},{_standard_price_:,_skus_:[{_value_id_:10496,_value_:_2支装_},{_value_id_:10499,_value_:_顺德大良_},{_value_id_:10503,_value_:_高档_}],_underline_price_:,_value_ids_:[10496,10499,10503],_stock_:_30_,_sale_price_:},{_standard_price_:,_skus_:[{_value_id_:10495,_value_:_3支装_},{_value_id_:10500,_value_:_顺德陈村_},{_value_id_:10502,_value_:_标准_}],_underline_price_:,_value_ids_:[10495,10500,10502],_stock_:_30_,_sale_price_:},{_standard_price_:,_skus_:[{_value_id_:10495,_value_:_3支装_},{_value_id_:10500,_value_:_顺德陈村_},{_value_id_:10503,_value_:_高档_}],_underline_price_:,_value_ids_:[10495,10500,10503],_stock_:_30_,_sale_price_:},{_standard_price_:,_skus_:[{_value_id_:10495,_value_:_3支装_},{_value_id_:10499,_value_:_顺德大良_},{_value_id_:10502,_value_:_标准_}],_underline_price_:,_value_ids_:[10495,10499,10502],_stock_:_30_,_sale_price_:},{_standard_price_:,_skus_:[{_value_id_:10495,_value_:_3支装_},{_value_id_:10499,_value_:_顺德大良_},{_value_id_:10503,_value_:_高档_}],_underline_price_:,_value_ids_:[10495,10499,10503],_stock_:_30_,_sale_price_:}],_resCode_:_0_,_resMsg_:_success_}
购物车的实现基本原则是 map 结构，为了达到最佳性能，购物车操作不需要与服务端交互，数据在小程序本地端存储。
提交订单前，服务器会检测微信用户有无登录。如果没有登录，将弹出登录提示。而不是一
进入小程序就要求用户微信登录。
授权后，可以获取微信用户的openid。 服务器将openid放在JWT token 中加密存储。调用微信统一下单后需要用到这个token。
以下是提交统一下单的购物车数据结构
{_delivery_fix_:__,_total_price_:__,_delivery_:_2_,_shopid_:8804,_openid_:_ojM8n5G69FSxi348Cu1aBefp_3c04_,_tableNo_:1,_nickname_:_微信用户_,_mers_:[{_image_:__,_thumb_path_:__,_unit_:_只_,_sortid_:10087,_price_:__,_keys_:[{_key_id_:10494,_key_:_包装_},{_key_id_:10498,_key_:_产地 _},{_key_id_:10501,_key_:_档次_}],_name_:_夏季玫瑰_,_shopid_:8804,_sort_:_情人节主题_,_id_:10091,_selectedCount_:1,_haslabel_:_yes_,_label_:_1支装 顺德大良 标准 _,_stock_:_30_,_underline_price_:,_sale_price_:1,_standard_price_:1,_symbol_:_10497,10499,10502_,_key_:_10091-10497,10499,10502_,_label_price_:_1-1_,_selected_:true,_itemPrice_:__,_counts_:[],_count_:1}],_address_:{_name_:_张大帅_,_mobile_:_13311111111_,_province_:_天津市_,_city_:_天津市_,_postcode_:_572000_,_nationalcode_:_120103_,_detail_:_天津市天津市河西区梅江街道126号_,_district_:_河西区_,_location_:__}}
小程序为兼容到店消费（如：点餐中的堂食）和物流配送 （部分商家是愿意在半径范围内自行配送的）。 在用户提交订单前对消费模式作进一步确认。
选择物流配送后，接下来需要用户填写配送信息。 小程序可以直接调用微信官方的收件地址功能 ，这一点节省了开发者大量的开发时间，为微信点赞。
接下来就是支付环节，将再下一个章节进行讲解。
支付（这里的支付动作包括调用微信统一下单接口、平台保存订单及配送信息）。
支付之前调用高德地图计算用户的收件地址距离门店的距离。距离超出门店的最大配送半径将弹出提示。
设计过电商应用的同行应该遇到过这个问题，就是用户在下单后没有支付，此时，系统中存在大量未支付的订单数据，不排队有恶意提交的订单数据。良好的订单设计要及时清理系统多余的订单数据而不影响系统的性能，同时要实现订单倒计时，如：下单后15分钟不支付将作废，系统要将废弃的订单删除。
微信小程序平台规划 第3篇
架构设计由SLB、网关、注册/配置中心、微信、基础设施几部分组成。
其中：SLB： 可购买SLB弹性负载均衡服务，也可以自建，具体就是安装NGINX服务，将域名的后端流量转发至网关。 在此，将NGINX配置文件 贴出来，供参考：
user root; worker_processes 1;
error_log /var/logs/nginx/ info;
pid /var/pids/;
events { use epoll; worker_connections 1024; }
http { client_header_buffer_size 32k; large_client_header_buffers 4 32k; fastcgi_buffers 8 16k; fastcgi_buffer_size 32k; include ; default_type application/octet-stream; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Upgrade $http_upgrade;
add_header Content-Security-Policy _upgrade-insecure-requests_;
sendfile on;
keepalive_timeout 65; keepalive_requests 150; ssl_certificate /usr/home/softwares/cer/; ssl_certificate_key /usr/home/softwares/cer/; gzip on; gzip_min_length 1k; gzip_buffers 16 64k; gzip_http_version ; gzip_comp_level 6; gzip_types text/plain application/x-javascript text/css application/xml image/jpeg image/gif image/png; gzip_vary on;
upstream back { #sticky; server weight=1 max_fails=1 fail_timeout=6s; server weight=1 max_fails=1 fail_timeout=6s;
}
# HTTPS server
server { listen 443 ssl; listen 80; #listen 443 default ssl; server_name ; ssl_certificate /usr/home/softwares/cer/; ssl_certificate_key /usr/home/softwares/cer/;
ssl_session_cache shared:SSL:1m; ssl_session_timeout 5m;
ssl_ciphers HIGH:!aNULL:!MD5; ssl_prefer_server_ciphers on;
error_page 502 503 /; if ($scheme = http) { return 301 https://$host$request_uri; } location = / { root /usr/home/softwares/html; } # 请求不带任何参数，重定向至 location = / { return 301 ;
} location / { add_header 'Access-Control-Allow-Origin' 'http://localhost:8080'; add_header 'Access-Control-Allow-Methods' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Headers' 'access-control-allow-origin, authority, content-type, version-info, X-Requested-With, Authorization, h5token, token, admintoken,authen';
if ($request_method = 'OPTIONS') { return 204; } proxy_connect_timeout 6000; proxy_set_header Host $host:$server_port; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header X-Forwarded-Port $server_port; client_max_body_size 10m; #limit_reqzone=allips burst=5 nodelay; proxy_pass http://back; proxy_redirect http:// https://; #root /usr/home/softwares/html/home; #index ;
} location /home { root /usr/home/softwares/html; index ;
}
location /manage { root /usr/home/softwares/html; index ; }
location /much { root /usr/home/softwares/html; index ; }
location /cloud { root /usr/home/softwares/html; index ; }
location /bc/ { alias /usr/home/softwares/html/bc/; } location ~^.+\.txt$ { root /usr/home/softwares/html; } location /wechat/ { alias /usr/home/softwares/html/wechat/; }
location /static/images/ { alias /usr/home/softwares/html/static/images/;
} location /images/ { alias /usr/home/softwares/html/static/images/; } location /css/ { alias /usr/home/softwares/html/static/css/; } location /js/ {
alias /usr/home/softwares/html/static/js/; }
#gaode map # 自定义地图服务代理 location /_AMapService/v4/map/styles { set $args _$args&jscode=高德Key_; proxy_pass ; } # 海外地图服务代理 location /_AMapService/v3/vectormap { set $args _$args&jscode=高德Key_; proxy_pass ; } # Web服务API 代理 location /_AMapService/ { set $args _$args&jscode=高德Key_; proxy_pass ; }
}
}
其中，9091、9092为网关服务， 与这台NGINX部署在同一台机器。
网关使用spring-cloud-gateway ， 与传统网关不同的是，spring-cloud-gateway 结合了 spring-security ， 对所有的非白名单入网流量进行安全验证，鉴权的原理稍后介绍。 先看 核心的maven 依赖。 服务注册和服务发现使用了nacos。 注意各版本依赖。我使用的 nacos版本是 ， 故对应的客户端版本是。 版本不妆容将会导致各种各样的问题。以下是版本的对照关系。
以下是
说明：
（1） 使用 network-interface: eth0 而不显示指定IP，可以减少云主机IP变动未同步修改配置文件IP的风险。
（2） springCloud中需要禁用ribbon。
cloud: loadbalancer: ribbon: enabled: false
说明： 使用es256 JWT实现加解密。
通过 配置微服务的路由。 参考如下：
省略其他。。。
网关过滤器处理请求，实现转发、限流、鉴权等功能。
spring-security 仅一张表 admin_roles ( 后台帐号与角色关联表）实现了后台帐号与角色、权限的关系。 表参考如下：
那么，网关鉴权的逻辑是怎样的？
首先，云端后台帐号登录成功时，返回的JSON结果字段中指定roles字段保存角色名称集合，使用平台es256公钥 JWT 加密返回的JSON结果记为token ，H5将此返回 token在每次HTTP请求时均带上头部token， 网关读取token 再用平台私钥对token JWT 解密。
先看网关过滤器逻辑：
值得注意的是nacos负载均衡转发HTTP协议默认的是HTTPS，需要转成HTP协议。
网关主要是对HTTP使用JWT解析头部token，获取roles 集合，再将解析对象转JSON后转发HTTP头部给下游微服务。 不需要下游微服务再执行JWT解析头部token。一是：下游微服务是没有平台私钥，降低私钥泄密的风险；二是：由网关层JWT解析加密token并完成鉴权，不需要微服务二次解析token，提高了系统性能。由于RSA公私钥加解密是有性能损耗的。以下是网关的鉴权逻辑：
以下是spring-security 由帐号的角色集合roles实现权限校验的逻辑
微服务使用spring-cloud, 注册中心和配置中心均使用nacos, 与网关使用相同的spring版本。这 儿不再累述。 网关和微服务均通过nacos注册中心注册，服务发现使用spring-cloud-starter-alibaba-nacos-discovery，可实现微服务高可用。
第三方平台小程序简单来说，就是你开发一个完整的小程序，可以提供给有需求的第三方使用。
见微信官方文档。平台必须搭建好第三方平台小程序，主要是平台处理微信推送的消息与事件接收的逻辑。可以参考微信官方开放文档第三方平台准备工作部分介绍。
微信官方API调用比较有规律，现以小程序API授权回调处理为例简单讲解一下处理逻辑。
企业法人授权小程序API，平台方会接收到微信的推送。
API： /wechat/event/wechat/event/grant/callback
将用户的授权信息持久化到云端。 以下是(auth_code)的业务逻辑。
微信代企业创建小程序这个功能的确很棒，大大降低了企业（或个体户）使用小程序的门槛。
（1） 不用每年交300元小程序审核费用；如果企业或个体户自己去创建小程序，流程手续复杂不说，还要每年交300元小程序（或公众号）审核费用。
（2） 微信提供了代企业创建小程序的接口，企业或个体户的法人可以填写小程序信息直接申请。
业务过程是：企业或个体户通过平台小程序提供的接口填写小程序申请资料（法人微信号、小程序名称等信息）提交到微信官方，微信官方审核通过后会给商家法人推送一条微信链接，商家法人打开微信链接后进行身份认证即可开通，同时微信官方将审核结果推送给平台小程序，平台小程序收到推送后获取商家小程序的ID，即authorizer_appid进行持久化。
这部分的设计如下：
首先是表设计，见如下：
CREATE TABLE (
id int8 NOT NULL,
component_appid varchar(20) NOT NULL,
authorizer_appid varchar(20) NOT NULL,
authorizer_access_token varchar(255) NULL,
expires_in int4 NULL,
authorizer_refresh_token varchar(255) NULL,
update_time varchar(19) NOT NULL,
company_name varchar(62) NULL,
contact_people varchar(12) NULL,
contact_tel varchar(12) NULL,
much_mini_name varchar(64) NULL,
qrcode_url varchar(200) NULL,
CONSTRAINT component_authorizer_appid_key UNIQUE (component_appid, authorizer_appid),
CONSTRAINT platform_grant_pkey PRIMARY KEY (id)
其中：authorizer_appid：是商家（想使用第三方平台小程序的企业或个体户）申请的小程序授权ID，这个值必须在第三方平台持久化。
authorizer_access_token和 authorizer_refresh_token分别是票据信息和刷新票据信息，刷新票据authorizer_refresh_token是在authorizer_access_token过期后用来申请新的票据信息。
这几个商家小程序参数平台方后面要反复使用到。