本地搭建微信小程序服务器如何实现
本文主要介绍了本地搭建微信小程序服务器的实现方法的相关资料,希望通过本文能帮助到大家,让大家轻松的搭建自己的微信小程序的服务器,需要的朋友可以参考下,希望能帮助到大家。
本地搭建微信小程序服务器的实现方法
现在开发需要购买服务器,价格还是有点贵的,可以花费小代价就可以搭建一个服务器,可以用来开发小程序,博客等。
1域名(备案过的)
2阿里云注册免费的https证书
3配置本地的nginx
4内网映射(本地安装wampserver 服务器)
一、域名
注册花生壳,开通内网映射需要8元(我开通时需要,现在不清楚还要不要),里面可以注册2个免费的域名,都是免备案的。具体的请自行百度,花生壳注册地址
二、申请阿里云免费的https证书
阿里云免费的https证书地址
这个步骤相对来说比较简单,需要注意的地方也不多,按照阿里云官方的提示来,就能够操作成功了。值得注意的是你在申请证书过程中,证书是免费的,你不用付费,但是需要下单,下单完成后需要完善你的域名信息,然后提交审核。审核完成后,官方自动给你发放证书,顺利的话一个小时就能搞定。
注意:
1通过花生壳,内网映射出本地的访问地址
2把阿里云证书补全信息的域名填写完成后,阿里云会进入 审核中,需要下载他的一个fileauthtxt 文件
i在进度查询页面,单击 fileauthtxt 验证文件,下载到本地。
ii在您的站点服务器的根目录创建well-known/pki-validation,创建文件夹Windows命令是 md "well-known" 子目录pki-validation。
iii将 fileauthtxt 验证文件上传到well-known/pki-validation目录下 目录。 完成后,可通过验证 URL 地址(http://acom/well-known/pki-validation/fileauthtxt )访问。 参考如何配置域名授权验证
三、配置本地的nginx(主要是Apache的https配置太繁琐了)
下载证书文件
imagepng
配置nginx中的nginxconf文件,证书要放在conf/cert目录下,具体的代码
server {
listen 443;
server_name 111681150;
ssl on;
root "D:/works/wamp";
charset utf-8;
index indexhtml indexhtm;
ssl_certificate cert/214296869710097pem;#替换成你的文件
ssl_certificate_key cert/214296869710097key;#替换成你的文件
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv11 TLSv12;
ssl_prefer_server_ciphers on;
location / {
root "D:/works/wamp";
index indexhtml indexhtm indexphp;
proxy_pass http://111681150:8081;
}
}四、配置花生壳的内网映射
注意:
花生壳的映射不能设置为80端口的映射(我也没找到原因在哪,客服反馈是要设置自定义端口)
成功之后,对外访问的地址
最后上个配置成功后,请求的效果吧!
工具使用教程:
1、网页搜索小程序平台,进入小程序搭建系统,如图1。
2、进入平台右上角点击“注册”按钮,如图2。
3、编辑一个用户名、密码,输入验证码并确认注册协议,如图3。
4、编辑一个小程序名字、录入手机号码和找回密码的邮箱账号,如图4。
5、数字产品类型选择界面,选择小程序,如图5。
6、左侧选择官网或商城,官网为展示型小程序模板。根据行业选择小程序模板,预览模板后,点击选用并点击确认按钮,如图6、图7。
7、点击小程序模板头部区域,弹出铅笔图标后,进入编辑框替换logo,该模板logo为透明色,请按照系统提示尺寸进行上传,如图8、图9。
8、鼠标点击首页轮播图,弹出铅笔图标后,点击进入编辑框,按照系统提示尺寸,替换如图10、图11和图12。
9、小程序导航数量可以根据实际需求进行增减。如果是商城类小程序,导航分类一般对应产品类型,如图13、图14和图15。
10、上传产品后,鼠标点击商品板块,弹出铅笔图标后进去编辑框,设置商品按条件自动调用,该功能配置好以后,新增产品会自动出现在各个对应板块,如图16、图17。
11、首页界面设计完成以后,点击左侧页面、添加栏目按钮继续设计其他页面,比如展示型小程序常用的关于我们、联系我们、品牌特色等页面,在设计过程中,可以从素材、模块里拖拽功能插件到页面里,如图18、图19和图20。
12、到这一步小程序基本设计完成,可以沟通平台协助配置各类系统接口,提交腾讯审核发布。
1、注册微信小程序账号
按照文档指引,咱们得先注册一个微信下程序的账号,访问地址(https://mpweixinqqcom/cgi-bin/registermidpageaction=index&lang=zh_CN),选择“小程序”,按要求填写相关信息即可完成微信小程序的注册。(ps:微信严格区分个人公众号与小程序,因此微信小程序的注册邮箱不可以与微信个人公众号的邮箱相同)
2、获取微信小程序的 AppID
注册完成后登录,就可以在网站的“设置”-“开发者设置”中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID 。
3、下载微信小程序开发者工具
由于微信小程序的代码及规范相对封闭,因此按照微信官方的说法,为了帮助开发者简单和高效地开发微信小程序,推出了全新的开发者工具(https://mpweixinqqcom/debug/wxadoc/dev/devtools/devtoolshtml),集成了开发调试、代码编辑及程序发布等功能。
4、创建demo项目
下载完成后,选择创建“项目”,填入上一步获取到的AppID,设置本地项目的名称(非小程序名称),如:demo,并选择一个本地的文件夹作为代码存储的目录,点击“新建项目”就可以了。
为了方便上手,咱们先使用微信官方提供的样例源码(https://mpweixinqqcom/debug/wxadoc/dev/demo/quickstartzip)。
项目创建成功后,我们就可以点击该项目,进入并看到完整的开发者工具界面,点击左侧导航,在“编辑”里可以查看和编辑我们的代码,在“调试”里可以测试代码并模拟小程序在微信客户端效果,在“项目”里可以发送到手机里预览实际效果。
5、手机预览
开发者工具左侧菜单栏选择"项目",点击"预览",扫码后即可在微信客户端中体验。
6、代码上传
开发者工具左侧菜单栏选择"项目",点击"上传"即可将代码上传到微信小程序服务器。
7、小程序发布
登录微信公众平台并访问小程序首页(https://mpweixinqqcom/wxopen/initprofileaction=home&lang=zh_CN),按要求完成第1步,填写小程序相关信息及用户身份信息(暂时可绑定5个开发者和10个体验者),然后点击第2步“前往发布”按钮,按要求填写小程序相关信息及版本信息即可提交审核。
至此,微信小程序相关流程已经基本走完,接下来等待微信官方审核,然后与具体的微信公众号绑定即可进行访问。
ps:关于微信小程序具体的代码编写及规范可详见微信官方的开发者文档,这里就不做详细介绍了。
小鸟云服务器niaoyun实例创建好之后,您可以使用以下任意一种方式登录服务器:
远程桌面连接 (Microsoft Terminal Services Client, MSTSC):
采用这种方式登录,请确保实例能访问公网。如果在创建实例时没有购买带宽,则不能使用远程桌面连接。
管理终端 VNC:无论您在创建实例时是否购买了带宽,只要您本地有网页浏览器,都可以通过管理控制台的管理终端登录实例。
使用远程桌面连接 (MSTSC) 登录实例
打开 开始菜单 > 远程桌面连接,或在 开始菜单 > 搜索 中输入 mstsc。也可以使用快捷键 Win+R 来启动运行窗口,输入
mstsc后回车启动远程桌面连接。
在 远程桌面连接 对话框中,输入实例的公网 IP 地址。单击 显示选项。
输入用户名,如小鸟云默认为 niaoyun。单击 允许我保存凭据,然后单击 连接。这样以后登录就不需要手动输入密码了。
微信小程序审核通过发布后上传修改新内容的流程:
1、用微信小程序开发工具,打开项目,在开发工具里选择项目。
然后点击上传按钮,微信会提示你是否需要覆盖原来的版本,点击确定就行。
2、填写版本信息,然后点击上传。
版本号的填写遵循开发管理规范就行。如果特别大的修改,更改第一个主版本号;其它小的改动,更改后面两个次版本号就行。
备注:在这里建议把新版本主要修改的内容进行说明,便于协同工作。
3、上传完成。
开发工具中最近上传时间的内容会变为刚才的时间。
4、进入到微信小程序后台,开发管理中,也会看到刚才上传的版本信息。
微信小程序上传完之后提交审核。之前需要我们做几个操作:
1、补充小程序的基本信息,如名称、图标、描述等。
2、如果发布者不是管理员,则必须要在这里添加开发者,进行代码上传和发布。
3、配置服务器域名,如果你的小程序用到了网络请求,那么这里要先在“设置”-“开发设置”里添加域名。
4、提交审核。
小程序的基础信息,如名称、图标等是这个账号全局的信息。logo图标一个月内可申请修改5次。而名称一旦设置,就不能再修改了,而且不得与公众平台已有的订阅号、服务号重复。
如果开发者本人就是管理员,则上面的第2步可以忽略,因为管理员“自动拥有开发者的所有权限,无需重复绑定”。
一个邮箱账号只能申请一个小程序,如果想开发多个小程序怎么办微信官方说明:除个体工商户类型可认证5个小程序外,其他类型一个主体可认证50个小程序。也就是说,如果你是企业主体,你可以弄50个邮箱,申请50个账号,开发50个小程序,而且每个都必须认证才能发布。所以设置名称要谨慎,一旦设置了一个,你就少了一次机会。
特别提醒对于服务器域名,再次强调一下,一定要配置https,否则你是没办法用api进行网络数据请求的。
小程序代码分为前端和后端。
前端代码:需要用“微信开发者工具”上传至微信官方审核就可以了;
后端代码:代码目录一般放在wwwroot根目录下(这里以阿里云服务器为例),具体设置为wwwroot的哪个个目录下,这倒没有什么明确规定,因为访问路径是和域名绑定的,这完全是根据自己的需要来设置的。但有一点,小程序前端源码内的“URL”路径一定要和你的域名网址路径匹配。
前言
最近做小程序,一直用的是本地服务器接口,在用真机测试的时候,发现动态数据并不能同步,研究了一下发现操作很简单
2配置步骤
1首先打开微信开发者工具,打开右上角的详情,点击本地设置,勾选下面的不校验合法域名
2打开手机的热点,用电脑连接手机热点(保证在同一网络下)(很重要)
3打开电脑的控制面板----》网络和Internet----》网络和共享中心----》更改高级共享设置----》勾选启用网络发现
4回退到上一层,选择更改适配器设置,选中手机热点,右键选择状态, 选择详细信息,记住当前的Ipv4地址,在后面要替换localhost
5打开微信开发者工具,将刚才的IPv4地址替换所有的localhost,我这里是将host封装到一个工具包中,一改全改,大家视自己情况而定即可
6最后一步,点击预览扫码即可
0条评论