分类归档

小程序

FWQ
小程序
微信小程序实战运维小项目代码分享
这篇文章主要介绍了微信小程序实战之运维小项目,就是利用微信小程序实现了一个类似138的功能,输入ip就可以查看ip的详细信心,有需要的朋友可以参考借鉴,下面来一起看看吧。 前言 自从微信推出小程序以来,现在业界炒的非常的火,具说叫微信小程序是因为某公司不让叫应用号,我在朋友圈也看过pony的和张小龙朋友圈关于名字的讨论截图,不知道是真是假,反正名字是定了,叫啥无所谓,还是知道它是干啥的比较重要, 像网上说什么新风口了,原生APP以后没活路了等相关文章喜欢的可以多看看, 我们今天不会在产品层面上去介绍小程序,因为我们是搞运维的,所以我还是在运维层面怎么使用小程序。 今天我们用实际例子来讲解和普及小小程序如何使用,来实现类似IP138的功能,输入IP可以查看IP的详细信息,包括归属,地点等。 我们先看下完成后的效果: 实现分析 基本功能就是做一个IP查询的页面,输入ip,能够查询IP的详细信息,后台调用的淘宝的IP库,OK,界面和功能就是这样了,比较简单,接下来我们来介绍小程序的基本概念和使用。 第一步,先下载微信小程序开发者工具,这个是必须的,因为只能在这个工具里去调试你的代码,但写代码不一定要在这个工具里去写,在Sublime 里写也可以,但调试你必须在这工具里,关于怎么下怎么装这我就不多说了,如果这步都没搞定我觉得往下看也没啥意义了,当然是开个玩笑,如果有问题的,可以给我留言。 实现方法 安装后,第一次运行需要用微信扫描,来识别开发者,然后添加项目,微信开发者工具可以帮你生成一个简单的demo项目,生成项目后如图: 我们先看app.js、app.json、app.wxss 这三个,其中 app.js 是小程序的脚本代码,可以定义全局变量, 指定小程序的生命周期函数(onLaunch,onShow,onHide,其它), app.json文件是配置文件,主要配置小程序的页面,所有的页面设置都要写在这个文件里 app.wxss 是公共样式表文件。 除了这些文件,我们还有两个目录,这2个目录展示的是index 页面和 logs 页面,每个目录下如果完整的情况下都会有4个文件: 如上图所示,现在每个目录下分别是index.js、index.wxml、index.wxss,其中.js 后缀的文件是脚本文件,.json 后缀的文件是配置文件(非必须),.wxss…
2024-11-25 阅读全文 →
FWQ
小程序
微信小程序开发之websocket实例详解
为什么需要websocket? 传统的实时交互的游戏,或服务器主动发送消息的行为(如推送服务),如果想做在上,可能你会使用轮询的方式进行,不过这太消耗资源,大量的请求也加重了服务器的负担,而且延迟问题比较严重。如果是自己开发的app,为了解决这些问题,很多团队会自建socket,使用tcp长链接、自定协议的方式与服务器进行相对实时的数据交互。有能力的团队,采用这种方式自然没什么大问题。不过小团队可能就要花费很多时间去调试,要解决很多难题,这个在成本上就划不来。 H5引入了webSocket来解决网页端的长链接问题,而微信小程序也支持websocket。这是一个非常重要的特性,所以本系列的文章会专门拿出一篇来讨论websocket。 webSocket本质上也是TCP连接,它提供全双工的数据传输。一方面可以避免轮询带来的连接频繁建立与断开的性能损耗,另一方面数据可以是比较实时的进行双向传输(因为是长链接),而且WebSocket允许跨域通信(这里有个潜在的跨域安全的问题,得靠服务端来解决)。目前除IE外的浏览器已经对webSocket支持得很好了,微信小程序再推一把之后,它会变得更加流行。 我们来设计一个新的demo,一个比较有趣的小游戏,多人版扫雷,准确地讲,多人版挖黄金。 游戏规则是这样的:把雷换成金子,挖到金子加一分,每人轮流一次(A挖完轮到B,B挖完A才能再点击),点中金子就算你的,也不会炸,游戏继续,直到把场上所有的金子都挖完游戏才结束。跟扫雷一样,数字也是表示周边有几个金子,然后用户根据场上已经翻出来的数字来猜哪一格可能有金子。 这种交互的游戏难点在于,用户的点击操作都要传到服务器上,而且服务器要实时的推送到其它玩家的应用上。另外用户自己也要接收对方操作时实时传过来的数据,这样才不至于重复点中同一个格子。简单讲,就是你要上报操作给服务器,而服务器也要实时给你推消息。为了简化整个模型,我们规定玩家必须轮流来点击,玩家A点完后,才能轮到玩家B,玩家B操作完,玩家A才能点。 我们分几步来实现这个功能。 一、实现思路 1、第一步,我们要先生成扫雷的地图场景 这个算法比较简单,简述一下。随机取某行某列就可以定位一个格子,标记成金子(-1表示金子)。mimeCnt表示要生成的金子的数量,用同样的方式循环标记mimeCnt个随机格子。生成完后,再用一个循环去扫描这些-1的格子,把它周边的格子都加1,当然必须是非金子的格子才加1。代码放在 这里 。 其中increaseArround用来把这格金子周边的格子都加1,实现也比较简单: 执行genMimeArr(),随机生成结果如下: -1表示金子。看了下貌似没什么问题。接下去,我们就要接入webSocket了。 (这个是js版本的,其实生成地图场景的工作是在后台生成,这个js版本只是一个演示,不过算法是一样的。) 2、我们需要一个支持webSocket的服务端 本例子中,我们使用python的tornado框架来实现(tornado提供了tornado.websocket模块)。当然读者也可以使用socket.io,专为webSocket设计的js语言的服务端,用起来非常简单,它也对不支持webSocket的浏览器提供了兼容(flash或comet实现)。 笔者本人比较喜欢使用tornado,做了几年后台开发,使用最多的框架之一的就是它,NIO模型,而且非常轻量级,同样的rps,java可能需要700-800M的内存,tornado只要30-40M,所以在一台4G内存的机子上可以跑上百个tornado服务,而java,对不起,只能跑3个虚拟机。微服务的时代,这一点对小公司很重要。当然如果读者本人对java比较熟悉的话,也可以选择netty框架尝试一下。 webSocket用tornado的另一个好处是,它可以在同一个服务(端口)上同时支持webSocket及http两种协议。tornado的官方demo代码中展示了怎么实现同时使用两种协议。在本游戏中,可以这么用:用户进入首页,用http协议去拉取当前的房间号及数据。因为首页是打开最多的,进了首页的用户不一定会玩游戏。所以首页还没必要建立webSocket链接,webSocket链接主要用来解决频繁请求及推送的操作。首页只有一个请求操作。选了房间号后,进去下一个游戏页面再开始建立webSocket链接。 3、客户端 使用微信小程序开发工具,直接连接是会报域名安全错误的,因为工具内部做了限制,对安全域名才会允许连接。所以同样的,这里我们也继续改下工具的源码,把相关的行改掉就行修改方式如下: 找到asdebug.js的这一行,把它改成: if(false)即可。 `if (!i(r, "webscoket"))…
2024-11-25 阅读全文 →
FWQ
小程序
微信小程序中数据绑定以及简单的逻辑运算的实现代码
本篇文章给大家带来的内容是关于微信小程序中数据绑定以及简单的逻辑运算的实现代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 1、简单用法: Page({   data: {     message: '张三'   } })   /**    * 生命周期函数--监听页面加载    */   onLoad: function (options) {       var content1={          date: "2020年 10月 8日 ",            title:"时间群" ,          nameData:{               name1:"张三李四",               name2:"人五人六",          },          fade:true/false        }       this.setData(content);   }, 登录后复制 2.数据绑定使用 Mustache 语法(双大括号)将变量包起来获取: <view> {{ date}} </view><view> {{ title}} </view><view> {{ nameData.name1}} </view><view> {{ nameData.name2}} </view>//层级用点取值 <image></image>//隐藏/显示…
2024-11-25 阅读全文 →
FWQ
小程序
php微信公众号开发模式详细说明
这篇文章主要了php微信公众号开发详细说明,通过后台器与微信关注用户实现更多的交互作用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 学习步骤:分四章来讲述这部分内容,下面是每章的大致内容。 1、了解开发模式与,开发前的一些准备。 2、开发模式用户、微信服务器、个人服务器是如何交互的。什么是。 3、各种接口功能的调用与实现。 4、js-SDK的调用 微信公众号开发两种模式:编辑模式和开发模式。编辑模式比较简单,你不需要操作任何的代码,只需要借助微信提供的功能来管理自己的微信公众号。这种方式开发的页面比较简单,主要用来实现文章的推送等功能。开发者模式则能通过自己的后台服务器与微信关注用户实现更多的交互作用,调用微信的支付等更为强大的功能。这里我们主要讲解微信公众号的开发者模式。 : 立即学习“”; 1、自己的后台服务器。我用的是新浪云服务,通过SVN将自己的代码到服务器。 1.1 在新浪云上构建服务器操作。登录链接:http://www.sinacloud.com/?from=sogou_web  进入   点击创建新应用   部署环境设置,按照下图。   运行环境选择标准环境是因为标准环境有5G的免费名额。 SVN代码管理方式比要容易些。 创建成功后进入该项目   选择应用下的代码管理   svn仓库信息会在后面在个人电脑上进行部署时会用到。 点击创建版本 2、通过svn来管理代码。 svn是什么?你在sae上创建应用后,会有一个仓库地址用来存放你的代码。如图新浪云-5中svn仓库信息的仓库地址。当你在个人电脑上svn后,通过svn你可以在个人电脑上一个仓库,凡是在放入这个仓库的代码,都可以通过“svn提交”的方式提交到服务器svn仓库,这样就可以实现服务器代码的同步。你也可以“svn更新”的方式,将服务器上的代码更新到个人电脑,方便多人对服务器的代码编辑。…
2024-11-25 阅读全文 →
FWQ
小程序
微信小程序滚动视图容器如何实现的
本文主要介绍了微信小程序之滚动视图容器的实现方法的相关资料,希望通过本文能帮助到大家,让大家掌握这部分内容,需要的朋友可以参考下,希望能帮助到大家。 微信小程序之滚动视图容器的实现方法 直接上两种方案代码以及效果图: 方案1 这种方案是直接使用view,并设置overflow: scroll wxml:  <view>   <view>     {{item}}   </view></view> 登录后复制 wxss:  .container {   position: absolute;   left: 0;   top: 0;   width: 100%;   height: 100vh;   overflow: scroll;   padding-bottom: 20rpx;   background: #FD9494; } .content {   margin: 20rpx auto 0 auto;   width: 710rpx;   height: 300rpx;   background: #ddd;…
2024-11-25 阅读全文 →
FWQ
小程序
JS添加元素新节点
这次给大家带来JS添加元素新节点,JS添加元素新节点的有哪些,下面就是实战案例,一起来看一下。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net - JS添加新节点的几种方法</title> </head> <body> <p id="d"> <span id="s"> 1234567890 </span> </p> </body> <script type="text/javascript"> //首先找到Id为d的元素 var d=document.getElementById('d'); //创建一个节点 var…
2024-11-25 阅读全文 →
FWQ
小程序
有关微信号的课程推荐10篇
一、 微信后台设置1.添加测试授权目录和测试白名单:在微信后台,设置测试授权目录,如xxx.sinaapp.com/example/,测试白名单中添加你的微信号。 注意,这里的“个人微信号”既不是qq号也不是个人昵称。而是登录微信后在“我”界面中的“微信号”字段的字符串。 支付授权目录设不设无所谓,因为我们只是测试。2.列表内容设置网页授权域名: 在“开发者中心/接口权限表/网页账号/网页授权获取用户基本信息”中进行设置。网页授权域名设置为测试服务器的域名,如:xxx.sinaapp.com,不需要http://。二、商户平台设置1.下载证书在“账户设置/api安全/api证书”中下载。需要用到管理员的手机验证码。下载后的进行解压缩,我们需要用到的是apiclient_key.pem和apiclient_cert.pem。2.生成支付key在“账户设置/api安全/api密钥”中进行设置。 1. 简介:添加测试授权目录和测试白名单:  在微信后台,设置测试授权目录,如xxx.sinaapp.com/example/,测试白名单中添加你的微信号。  注意,这里的“个人微信号”既不是qq号也不是个人昵称。而是登录微信后在“我”界面中的“微信号”字段的字符串。 2. 简介:微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受。  首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认证信息如,营业执照等  再次就是用一个未曾开通过公众号的QQ号或微信号来注册一个微信小程序号。  最后,下载微信小程序开发工具。 3. 简介:在关注者与公众号产生消息交互后,公众号可获得关注者的OpenID(加密后的微信号,每个用户对每个公众号的OpenID是唯一的。对于不同公众号,同一用户的openid不同)。公众号可通过本接口来根据OpenID获取用户基本信息,包括昵称、头像、性别、所在城市、语言和关注时间。 4. 简介:到网址: https://mp.weixin.qq.com 注册微信号时,要求我们在目前微信公众号的三种类型(订阅号、服务号、企业号)中进行选中,他们的区别如下所示: 5. 简介:微商成功的关键不是每天去发布产品信息,而是要不断的培养微友的信赖感。这和我们的传统销售有着很大的区别。在传统的销售中,销售者只有40%的时间在与准客户建立关系,比如:吃饭、聊天、节假日的祝福、送礼物等;30%的时间在了解客户的需求,通过面对面的交流;20%的时间在塑造产品的卖点性;10%的时间来做最后成交的运作。微商的销售我认为用10%的时间来与客户建立关系,大家相互加了微信号后关系就已经建立了,20%的时间在朋友圈或自己的第三方平台去塑造产品的形象;10%的时间留给成交;最后剩下的60%的时间 6. 简介:微信开发中,经常有这样的需求:获得用户头像、绑定微信号给用户发信息.. 那么实现这些的前提就是授权! 7. 简介:现在已经有了微信公众号 本来打算是通过让会员使用待验证的微信向微信公众号发送网站注册用户名后台获取该会员的微信帐号和网站用户名…
2024-11-25 阅读全文 →
FWQ
小程序
微信公众平台获取appid和appsecret的方法介绍
我们在申请微信自定义菜单时,要用到appid和appsecret,如何获得appid和appsecret呢?下面我会详细介绍 1、appid和appsecret是微信公众平台服务号才有的,如果自己家的公众平台不是服务号(订阅号是没有的),就想办法升级为服务号吧! 2、登录服务号,登录“服务”条目,“服务中心”如图 3、点击“自定义菜单”-“开发模式” 4、下翻页面,就可以看到自己公众平台帐号的appid和appsecret,其中appsecret,自己可以重新设置 5、注意:appid和appsecret相当是公众帐号的钥匙,不要轻易泄漏给别人,不然可能会被一些别有居心人的利用,到时你的公众号就会有些麻烦了! 以上就是微信公众平台获取appid和appsecret的方法介绍的详细内容,更多请关注米云其它相关文章!
2024-11-25 阅读全文 →
FWQ
小程序
有公众号申请小程序收费吗
注册公众号/小程序都不需要支付费用,认证才需要支付审核费用300元。可以选择只注册,不认证。 先认证小程序再认证公众号是需要重新认证收费的。 如果先认证了公众号,复用公众号资质注册小程序是为了鼓励已有公众号用户接入小程序,简化注册和认证流程,由平台承担审核费用。 以上就是有公众号申请小程序收费吗的详细内容,更多请关注米云其它相关文章!
2024-11-25 阅读全文 →
FWQ
小程序
微信小程序获取用户手机号代码分享
本文主要为大家详细介绍了微信小程序如何获取用户手机号,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 最近在做一款微信小程序,需要获取用户手机号,具体步骤如下: 流程图: 1、首先,客户端调用wx.login,回调数据了包含jscode,用于获取openid(用户唯一标识)和sessionkey(会话密钥)。 2、拿到jscode后,将其发送给服务端,服务端拿它与微信服务端做交互获取openid和sessionkey。具体获取方法如下: (1)需要写一个HttpUrlConnection工具类: public class MyHttpUrlConnection {   private final int mTimeout = 10000; // 超时时间   /**   * get访问   */   public String[] requestJson(String url) {   return request(url);   }   private String[] request(String connurl) {   String[] resultStr = new String[]{"", ""};   StringBuilder resultData = new StringBuilder("");   HttpURLConnection conn = null;   try {    URL url = new URL(connurl);    conn = (HttpURLConnection) url.openConnection();    conn.setRequestMethod("GET");    conn.setUseCaches(false);    conn.setConnectTimeout(mTimeout);    conn.connect();    int resultCode = conn.getResponseCode();    InputStreamReader in;    if (resultCode == 200) { …
2024-11-25 阅读全文 →