需求：需要实现聊天室功能，聊天记录倒序，下拉滚动到顶部后，加载更多历史消息。 初步方案：跟社区里大多数一样，把数据按倒序存放，最新的聊天记录放最后面，最旧的放前面。 5 4 3 2 1，倒序。 然后滚动到顶部，拉取10 9 8 7 6后，放入列表为10 9 8 7 6 5 4 3 2 1。这个时候就会出现scroll-view自动滚动到顶部问题。尝试过保持scroll-top的位置，效果不理想，会闪烁，而且在ios真机上无效。 思考和修改方案：正常的列表上拉加载更多是正常的，只要列表的数据头部增加会导致这个问题。 考虑采用正常顺序，使用样式来反向列表显示： 1、消息数据：1 2 3 4 5， 请求到更多历史消息 10 9 8 7 6后，存入列表后面为：1 2 3 4 5 6 7 8 9 10. 2、scroll-view设置enable-flex属性为true。 添加样式： display: flex; flex-direction: column-reverse; 3、bindscrolltoupper监听加载更多历史消息 完美适配，体验也比较完美

任何优秀的大软件里面都是一个优秀的小程序。<br> 点完赞，在查看哦 setData 频繁使用setData会造成js阻塞问题，甚至卡顿，崩溃（崩溃没试过哈）；所以我们应该如何用正确的姿势提高性能呢？ 尽量把需要setData的内容放到一起setData，不要出现一个函数多个或者同时使用setData； 更新对象内的某个值，不应该整个对象重新更新，只需要更新对应的值即可，例如<br> [代码]this.setData({'userInfo.headImg': '更新的内容'})[代码]； 如果是列表数据，需要改变某个值变成true，也不应该全部数据更新一遍，只需要更新某一个值即可，例如<br> [代码]this.setData({[`list[${index}].show`]: true})[代码]； 页面不需要渲染的数据，尽量不要写在js里面的data里面，你可以定义一个全局参数都可以或者this.timer等生成一个全局变量； setData单次不能超过1M，超过会导致设置不成功，建议分页数据可以使用二维数组设置，例如 [代码]// 1.通过一个二维数组来存储数据 let feedList = [[array]]; // 2.维护一个页面变量值，加载完一次数据page++ let page = 1 // 3.页面每次滚动到底部，通过数据路径更新数据 onReachBottom:()=>{ fetchNewData().then((newVal)=>{ this.setData({ ['feedList[' + (page - 1) + ']']: newVal, }) } } // 4.最终我们的数据是[[array1],[array2]]这样的格式，然后通过wx:for遍历渲染数据 [代码] relativeToViewport 我们会发现很多时候，列表展示都是图文展示，而图片后端又没有提供缩略图，这会导致浏览器一次请求多张图片会非常消耗http请求,并且浏览器也有请求数量限制，例如chrome浏览器就限制一次性最多6个，严重还会影响我们业务接口请求，这时我们使用[代码]IntersectionObserver[代码]就太美妙了 解决思路 先创建对象实例[代码]wx.createIntersectionObserver()[代码]; 用数据列表遍历监听页面渲染的元素； 条件判断，动态设置状态显示图片，如果返回滚动则过滤不需要在setData，减轻js工作任务； js代码 [代码] data: { list: [ // 测试数据自己随便造 {id: 0, url: 'https://devapicard.itop123.com/files/img/20201213/20201213141209123634220.png'}, {id: 1, url: 'https://devapicard.itop123.com/files/img/20201213/20201213141209123634220.png'}, {id: 2, url: 'https://devapicard.itop123.com/files/img/20201213/20201213141209123634220.png'}, ] }, onReady() { let list = this.data.list; list.forEach((item,index)=>{ // 遍历监听元素在页面的位置 wx.createIntersectionObserver().relativeToViewport({bottom: 0}).observe(`.img-${index}`,res=>{ if (res.intersectionRatio > 0 && !list[index].show){ // intersectionRatio值大于0，说明元素出现在视图中了 // console.log(item, 'list', res) this.setData({ [`list[${index}].show`]: true }) } }) }) }, [代码] wxml代码 [代码] <view> <block wx:for="{{list}}" mode="aspectFill" wx:key="index"> <view class="test-img img-{{index}}"> <image class="image" wx:if="{{item.show}}" src="{{item.url}}"></image> </view> </block> </view> [代码] wxss代码 [代码].test-img{ width: 600rpx; height: 400rpx; margin-bottom: 20rpx; overflow: hidden; } .image{ width: 100%; } [代码] onPageScroll 这个监听页面滚动事件，输出顶部滚出页面多少距离，单位是px;这个事件非必要时不要写也不要输出内容，这样会很消耗性能，如果必须要使用到，我们要学会写节流或者防抖事件，减少过快的去setData；下面代码是网上复制，结合自己业务改造下即可 [代码]// 防抖 function debounce(fn, wait) {     var timeout = null;     return function() {         if(timeout !== null)  clearTimeout(timeout);         timeout = setTimeout(fn, wait);     } } // 处理函数 function handle() {     console.log(Math.random()); } // 滚动事件 window.addEventListener('scroll', debounce(handle, 1000)); // 节流throttle代码（定时器）： var throttle = function(func, delay) {             var timer = null;             return function() {                 var context = this;               var args = arguments;                 if (!timer) {                     timer = setTimeout(function() {                         func.apply(context, args);                         timer = null;                     }, delay);                 }             }         }         function handle() {             console.log(Math.random());         }         window.addEventListener('scroll', throttle(handle, 1000)); [代码] 代码分包 代码肯定是越写越多，需求也是越来越多的，小程序单个分包最大只能是2M，这就不能让我们的业务代码都写在主包，这会导致我们无法提交代码，并且也会导致我们打开小程序会很慢，体验很差。 为了解决这个问题，微信提供了小程序总共代码包支持最大16M，还支持我们分包功能，这样我们就可以开发更强大的功能，分包又分为普通分包和独立分包，他们又是什么关系，有何不同？ 总的不同是，主包不能调用任何分包的东西，例如js，组件等，但是分包或者独立分包是可以调用或者使用主包的任何东西 分包：分包就是一个可以节省主包代码的一个普通分包，启动分包页面，会把主包下载，普通分包可以使用主包的 js 文件、template、wxss、自定义组件、插件等 独立分包：独立分包不依赖主包即可运行，不需要下载主包，可以很大程度上提升分包页面的启动速度，固并不能使用主包的 js,组件，wxss，插件等 预加载：分包后，如果想打开主包后，跳转不出现加载模块中的等待提示，可以使用预加载，这样就可以做到无缝跳转，增强了用户体验，跳转就像主包跳转主包页面一样顺滑。更多分包讲解请查看微信文档 [代码]{ "pages": [ "pages/index", "pages/logs" ], "subpackages": [ { "root": "moduleA", // 分包 "pages": [ "pages/rabbit", "pages/squirrel" ] }, { "root": "moduleB", // 独立分包 "pages": [ "pages/pear", "pages/pineapple" ], "independent": true // 独立分包的标志 } ], "preloadRule": { // 预加载写法 "pages/index": { "network": "all", "packages": ["moduleA"] // 需要预加载的分包 }, "pages/logs": { "packages": ["moduleB"] // 需要预加载的分包 } } } [代码] 结束 本次写作先到这里，更多丰富好用的内容，请等待下一期~ 都看完了，别忘了给个赞再走~，创作不容易，谢谢哦 本文与掘金号文章同步，欢迎查阅掘金对应的文章

写在前面： 大家不要将ICP证和ICP备案搞混了。 ICP证指的是【电信增值业务经营许可证】，这个资质需要企业主体至少100万注金，去工信部办理，比较难办理；社交-交友需要ICP证。 而ICP备案，【非经营性互联网信息服务备案核准】仅仅是指企业主体的域名备案，可以简单的按以下步骤免费办理成功，其他社交类目如社区、论坛、笔记等，只需要ICP备案即可。 1､在腾讯云注册一个账号并认证企业主体（不吹不黑，开发小程序当然首选腾讯云，好用）。http://www.qcloud.com/ 如果你是个人主体，就不要往下看了，没必要折腾了。 2､找到腾讯云免费活动页：https://cloud.tencent.com/act/free?from=10107 3､选择一款云服务器，180天免费试用。 云服务器申请成功后，它的使命就完成了，没用了，让它自生自灭吧。 在整个备案过程中，也不需要部署网站（域名都没有备案，哪来的网站？）。 [图片] 云服务器180天到期后，可以自己决定是否续费，每个月也才99元，促销期甚至更低，完全可以接受吧。 备案成功后，该服务器就没什么作用了，让它180天后自然欠费销毁得了。 服务器销毁后会有什么影响？答：没有任何影响。 但是。。。。。 你备案的域名最后还得指向一个网站，因为腾讯云会应工信部的要求定期检查网站是否合规，所以你还是要建一个简单的网站，（备案期间，可以暂时不管网站的事，等将来需要的时候再管理）。 至于有多简单，答，多简单都行。此时你可以在七牛、腾讯云、阿里云租点免费的对象存储空间，做个简单的网站。 4､在进行ICP备案之前，你需要在腾讯云注册你的域名地址，如果你已有域名，但不在腾讯云，建议先将要域名过户到腾讯云的账号上。 5､进入控制台，开始ICP备案，这个流程就不介绍了，因为完全一看就懂。而且现在使用备案小程序后，不需要幕布或现场拍照了，极其方便，大家跟着流程走就一点问题没有，有人脸识别和在线拍一段小视频。另外，大家可以随便作，随便填，填错或者填得不合适也不用怕，会有专门的备案客服打电话告诉你哪哪要改，还会告诉你应该怎么填才更容易通过工信部的审核，客服的态度好得发指。 仅说一点其中的几个小坑： a､人脸识别的时候，白色背景、白色背景、白色背景，笔者在人脸识别的时候，满世界找白墙，结果还被打回来重拍了3次。 b､网站用途一律写：公司官网，好通过工信部审核。 6､腾讯云提交资料到工信部审核。这是一个漫长的让人无语的等待，20-30天。笔者最近两次都是20天才过审；不要幻想会有可能提前完成审核，这是政府部门在审核，提前完成说明某政府人员的工作安排有问题，会犯错误的。 7､备案成功后，会有短信通知你，但是，你需要去工信部网站查询结果，并将结果切屏拷贝下来，因为小程序类目审核需要上传这张图片。http://beian.miit.gov.cn/publish/query/indexFirst.action [图片] 把上面这张图片保存好，小程序类目审核的时候需要上传。收到通知后，如果在这里查不到结果，也别急，据说需要24小时。 8､接下来是小程序上线审核。 因为ICP备案的小程序内容肯定涉及到社交，最后小程序上线时还要提交到工信部审核，还需要7天左右的时间，加上前面ICP备案的时间，加起来怎么也得30-40天。大家估计时间，别影响小程序上线。这7天也是政府部门在审核，不要幻想会提前。  9､计算一下时间： 腾讯云注册账号和认证：1-3天； 域名备案：腾讯云环节：1-3天； 域名备案：工信部环节：20-30天； 小程序添加服务类目：社交类目审核：1-3天； 小程序上线审核：腾讯环节：1-2天； 小程序上线审核：工信部环节：7+天； 总天数：30-40天； 10、节省时间的一些建议： 在开发小程序之前，就开始备案工作，小程序可以同时开发，相互不影响； 在开发完成之前一、两星期之内，先发布一版小程序，别管功能是不是完整，能通过审核就行，这样会有7天的等待类目审核的时间，这个时间里，小程序可以照常开发，不影响进度； 只要是社交类，基本需要有文字和图片安全检查功能，别忘了加上，别到时审核通过不了。 11、结束。 [图片]

微信小程序页面之间正向传值和逆向传值 正向传值 一 直接使用URL传值 [代码] wx.navigateTo({ url: `/pages/contacts-edit/contacts-edit?name=zhangsan&idx=1`, }) [代码] 但是如果一个对象结构比较复杂, 数据量比较大, 即使转换成JSON也有可能会被莫名其妙的截取. 所以使用URL传值的时候, 需要先编码 我是这样做的 [代码]// A页面触发事件, 跳转到B页面 _onClickCell: function (e) { let contacts = { name: '张三', phone: '13800001111', safePhone: '138****1111', idCard: '230524202113324455', safeIdCard: '230524********4455', typeStr: '成人', gender: '0', genderStr: '保密' } // 先对数据进行JSON let jsonStr = JSON.stringify(contacts) // 对数据进行URI编码, 如果不进行这一步操作, 数据有可能会被截断, 少量数据没有问题, 如果是一个大的对象, 就容易被截断获取不到完整的数据 let data = encodeURIComponent(jsonStr) wx.navigateTo({ url: `/pages/contacts-edit/contacts-edit?contacts=${data}&idx=${idx}`, }) }, // B页面再onLoad方法中接收参数 onLoad: function (options) { let idx = (!!options.idx) ? Number(options.idx) : -1 let contacts = {} if (!!options.contacts) { let jsonStr = decodeURIComponent(options.contacts) contacts = JSON.parse(jsonStr) } this.setData({ contacts, idx }) }, [代码] 二 使用eventChannel来传递 [代码]//A页面准备跳转到B页面 _onClickCell: function (e) { let address = { id: 457, name: '小艾-3', countryCode: '86', phone: '13892292222', reginoCode: '871', city: '市辖区', area: '海淀区', street: '东北旺路8号院中关村软件园8号楼华夏科技大厦', address: '中国北京市市辖区海淀区东北旺路8号院中关村软件园8号楼华夏科技大厦' }, wx.navigateTo({ url: '/pages/address-edit/address-edit', success: res => { // 这里给要打开的页面传递数据. 第一个参数:方法key, 第二个参数:需要传递的数据 res.eventChannel.emit('setAddressEditData', address) } }) } //B页面在onLoad方法中接收参数 onLoad: function (options) { // 接收上个页面传递来的数据 let eventChannel = this.getOpenerEventChannel() // setAddressEditData和上个页面设置的相同即可 eventChannel.on('setAddressEditData', (address) => { this.setData({ address: address || {}, }) }) }, [代码] 逆向传值 一 使用全局对象, 获取全部页面来逆向传值 [代码] _onClickComplete: function () { // 获取当前全部的页面栈 let arr = getCurrentPages() // 获取到要逆向传值的上一个页面 let lastPage = (arr.length >= 2) ? arr[arr.length - 2] : undefined // 判断拿到的上一个页面是不是我们要的页面 if (!!lastPage && lastPage.route == 'pages/contacts-list/contacts-list') { /* 这里我们就拿到了上一个页面的页面对象, 这里其实我们就可以使用lastPage做很多事情了, 例如直接操作lastPage.data, 修改上一个页面的数据 或者调用这个页面内的方法, 我上一个页面预留了一个更新方法, 所以这里就直接用上一个页面调用数据刷新的方法, 我这里给赋值, 就可以携带数据回上一个页面了 */ lastPage.updateContactList(this.data.contacts, this.data.idx) // 返回上一个页面 wx.navigateBack() } }, [代码] 二 使用eventChannel来逆向传值 B->A [代码]// B页面 _onClickComplete: function (e) { let eventChannel = this.getOpenerEventChannel() // updateAddressListData 这个方法需要上一个页面的支持, 上一个页面在navigateTo方法中的events数据中定义这个方法来接收数据 eventChannel.emit('updateAddressListData', this.data.address, this.data.idx) wx.navigateBack() }, // A页面需要的支持 _onClickCell: function (e) { wx.navigateTo({ url: '/pages/address-edit/address-edit', events: { // 这里用来接收后面页面传递回来的数据 updateAddressListData: (address, index) => { // 这里处理数据即可 } } }) } [代码] 代码片段

老规矩，直奔主题，三步走： Step 1： Ctrl+Shift+X 打开扩展 - 搜索 easy Less 并安装 Step 2： Ctrl+ 逗号 打开设置 - 搜索 easy Less config 并选择 点在setings.json中编辑 把下面配置粘贴进去（注意配置项间隔的逗号不要漏了） [代码]"less.compile": { // "compress": true, // 是否删除多余空白字符 // "sourceMap": true, // 是否创建文件目录树，true的话会自动生成一个 .css.map 文件 "outExt": ".wxss" // 输出文件的后缀,默认为.css } [代码] Step 3： 在你的wxml同级目录下新建一个 文件名.less 书写less语法的css并保存，同级目录下就会自动生成一个 文件名.wxss的文件 好了，这次分享到这里就结束了。如果你觉得对你有帮助，请给我点个赞并留言告诉我，让我为你开心下😊。

应用场景 发帖回帖、评论点赞，可在校园、职场等使用的社交平台。 目标用户男女老少皆可。 开发者1.江苏大学研究生 秦学聪 2.南京邮电大学研究生 付阳烨 实现思路 数据库：将图片信息、帖子信息、评论信息、点赞信息存入数据库，管理贴主的昵称、位置等用户信息，管理评论的时间、内容等详情，管理每条评论的点赞数量。 发帖及评论：所有的帖子按发帖时间顺序显示在主页，每条帖子包含发帖者头像和昵称、文字内容、时间、地点（可选）、图片（可选）信息。每条帖子可由多人评论及点赞，每条评论包含评论人、内容、时间信息。 订阅消息：帖子被评论时发帖者可收到订阅消息提醒，使用的是小程序任务被评论提醒模板，设置了任务名称、评论内容、评论人以及进入小程序查看四个参数，评论者在评论帖子前可以选择是否提醒帖主（授权订阅消息），帖主收到被评论提醒可能存在一定延迟，收到提醒后可以点击“进入小程序查看”，将直接跳转到帖主所被评论的帖子界面来进行进一步操作。 点赞：每人可点赞一次，第二次点赞将取消赞，点赞时有动画，使用了一秒延时设置使得在点赞一秒后才能再次点击点赞按钮并且读取数据库重现渲染页面。 删帖（评论）：发帖者可删除自己的帖子，删除时同时清除所有评论，但发帖者不得删除他人评论，同时非发帖者用户只能删除自己的评论。 UI：Vant-Weapp UI组件 架构图[图片] 效果截图发帖： [图片] 主页： [图片] 帖子详情及评论： [图片] 订阅消息提醒： [图片] 帖子删除（操作者若为帖主则可以删除带评论的帖子）： [图片] 网页端调试： [图片] 功能代码展示[图片] [图片] [图片] 作品体验二维码（发布审核中）[图片]

简介：当我们的微信小程序需要服务器支持业务的时候，首先可以考虑的就是云开发，云开发的提供的可视化数据库，以及云函数，可以实现服务器的绝大部分功能，可见功能是很强大的。但是我们要清楚一点，云开发不是一个完整的服务器，它没有提供一个可以访问的地址，没有一台真正的虚拟主机。如果只是为小程序提供服务的时候是绰绰有余的，但是如果它要和一个服务器一样，对一些其他终端，比如电脑手机还有单片机等，是不行的，这时候我们就需要搭建一个真正的服务器。这篇文章我基于stm32单片机为微信小程序提供地址信息的背景下搭建的简易服务器。 我会介绍很详细每一步的指令还有一些错误的处理方式，以及列出我所有参考的博客和资料，请需要的朋友仔细看，一定会有所收获的。 第一部分 linux服务器的搭建 1.服务器的选择和购买 我是购买的腾讯云的学生服务器，配置不是很高，但是够用了，服务器的购买我这里不作赘述，可以参考腾讯云的文档和视频。但是要注意的一点是服务器的操作系统，centOS6+和cenOS7+的操作系统差别很大，尤其是在防火墙的设置上。本文是基于操作系统centOS6.9的，centOS7的服务器我会提及一些，并且给出一些参考文档。 2.服务器的环境搭建（python3+flask框架） （1）配置python3环境 使用mkdir创建一个目录，用来放置python3。 cd进入到目录中，ll查看目录中的所有文件 [root@localhost bin]# mkdir /usr/local/python3 [root@localhost bin]# cd /usr/local/python3 [root@localhost python3]# ll 把安装包下载下来，使用下面这个命令 [root@localhost python3]# wget https://www.python.org/ftp/python/3.6.3/Python-3.6.3.tgz 等待下载完成之后会在当前目录下出现一个tgz包，命令解压这个包到当前目录就可以： #解压命令 [root@localhost python3]# tar -xvf Python-3.6.3.tgz #解压完成后，查看目录下文件 [root@localhost python3]# ll total 22148 drwxr-xr-x. 17 501 501 4096 Oct 21 12:22 Python-3.6.3 -rw-r--r--. 1 root root 22673115 Oct 3 15:47 Python-3.6.3.tgz 就要开始安装了，因为下载的包是未编译的，我们需要编译一下。进入文件目录： [root@localhost python3]# cd Python-3.6.3/ [root@localhost Python-3.6.3]# 然后如下命令（执行完这句命令之后，不要切换到别的目录，不然会非常懵逼，因为执行完之后如果去/usr/local/下面的看的话是没有python3Dir目录的）： [root@localhost Python-3.6.3]# ./configure --prefix=/usr/local/python3Dir 稍微解释上面这句命令，这句话的大致目的就是把python的安装目录指定一下，这样的话，里面的一些bin目录、lib目录就都会存放在这个目录下面。如果不指定这个安装目录的话，最后python的安装文件将分散到linux的默认目录，不在一块。我们指定安装目录，以后卸载的话直接删除目录就可以干净卸载了。 现在我们当前目录还是在/usr/local/python3/Python-3.6.3，执行如下命令： [root@localhost Python-3.6.3]# make 然后出来一大堆代码，等它执行完毕。接着输入以下命令： [root@localhost Python-3.6.3]# make install 又是一大堆代码，执行完毕之后，我们就可以切换到/usr/local/python3Dir目录下去查看了。 [root@localhost Python-3.6.3]# cd /usr/local/python3Dir/ [root@localhost python3Dir]# ll total 0 drwxr-xr-x. 2 root root 245 Oct 21 12:26 bin drwxr-xr-x. 3 root root 24 Oct 21 12:26 include drwxr-xr-x. 4 root root 63 Oct 21 12:26 lib drwxr-xr-x. 3 root root 17 Oct 21 12:26 share [root@localhost python3Dir]# 接下来我们还有一点善后工作。切换到 /usr/bin目录下面吧： [root@localhost python3Dir]# cd /usr/bin #然后输入以下命令 ，创建一个软链接 [root@localhost bin]# ln -s /usr/local/python3Dir/bin/python3 /usr/bin/python3 [root@localhost bin]# ln -s /usr/local/python3Dir/bin/pip3 /usr/bin/pip3 a.安装python3报错 在configure那一步我们安装python3的时候有时候会发现报错，因为我们买的服务器里缺少有效的c编译器 安装gcc编译器使用命令： yum -y install gcc 安装g++编译器使用命令： yum -y install gcc-c++ (不能使用yum -y install g++，否则提示没有g++这个包名) b.缺少pip3报错 我们安装python3的时候有时候会出现包里没有pip3而报错，处理方式如下 安装pip前需要前置安装setuptools wget --no-check-certificate  https://pypi.python.org/packages/source/s/setuptools/setuptools-19.6.tar.gz#md5=c607dd118eae682c44ed146367a17e26 解压，并且进入解压目录 tar -zxvf setuptools-19.6.tar.gz 进入目录并安装 cd setuptools-19.6 python3 setup.py build python3 setup.py install #这里报错了：RuntimeError: Compression requires the (missing) zlib module 因此需要在linux中安装zlib-devel包，进行支持 当然，如果没有报错(上面安装python的时候如果安装了zlib相关依赖就不会报错)，则不需要进行此步骤，直接跳到第5步，直接安装pip yum install zlib-devel 这时又需要对python3.6进行重新编译安装。 cd Python-3.6.0  # 这里根据个人设置，进入之前的Python解压后的安装包的所在路径 make && make install 漫长的编译安装过程后，再重新安装setuptools #记得重新回到自己的setuptools-19.6目录下 python3 setup.py build python3 setup.py install 安装pip wget https://pypi.python.org/packages/11/b6/abcb525026a4be042b486df43905d6893fb04f05aac21c32c638e939e447/pip-9.0.1.tar.gz#md5=35f01da33009719497f01a4ba69d63c9 tar -zxvf pip-9.0.1.tar.gz   # 解压 cd pip-9.0.1   # 进入目录 python3 setup.py install  # 安装 更新pip3 pip3 install --upgrade pip (2)安装flask第三方库，并且配置你的程序 很多博客都提到了需要安装一个虚拟环境，但是实际上虚拟环境是为了应对多版本的兼容问题。实际上如果服务器的业务比较简单，文件比较少的话可以不用虚拟环境。大部分博客也提到了要安装nginx和uWSGi,其实这两个可以不用装，只是简单flask框架足以处理所有的http请求 sudo pip3 install Flask 这时候可以尝试运行一下你的程序 假设我们的程序如下 from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'hello world!' if __name__='__main__': app.run(port=9000) 使用vim指令创建一个你的文件，并且运行它你会发现会报错？为什么是因为你的防火墙端口还没打开 vim的使用可以参考下面这个博客https://www.cnblogs.com/nanyu/p/9123196.html (3)开放防火墙端口 我们的腾讯云的服务器刚买来默认开放的端口只有22，而阿里云的好一些，会开发3306，22等等，但是我们提供服务的端口不能重合，所以要设置端口，使它处于监听状态下，查看打开的端口 /etc/init.d/iptables status Centos查看端口占用情况命令，比如查看80端口占用情况使用如下命令： lsof -i tcp:80 列出所有端口 netstat -ntlp 开启端口（以80端口为例） 方法一： /sbin/iptables -I INPUT -p tcp --dport 80 -j ACCEPT   写入修改 /etc/init.d/iptables save   保存修改 service iptables restart    重启防火墙，修改生效 方法二： vi /etc/sysconfig/iptables  打开配置文件加入如下语句: -A INPUT -p tcp -m state --state NEW -m tcp --dport 80 -j ACCEPT   重启防火墙，修改完成 如果你的服务器操作是7.0及以上就不能使用iptables指令了，7改成了firewall，所以你可以参考下面这个博客 https://www.cnblogs.com/eaglezb/p/6073739.html (4)为服务器开通http服务 如果你打开了端口运行了程序还是不行，是因为腾讯云的服务器刚买来的时候开通的网络服务只有ssh，所以你要为它配置http服务 yum install httpd vsftpd 设置开机自启动 chkconfig httpd on[图片] 启动服务http service httpd start 如果你的服务器是centOS7版本的那么你可以参考下面这个文档 https://www.cnblogs.com/jefflee168/p/6403500.html (5)配置服务器的https服务 如果你想给服务器配置一个https服务，拥有安全ssl安全证书更安全的服务。这个服务可以让你的网址在微信小程序的后台配置。这时候你就需要去申请一个域名并且实名认证，以及备案。详细流程请参考腾讯云的文档，写的很详细，你备案成功会拿到一个安全证书，请把它配置到服务器上，参考下面博客可以帮助你配置https服务 https://blog.csdn.net/caoshunxin01/article/details/79355291 需要注意的是如果你想要备案网站是要很久的，如果比较急的开发者不建议。 (6)配置supervisor 如果你想要把你的程序挂在服务器上一直运行不掉的话，可以使用nohup指令，但是这个指令它虽然很简单粗暴，但是不可靠。 Supervisord是一个守护进程的工具，当进程意外终止或服务器掉电起来后，希望进程能够自动运行，supervisord可以很好的为我们做这件事情。同时supervisord也自带监控界面，可以通过浏览器灵活的查看、操作。 安装supervisor ubantu:sudo apt-get install supervisor  centos: yum install supervisor 配置supervisord.conf文件 找到supervisord.conf配置文件，一般centos 在/etc/ 目录下，ubantu 在/etc/supervisor/ 目录下，用root权限打开该文件： sudo vim /etc/supervisord.conf 在文件末尾添加如下几行： [program:myProgram] command=python /home/myname/test.py autostart=true autorestart=ture stdout_logfile=/home/myname/test.log 注释：第一行的myProgram自己取个名字，表示你的项目就行 第二行的python /home/myname/test.py表示你运行程序的命令 第三行表示自动启动，如果值为false则表示不自动启动 第四行表示自动重启，如果值为false则表示不自动重启 最后一样表示程序打印出的信息都记录在该test.log文件内，是log文件 启动supervisor和程序,命令行输入： sudo supervisord  supervisord -c /etc/supervisord.conf supervisor常用指令 sudo service supervisor stop #停止supervisor服务 sudo service supervisor start #启动supervisor服务 supervisorctl shutdown #关闭所有任务 supervisorctl stop|start program_name #启动或停止服务 supervisorctl status #查看所有任务状态 一切准备就绪，服务器已经可以用啦，使用ps -A指令会发现，进程中有supervisor 第二部分 小程序的云开发和服务器建立练习 如果之前已经把服务器的https服务配置好的朋友，只需要使用API中wx.request就可以和服务器通信了，但是如果我们的服务器没有备案，没有域名，只能通过http访问，就只能通过云开发中的云函数来实现这一功能。而且小程序后台合法的https网址最多也只能配置5个有的时候是不够用这时候也可以使用云函数。云开发小程序的创建这里不做赘述，可以看小程序云开发的文档。我这里为了发送http请求加入了一个got依赖。 这里有一个云函数的部署问题，每次云函数修改，一定要右键云函数文件夹把它部署到云端上，不然你模拟器在模拟它的时候它实际上是没有更新的，只有在本地调试的时候才能体现更新。 (1)云函数的本地配置 打开cmd，进入到配置的云函数的根目录，切记是云函数的根目录，不是小程序根目录。 [图片] 接下来安装我们的两个依赖wx-server-sdk和got。这里有一个巨坑，npm安装got的时候一定要按照我下面写的方式来装，不要直接npm install got。因为云函数的环境是node.js的8.9版本，而本地的是10+，所以如果直接这样装的话会导致你的云函数在调用的时候根本不能用，但是在云函数本地调试的时候却可以用。这里要特别感谢社区的大佬 undefined ,大佬帮我解决了这个困扰了我好久的问题。 [图片] (2)云函数的程序编写 get 请求方式// 云函数入口文件 const cloud = require('wx-server-sdk') const got = require('got'); cloud.init() // 云函数入口函数 exports.main = async (event, context) => { let getResponse = await got('httpbin.org/get') return getResponse.body } post 请求方式// 云函数入口文件 const cloud = require('wx-server-sdk') const got = require('got'); cloud.init() // 云函数入口函数 exports.main = async (event, context) => { let postResponse = await got('httpbin.org/post', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body:JSON.stringify({ title: 'title test', value: 'value test' }) }) return postResponse.body } pages/http 文件 http // pages/http/http.js Page({ http: function(event) { wx.cloud.callFunction({ name: 'http' }).then( res => { console.log(res.result) // get console.log(JSON.parse(res.result)) // post }) } }) 这里要特别纠正一下，上面是网上的参考，但是这样子的写法，在云函数那块是会报错的不能这样写，这里还是要特别感谢大佬 undefined 的帮助，他纠正了我的云函数写法，应该按照下面这样写 [图片] 结语：我开发了一个stm32单片机发送定位信息的通信系统的服务器端和手机监控端，从0开始，前前后后一共做了3个星期，经历了很多曲折，多亏了社区里一些朋友的积极知道，我从一个菜鸟总算入了一些门道，还得感谢我的朋友王菲凡，她帮助了我很多，是一个合格小黄鸭（逃）。 这篇博客总结了我的心得和体会，适合向我一样的新手看。 感谢你们看到这里，如果你们觉得有用就点个赞再走吧。 参考资料： 安装pip3参考下面这个博客https://blog.csdn.net/qq_25046261/article/details/78985109 centos7关闭和开启防火墙参考下面这个简述博客https://www.jianshu.com/p/bad33004bb4f 当我在部署flask框架的时候参考了这个博客https://cloud.tencent.com/developer/article/1249279 使用linux的vim的时候参考下面这个博客https://www.cnblogs.com/nanyu/p/9123196.html 使用centos7的时候开放端口参考如下博客https://www.cnblogs.com/Sungeek/p/8257681.html centos6开放端口参考如下这个博客https://cloud.tencent.com/developer/article/1137647 centos配置python3的时候参考下面这个博客https://www.cnblogs.com/simuhunluo/p/7704765.html 更新pip3 pip3 install --upgrade pip 配置防火墙http服务https://blog.csdn.net/q982151756/article/details/80281412s flask常用组件https://www.cnblogs.com/kendrick/p/7590648.html iptables配置参考https://wiki.debian.org/iptables以及https://yq.aliyun.com/articles/253681?spm=5176.10695662.1996646101.searchclickresult.715145cbw0kh5K 配置服务器允许http协议参考https://blog.csdn.net/zuoyigexingfude/article/details/51035613 centos7和6服务器端口配置https://www.cnblogs.com/eaglezb/p/6073739.html 配置服务器的https参考：https://blog.csdn.net/Xeon_CC/article/details/92407534 使用supervisor参考https://blog.csdn.net/u013421629/article/details/79174313 配置centos6的http服务参考这个博客https://blog.csdn.net/caoshunxin01/article/details/79355291 centos7配置http服务参考这个博客https://www.cnblogs.com/jefflee168/p/6403500.html got使用参考了这个https://www.jianshu.com/p/c8a497579617