制作平台型小程序 第1篇
那么既然小程序这么好用,各个小程序平台的用户体量也很大,如何快速实现小程序从开发到上线发布,并且缩短开发到上线发布这个周期呢?
这个时候就需要用到一站式开发多平台的小程序,目前可以使用的就是阿里云多端低代码开发平台魔笔低代码快速搭建适配于微信、支付宝等多平台的小程序。
过去你如果想要开发微信、支付宝的多平台小程序,你需要去两个平台开发,开发完成后完成上线发布,当需要优化功能或者更新小程序功能时,你需要双倍的工作量,既需要更改微信小程序,同时需要更新支付宝小程序。那么这个时候低代码开发平台魔笔可视化搭建适配于微信和支付宝两个平台的小程序应用客户端,维护两个平台的小程序就像维护一个平台一样简单,整体方案如图
说到这个的话,就从小程序的使用过程来看整个我比较想了解的功能模块。
门户授权:小程序的登录授权模块,比如支持多方式,包括手机号授权,微信授权,扫码授权等方式,简化用户登录操作,提升用户体验。
购物付费:通常用到的小程序比如电商类小程序,在选购商品之后的支付过程,付费模块的整个调用流程以及回传操作,支付过程中的安全性及防盗性保证。
分享功能:小程序的另一特点就是分享方便,可以快速的分享给当前平台,比如微信平台中的微信好友,好友也可以快速进入小程序,分享模块可以快速增加小程序曝光,提高用户数量。
内容推送:小程序的内容推送模块也很重要,任何小程序中的操作,从用户角度比较关心的内容都可以推送,提升用户满意度,同时也增加了小程序的出镜率。
到这里,关于用户角度为什么喜欢用小程序,以及如何实现一次搭建 多平台适配的小程序,就讲完了,感兴趣的可以去阿里云多端低代码开发平台魔笔体验:
制作平台型小程序 第2篇
微信小程序开发多少钱
小程序定制开发的价格在万元左右,saas小程序自助搭建,价格在1500-6800/年左右。
第三方小程序制作平台
开发者需要掌握微信小程序的开发工具。微信小程序提供了开发者工具,可以帮助开发者更方便地进行开发和调试。开发者需要熟悉这个工具的使用方法,并学会如何使用它进行代码编写、调试和发布等操作。
开发者还需要学习微信小程序的开发语言和框架。微信小程序使用的是基于JavaScript的语言,同时也有自己的框架和组件库。开发者需要掌握这些技术和工具,才能更好地进行小程序的开发。
对于初学者来说,最重要的是多动手实践。只有在实践中不断尝试和总结,才能更好地掌握微信小程序开发的知识和技能。同时,也可以通过参考一些优秀的小程序案例,学习其他开发者的经验和技巧,提升自己的开发能力。
小程序的生态竞争日益激烈,开发者需要不断提升自己的技能和创新意识,才能在众多的竞争者中脱颖而出。同时,随着用户对小程序的需求和期望不断提高,小程序的功能和用户体验也需要持续优化和提升。
制作平台型小程序 第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过期后用来申请新的票据信息。
这几个商家小程序参数平台方后面要反复使用到。
制作平台型小程序 第4篇
顾名思义,小程序最大的优势可以说主打一个【小】,这个怎么说呢?最直观的理解就是小程序占用的存储和内存往往都比APP小很多,一个APP通常占用存储100M左右,而小程序就可以忽略存储的占用。
另外一个优势是【使用方便】。如果你使用APP的话,你首先需要下载安装APP,并且需要单独的账号登录。而不管你使用的是支付宝小程序还是微信小程序,往往都不需要下载安装,不需要登录账号,直接一键授权就可以了,使用起来就特别方便。
制作平台型小程序 第5篇
首页进入商家小程序,首先是门店列表及距离信息。 由小程序与门店的关联可以获取与小程序关联的所有门店。 通过高德地图来获取定位。
进入门店,选购商品,商品信息从缓存中获取。
商品详情页:
对于有规格的商品,需要从商品的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分钟不支付将作废,系统要将废弃的订单删除。