网站开发

本篇文章主要介绍了小程序开发实战：实现九宫格界面的的代码实现，具有一定的参考价值，有兴趣的可以了解一下。 小程序是长在微信上的，是移动端的界面，为了能够更方便的使用，我们常常希望使用九宫格界面的方式作为导航，那要如何实现呢？ 基于一个简单的思考，九宫格就是三行三列，如果把行作为一个单位，再将每一行分成三列，那是不是就可以了？我们实践一下。 首先来考虑九宫格数据的生成，每一个格子需要有一个图标、一个标题、一个便于跳转的路由，那天现在我们有九个页面，所以定义一个即可。为了更好的进行后续的配置，我们将这个数组独立到一个文件中routes.，然后将其在index.js页面中引用，routes放到index的目录下。 var PageItems =   [    {     text: '格子1',     icon: '../../images/c1.png',     route: '../c1/c1',    },    {     text: '格子2',     icon: '../../images/c2.png',     route: '../c2/c2',    },     {     text: '格子3',     icon: '../../images/c3.png',     route: '../c3/c3',    },    {     text: '格子4',     icon: '../../images/c4.png',     route: '../c4/c4',    },    {     text: '格子5', …

应用中最常见的应该就是轮图了，本文讲轮播的实现，部分内容来源于官方文档，增加了笔者实际操作中的一些问题与经验。 本文基于微信小程序公测版，ide：微信开发者工具 0.10.102800 组件 swiper 当不设置 vertical 属性，或者 vertical=”false” 时，指示点在组件下部，图片轮播从左至右，效果如下： 当设置 vertical=”true” 时，指示点在组件右部，图片轮播从下至上，效果如下： 注意: swiper是一个容器类视图，但是其中只能放置组件，如放置其他节点，会被自动删除。 swiper-item 代码如下： <!--main.wxml--> <view>     <swiper>         <block>             <swiper-item>                 <image></image>             </swiper-item>         </block>     </swiper></view> 登录后复制 //main.js //获取应用实例 var app = getApp() Page({     data: {         indicatorDots: true,…

本文主要介绍了关于小程序网络请求的封装的相关资料。具有很好的参考价值。下面跟着小编一起来看下吧 以前写过一篇关于微信小程序上拉加载，上拉刷新的文章，今天写的是关于小程序网络请求的封装。 在这里首先声明一个小程序文档的bug，导致大伙们在请求的时候，服务器收到不到参数的问题 示例代码： wx.request({  url: 'test.php', //仅为示例，并非真实的接口地址  data: {  x: '' ,  y: ''  },  header: {  'Content-Type': 'application/json'  },  success: function(res) {  console.log(res.data)  } }) 登录后复制 其中header 中的Content-Type，应该用小写content-type才能让服务器收到参数。让我折腾的好久，改了服务器仍然不行，原来是这个问题。参数在request payload中，服务器不能收到，使用如下转换之后 function json2Form(json) {   var str = [];   for(var p in json){   str.push(encodeURIComponent(p) + "=" + encodeURIComponent(json[p]));   }   return str.join("&amp;");  }…

这篇文章主要为大家详细介绍了php微信公众账号开发之五个坑,具有一定的参考价值，感兴趣的小伙伴们可以参考一下 菜单回复是需要处理XML文件的，我们根据微信返回的XML文件，可以得到每个微信用户相对于微信公众号的唯一标识。微信公众平台的机制简单的将就是我们自己输出固定格式的xml文件，然后微信APP负责解析，得到我们想要的信息，然后对信息统一处理。  第六坑，如果你看微信文档，那么，绝对坑死你，上图。这里的ToUserName和FromUserName一定特么的要分清楚了，记住，千万不要写反了，用户对于微信而言是A→B，那么微信对于用户就是反着来的，貌似现在应该说清楚了。 /// <summary>  /// 接收微信发送的XML消息并且解析  /// </summary>  private void ReceiveXml()  {  try  {   Stream requestStream = System.Web.HttpContext.Current.Request.InputStream;   byte[] requestByte = new byte[requestStream.Length];   requestStream.Read(requestByte, 0, (int)requestStream.Length);   string requestStr = Encoding.UTF8.GetString(requestByte);   if (!string.IsNullOrEmpty(requestStr))   {    //封装请求类   XmlDocument requestDocXml = new XmlDocument();   requestDocXml.LoadXml(requestStr);   XmlElement rootElement = requestDocXml.DocumentElement;   WxXmlModel WxXmlModel = new WxXmlModel();   if (rootElement != null)   {    WxXmlModel.ToUserName = rootElement.SelectSingleNode("ToUserName") == null ? "" : rootElement.SelectSingleNode("ToUserName").InnerText;    WxXmlModel.FromUserName = rootElement.SelectSingleNode("FromUserName") == null ? "" : rootElement.SelectSingleNode("FromUserName").InnerText;    WxXmlModel.CreateTime = rootElement.SelectSingleNode("CreateTime") == null ? "" : rootElement.SelectSingleNode("CreateTime").InnerText;    WxXmlModel.MsgType = rootElement.SelectSingleNode("MsgType") == null ? "" : rootElement.SelectSingleNode("MsgType").InnerText;    switch (WxXmlModel.MsgType)…

微信公众平台消息接口的工作原理大概可以这样理解：从用户端到公众号端一个流程是这样的，用户发送消息到微信服务器，微信服务器将接收到的消息post到用户接入时填写的url中，在url处理程序中，首先判断消息的合法性，判断成功后根据消息体的内容做相应的相应。原理很容易理解，接触过socket的可能理解起来更容易。 然而，微信的文档有的时候确实有点让人摸不着头脑，关于微信接入的文档写的确实不敢恭维啊。官方文档写的第一步是“申请消息接口”，这里是需要填写一个url的，此url用来处理微信发送的消息的，但微信把url中相关的配置写在了第二步，一不小心就把新手给坑了。下面我按照我的理解来进行解释。 首先，开发者在接入时，微信服务器将发送get请求到你填写的url上，此请求携带四个参数，分别signature（微信加密签名，signature结合了开发者填写的token参数和请求中的stamp参数、nonce参数。），timestamp（），nonce（随机数），echostr(随机字符串).用 HttpContext.Current.Request.RawUrl可以获取当前请求的原始url，如下图所示： 开发者通过检验signature对请求进行校验（下面有校验方式）。若确认此次GET请求来自微信服务器，请原样返回echostr参数内容，则接入生效，成为开发者成功，否则接入失败。 加密/校验流程如下：1. 将token、timestamp、nonce三个参数进行字典序排序 2. 将三个参数字符串拼接成一个字符串进行sha1加密 3. 开发者获得加密后的字符串可与signature对比，标识该请求来源于微信。 登录后复制 下面是代码实现。 登录后复制 首先，在你的处理程序中（我是新建了一个一般处理程序wx.ashx）,判断当前请求的类型，因为接入时，是发送的GET请求，消息处理是发送的POST请求。如下图： 登录后复制 这里我对验证url的方法进行封装。 登录后复制 /// <summary>         /// 验证url权限， 接入服务器        /// </summary>         /// <param>         /// <returns></returns>         public static bool ValidUrl(string token)         {            string echoStr = VqiRequest.GetQueryString("echoStr");            if (CheckSignature(token))             {                if (!string.IsNullOrEmpty(echoStr))                 {                     Utils.ResponseWrite(echoStr);                    return true;                 }…

小程序怎么查看base64图片？下面本篇文章给大家介绍一下小程序中预览base64图片的方法，希望对大家有所帮助！ 一、后台传过来的图片为base64格式的，显示的话用【”data:image/PNG;base64,” + data】就可以正常显示。然后在调用微信API接口previewImage却有诸多问题，如： windows开发工具黑屏 部分安卓机型无法显示 控制台报错等 二、经过查询，找到了官方的回答。微信官方的意思是需要用url地址，不支持base64格式，以下是微信官方回答： wx.previewImage API 预览base64图片导致微信闪退? | 微信开放社区 (qq.com)https://developers.weixin.qq.com/community/develop/doc/00088c9e44c3d880597ab22b15bc00?highLine=wx.previewImage%20base64 解决方案 思路：先把base64作为临时文件存到本地，然后预览，预览结束时删除临时文件 // 获取应用实例 const app = getApp() Page({   data: {     //base64数据，由后台传过来     base64: '',     //本机的临时文件路径     localImgUrl: ''   },   onShow: function() {     // 在这里删除临时文件     var localImgUrl = this.data.localImgUrl;…