首页 开发教程 正文
我要发布

超越 Hello World：深入小程序 Hybrid 初衷、安全配置与上线全链路

开发教程
2025-12-04 0 786

学习目标

完成本课程后，学习者将能够：

  • 你将得到Hybrid技术得到小程序设计的初衷
  • 小程序的注册、审核、发版上线流程
  • 小程序运行条件（openssl生成本地证书）
  • 基于目录的访问限制，正确使用open_basedir

一、从Hybrid 技术开始

在早期的移动互联网兴起的时候，Css + Html5 + Javascript是不能调用操作系统的底层能力、比如想调用手机的通讯录、摄像头、无法直接操作本地文件系统这种功能是没办法实现的，无法深度利用设备传感器（如高精度陀螺仪、气压计），或实现后台 GPS 定位等原生级功能，浏览器的安全沙箱机制，严格限制了 Web 页面直接访问手机的底层系统能力。

第二个就是用户体验与性能的短板纯 H5 页面的渲染性能、动画流畅度，以及复杂交互的响应速度，和原生应用（Native App）存在明显差距，原生App开发成本比较高，Hybrid的架构方案就应运而生了，所以说，智慧都属于劳动人民啊！

Hybrid的架构层

  • Native（原生层）：比如我们要开发的是微信小程序，那么微信原生App就属于原生层，直接调用手机底层 API（如摄像头、通讯录、GPS、蓝牙、本地文件系统等），并通过 “桥接机制（JSBridge）” 将这些能力开放给 H5 调用（解决纯 H5 无法触达底层的问题）。
  • WebView：“连接桥梁” 和 “运行容器”：本质是嵌入在原生应用中的 “轻量级浏览器内核”（如 iOS 的 WKWebView、Android 的 WebView），是 H5 页面的 “运行载体”。
  • H5（Web 层）：“业务载体” 和 “灵活迭代者”：负责大部分业务场景的页面渲染（如商品详情、新闻列表、表单提交等）和交互逻辑（如按钮点击、数据校验等），直接面向用户展示内容。

二、小程序的注册、审核、发版上线流程

开发小程序，需要审核一个小程序，个人和企业都可以申请，申请的方式和流程也相对简单，个人申请能开发的品类较少，企业品类较多，如果自己在本地开发进行学习，申请个人的就可以。

在管理->开发管理，可以看见小程序AppID，小程序代码上传需要设置白名单、服务器域名和业务域名，加入开发者，下载小程序开发者工具就可以编写代码了，享受编程的快乐了，还有一点需要注意的是之前的都是用js方式编程，现在官方生成的都是ts格式的，在用法上有一点不同，但大同小异。

ScreenShot_2025-10-23_223232_269.png

小程序的目录如下：

  • package.json 项目依赖配置文件，用于管理 Node.js 依赖包（如开发工具、第三方库），定义脚本命令（如构建、运行脚本），以及项目基本信息（名称、版本等）。类似前端项目的依赖管理核心文件。

  • project.config.json小程序项目全局配置文件，用于保存项目的公共配置（团队共享）例如：项目名称、appid、编译配置、页面路径配置等

  • project.private.config.json项目私有配置文件，用于保存个人开发相关的配置（不共享），可覆盖project.config.json中的配置。

  • tsconfig.json：TypeScript 编译配置文件，指定 TypeScript 的编译规则

  • typings/ ：TypeScript 类型声明目录，用于存放项目所需的类型定义文件（.d.ts），解决 TS 对 “非 TS 模块”（如微信小程序 API、第三方 JS 库）的类型识别问题，避免类型报错。

  • miniprogram/ 目录（小程序核心目录）：小程序的主运行目录，包含所有与小程序功能直接相关的代码（页面、全局配置、样式等）。

    • app.json ： 小程序全局配置文件，定义小程序的页面结构、窗口表现、导航栏配置等核心信息
    • app.ts：小程序入口逻辑文件，定义小程序的生命周期函数，处理全局初始化逻辑
    • app.wxss：小程序全局样式文件，定义的样式会作用于所有页面（类似网页的global.css）。支持微信小程序扩展的样式语法（如rpx自适应单位），页面样式可覆盖全局样式。
    • pages/ ：小程序页面目录，每个子目录对应一个页面。
    • utils/ ：工具函数目录，存放项目中可复用的工具方法（如日期格式化、数据处理、网络请求封装等）。
├── miniprogram
│   ├── app.json
│   ├── app.ts
│   ├── app.wxss
│   ├── pages
│   │   ├── index
│   │   └── logs
│   └── utils
│       └── util.ts
├── package.json
├── project.config.json
├── project.private.config.json
├── tsconfig.json
└── typings
    ├── index.d.ts
    └── types
        ├── index.d.ts
        └── wx

三、本地SSL证书

小程序必须要运行在Https协议上进行安全传输，需要在本地生成ssl证书，比如我的域名是shop.work.com，存放路径是/root/ssl/shop.work.com/，使用Openssl可以成功生成ssl证书，在配置到Nginx上即可。

# 生成私钥
sudo openssl genrsa -out shop.work.com.key 2048

# 生成证书签名请求 (CSR)
sudo openssl req -new -key shop.work.com.key -out shop.work.com.csr 
  -subj \"/C=CN/ST=Beijing/L=Beijing/O=Company/OU=IT/CN=shop.work.com\"

# 生成自签名证书 (有效期为365天)
sudo openssl x509 -req -days 365 
-in shop.work.com.csr 
-signkey shop.work.com.key 
-out shop.work.com.crt

Nginx ssl证书配，配置上就能在本地正常访问了。

server {
    listen 80;
    listen 443 ssl;
    server_name shop.work.com;
    
    # SSL 证书路径（对应第一步生成的文件）
    ssl_certificate /root/ssl/shop.work.com/shop.work.com.crt;
    ssl_certificate_key /root/ssl/shop.work.com/shop.work.com.key;

    # SSL 安全配置（推荐参数）
    ssl_protocols TLSv1.2 TLSv1.3;  # 支持的 TLS 版本
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-        SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
    ssl_prefer_server_ciphers on;  # 优先使用服务器加密套件
    ssl_session_cache shared:SSL:10m;  # 会话缓存
    ssl_session_timeout 10m;  # 会话超时时间
}

四、基于目录的访问限制

在Nginx与PHP进行fastCgi的进行通信的时候，页面产生了错误信息No input file specified.，翻了好多资料，把它整理出来也是记录也是分享，只要是Lnmp架构的小伙伴们对他一定不陌生，系统的对这个知识点做一个记录，以防止在出现同样的坑。

简单来说，open_basedir 是一个PHP配置指令，用于将PHP程序可以访问的文件限制在指定的目录树中，包括文件本身。脚本只能在这个监狱范围内读取、写入、执行文件。一旦试图“越狱”，访问监狱外的文件，PHP就会报错并拒绝访问。

它主要的作用就是针对Web目录安全的考量，只能对设置的特定目录有对应的操作权限。

当你遇到 open_basedir 相关错误时，通常会在错误日志中看到类似这样的信息：

Warning: file_exists(): open_basedir restriction in effect. 
File(XXXXXXXX) is not within the allowed path(s)...
#或者
No input file specified.

在Nginx、php-fpm、php.ini，中都可以设置对open_basedir进行设置，但它们的生效范围和优先级是不同的。优先级从高到低是： Nginx > PHP-FPM > php.ini。

1、php.ini （全局配置，优先级最低）优先级最低，如果其他地方没有设置，则使用这里的值，但不建议在这里设置，因为这个配置属于php全局配置，如果有A、B、C 三个项目同时在运行，设置那个目录都会影响到其他的Web站点运行。

open_basedir = /var/www/html:/tmp

2、PHP-FPM 进程池配置 (Pool Configuration，优先级中等)

ps aux | grep php-fpm
... php-fpm: master process (/usr/local/php/etc/php-fpm.conf)

[www]
php_admin_value[open_basedir] = /home/wwwroot/shop/crmeb:/tmp

3、Nginx

location ~ .php(.*)$ {
   fastcgi_param PHP_ADMIN_VALUE \"open_basedir=/home/wwwroot/shop/crmeb:/tmp\";
}

推荐方案：为每个项目创建独立的 PHP-FPM 进程池，这是最安全、最推荐的做法，可以实现真正的项目隔离。

在实际开发中有这样的情况，我有三个项目分别是Shop、Crm、Web三个项目，可以使用不同的Unix文件或Tcp端口来进行通信，对参数进行一下简单的说明：

  • listen.owner 控制的是 PHP-FPM 监听的 Unix Socket 文件的所有者
  • listen.group 控制的是 PHP-FPM 监听的 Unix Socket 文件的所有组
  • [shop]shop 线程池所属模块的配置
[shop]
listen = /tmp/php-shop-cgi.sock
listen.backlog = -1
listen.allowed_clients = 127.0.0.1
listen.owner = www
listen.group = www
listen.mode = 0666
user = www
group = www

; 安全设置 - 核心！
php_admin_value[open_basedir] = /home/wwwroot/shop/crmeb:/tmp

[crm]
listen = /tmp/php-crm-cgi.sock
listen.backlog = -1
listen.allowed_clients = 127.0.0.1
listen.owner = www
listen.group = www
listen.mode = 0666
user = www
group = www

; 安全设置 - 核心！
php_admin_value[open_basedir] = /home/wwwroot/shop/crmeb:/tmp

配置完要重启服务，查看进程，Shop和Crm的线程池就都有了。

$ ps aux  | grep php-fpm
root  php-fpm: master process (/usr/local/php/etc/php-fpm.conf)
www  php-fpm: pool shop
www  php-fpm: pool shop
www  php-fpm: pool crm
www  php-fpm: pool crm

五、HBuilderX + Uni-App

Uni-App是一款非常优秀的国产跨平台的前端框架，跨平台移动应用开发（核心优势） ，如果您想开发手机 App，但又不想学习 Java/Kotlin (Android) 或 Swift/Objective-C (iOS) ：它是您的绝佳选择。

如果您需要同时开发 App 和多个平台的小程序。

同时体验了微信小程序IDE，也体验了HBuilderX，感觉HBuilderX开发效率会高一些，整体来说还是一款不错的工具。

收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在
点赞 (0)

申明：本文由第三方发布，内容仅代表作者观点，与本网站无关。对本文以及其中全部或者部分内容的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。本网发布或转载文章出于传递更多信息之目的，并不意味着赞同其观点或证实其描述，也不代表本网对其真实性负责。

左子网 开发教程 超越 Hello World：深入小程序 Hybrid 初衷、安全配置与上线全链路 https://www.zuozi.net/3312.html

解决idea导入项目出现不了maven
上一篇： 解决idea导入项目出现不了maven
解释 Spring 框架中 bean 的生命周期：一个八年 Java 开发的实战视角
下一篇： 解释 Spring 框架中 bean 的生命周期：一个八年 Java 开发的实战视角
常见问题

发货方式是什么？

  • 1、自动：拍下后，点击（下载）链接即可下载；2、手动：拍下后，联系卖家发放即可或者联系官方找开发者发货。
查看详情

交易周期是多久呢？

  • 1、源码默认交易周期：手动发货商品为1-3天，并且用户付款金额将会进入平台担保直到交易完成或者3-7天即可发放，如遇纠纷无限期延长收款金额直至纠纷解决或者退款！；
查看详情

能退款么？

  • 1、描述：源码描述(含标题)与实际源码不一致的（例：货不对板）； 2、演示：有演示站时，与实际源码小于95%一致的（但描述中有”不保证完全一样、有变化的可能性”类似显著声明的除外）； 3、发货：不发货可无理由退款； 4、安装：免费提供安装服务的源码但卖家不履行的； 5、收费：价格虚标，额外收取其他费用的（但描述中有显著声明或双方交易前有商定的除外）； 6、其他：如质量方面的硬性常规问题BUG等。 注：经核实符合上述任一，均支持退款，但卖家予以积极解决问题则除外。
查看详情

注意事项

  • 1、左子会对双方交易的过程及交易商品的快照进行永久存档，以确保交易的真实、有效、安全！ 2、左子无法对如“永久包更新”、“永久技术支持”等类似交易之后的商家承诺做担保，请买家自行鉴别； 3、在源码同时有网站演示与图片演示，且站演与图演不一致时，默认按图演作为纠纷评判依据（特别声明或有商定除外）； 4、在没有”无任何正当退款依据”的前提下，商品写有”一旦售出，概不支持退款”等类似的声明，视为无效声明； 5、在未拍下前，双方在QQ上所商定的交易内容，亦可成为纠纷评判依据（商定与描述冲突时，商定为准）； 6、因聊天记录可作为纠纷评判依据，故双方联系时，只与对方在左子上所留的QQ、手机号沟通，以防对方不承认自我承诺。 7、虽然交易产生纠纷的几率很小，但一定要保留如聊天记录、手机短信等这样的重要信息，以防产生纠纷时便于左子介入快速处理。
查看详情

相关文章

猜你喜欢
发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

联系官方团队 在线提交工单
TA的动态
左子网

分享最新WordPress教程共同学习，共同进步，共同成长！

QQ交流群
左子网

QQ交流群

您的支持，是我们最大的动力！ https://qm.qq.com/q/iR7Nj0TrOg
热门文章
热门标签
随机推荐
热门评论
终身VIP会员限时钜惠
首页 源码 菜单 案例 我的