【特别提示】由于配置需要涉及到NGINX等相关配置，这里不推荐使用虚拟主机准备工具在操作部署之前，我们需要准备一下材料和工具：NIUSHOP开源系统Uniapp开源版源码HBuilderX开发者工具宝塔面板操作开始首先我们到NIUSHOP后台下载Uniapp开源版源代码，点击系统后台顶部小程序—微信小程序—小程序源码下载（详见图1-1）点击进入之后提示未购买将提示并引导购买（详见图1-1-2）（图1-1 ↑ 引导下载小程序源代码）（图1-1-2 ↑ 提示未购买并引导购买）已购买小程序的，会有小程序下载入口并显示当前小程序的版本号、发布时间等相关信息，此时我们可以下载开源版小程序代码（详见图1-1-3），注意：编译版小程序代码除了配置之类的信息外，是不可以进行二次开发的操作，如需二开，需购买源码版小程序（图1-1-3 ↑ 下载开源版源代码）下载开源版小程序解压之后，我们需要到HBX官网下载HBuilderX工具(https://www.dcloud.io/hbuilderx.html)，点击download—正式版—根据电脑系统选择对应的版本，这里选择Windows版中的APP开发版（详见图1-1-4）（图1-1-4 ↑ 下载HBuilderX开发版工具）将下载好的BHX解压出来之后，双击HBuilderX.exe打开HBuilderX开发工具（详见1-1-5）（图 1-1-5 ↑ 打开HBuilderX开发者工具）打开HBX之后（中间的一些操作忽略），我们需要进行安装插件，点击顶部菜单栏中的：工具—插件安装【注意：由于HBuilderX迭代过快，这里以老版本为示范，新版本请举一反三】（详见图1-1-6）（图1-1-6 ↑ HBX界面安装插件）在安装插件界面找到SCSS/SASS编译/Node.js插件，点击安装，安装过程中，静等5-10分钟即可（详见图1-1-7）（图1-1-7 ↑ 安装SCSS/SASS编译/Node.js插件）下载好Uniapp源代码之后，我们可以通过HBuilderX进行导入，可以看到我们Uniapp源代码结构（详见图1-1-8）（图 1-1-8 ↑ Uniapp源代码 ）我们看到Uniapp源代码结构之后，我们可以点击common—JS—config.js中，将代码中的baseUrl、imgUrl、shareDomain、privateKey进行一一填入（详见图1-1-9），相关说明如下：① baseUrl：请求数据的网址，填写站点网址，如：https://baidu.com 尾部不需要添加“ / ” ；② imgUrl：图片网址，该处为可选，如填写请输入自己网站域名，便于调用图片数据；③ shareDomain：分享跳转H5域名，该处为可选，如需要那么必须为:https://baidu.com/h5 ；④ privateKey：网站后台API安全密钥，该处为可选，但建议您开启安全密钥，防止中间人进行抓包窃取相关数据，API安全密钥获取和相关操作的请移步：系统后台基础设置>>API安全（图1-1-9 ↑ 配置config.js）上述配置完成之后，我们点击HBuilderX菜单栏中的发行——网站-H5手机版—输入网站标题和网站域名并点击发行—等待5-10分钟，HBuilderX开发工具会提示编译成功（详见图1-1-10）（图 1-1-10 ↑ 编译H5）编译好的H5代码上传点击进入站点根目录（详见图2-1）（图 2-1 ↑ 进入站点根目录）我们可以通过宝塔面板，点击上传按钮，打开我们编译好的H5文件，将文件拖入到宝塔上传窗口（提示：这里以宝塔7.3.0版本为例），点击开始上传，此时根目录会多了一个h5文件，我们可以通过站点/h5进行访问到我们的H5页面（详见图2-1-2）（图 2-1-2 ↑ 上传H5文件）配置站点文件我们回到我们宝塔站点界面，点击网站名，他会弹出一个配置窗，我们点击配置文件，在server中添加以下代码（详见3-1）配置好之后，点击保存即可（图 3-1 ↑ 配置server）#H5location/h5{if(!-e$request_filename){rewrite^/(.)/h5/index.htmllast;break;}}如何根据手机终端跳转到H5端呢？接下来，我们依旧在宝塔server配置文件中添加以下代码，注意：这里不会像官网那样在网址后面加H5，咋们此处直接强制跳转到H5，不会显示H5尾巴，NGINX会自动判断，不影响PC访问【提示：该规则影响伪静态，编者正在优化中】（详见图3-1-2）（图3-1-2 ↑配置server）location/{#注释：这里以您的站点文件路径为准root/www/wwwroot/139.199.185.215;if($http_user_agent~"(mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)"){#注释：这里是H5文件路径root/www/wwwroot/139.199.185.215/h5;}try_files$uri$uri//h5/index.html;}末文提示和总结如果遇到修改没有任何反应时，可以重启一下NGINX，不会配置的，可以直接联系作者【版权申明】文章为作者原创，未经作者许可，禁止转载作者署名：笨小猪（刘飞云）
（图片来源网络，侵删）
0 评论