小程序

本篇文章给大家带来的内容是关于微信小程序中iconfont的用法详解（附代码） ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 开发过小程序的童鞋肯定都会遇到这样的问题，当我们在小程序中使用iconfont官方推荐的方法插入字体时，我们总会得到一个打印机（滑稽）。那么如何在小程序中正确的使用iconfont呢? 一、 IconFont添加字体 使用GitHub或其他账号登录iconfont，将我们需要的字体添加购物车，然后再添加到新建的项目中。 二、 生成代码 点击查看在线链接,生成代码。 三、 下载代码 点击下载到本地，将下载好的字体文件中的iconfont.中的样式中的代码粘贴到小程序app.wxss中。 四、 复制代码 复制上面我们生成的在线链接粘贴到小程序app.wxss中，最后代码如下图。 /**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between;…

本文主要介绍了微信小程序 上传头像的实例详解的相关资料,希望通过本文能帮助到大家，让大家实现这样的功能，需要的朋友可以参考下，希望能帮助到大家。 微信小程序 上传头像的实例详解 最近在做微信小程序上传头像和上传照片功能就随手写一下代码：  上传头像html： <view> 　　<text>头像</text> 　　　　<view> 　　　　<image></image> 　　</view></view> 登录后复制 js代码： // 切换头像 changeAvatar: function () { var that = this; // var childId = wx.getStorageSync("child_id"); // var token = wx.getStorageSync('token'); wx.chooseImage({ count: 1, // 最多可以选择的图片张数，默认9 sizeType: ['compressed'], // original 原图，compressed 压缩图，默认二者都有 sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有 success: function (res) { console.log(res.tempFilePaths + "修改页面") var avatar = res.tempFilePaths; that.setData({ avatar: avatar, upAvatar:true…

这次给大家带来微信小程序开发上拉加载如何实现，微信小程序开发上拉加载实现的注意事项有哪些，下面就是实战案例，一起来看一下。 我现在公司的项目做的是电商的小程序，下拉刷新，官网写的很明确不能与scroll-view同时使用。我是在脑子瓦特的情况下，onReachBottom 和 scroll-view的bindscrolltolower 都用了。经过我的实践，推荐大家用 onReachBottom。如果是一些tab里面也有下拉刷新，这个就很方便直接上代码： onReachBottom() {        let isPush = this.data.index,             val = this.data.inputVal;         this.setData({             isBtnShow: true         });        if (isPush ==1) {            let num = this.data.limitIndex;             this.setData({                limitIndex: num+1             })         //关于上拉加载的性能优化            setTimeout(()=&gt;{                     // 给后端传下拉刷新的次数+1                     const data = {                        limitIndex: this.data.limitIndex                     };                     utils.sendRequest(api.AllGoodsUrl, data, this.handleReachBottom.bind(this));             },1500)         };        if (val != '') {            setTimeout(()=&gt;{                let num = this.data.limitIndex;                     this.setData({                        limitIndex: num+1                     })                     // 给后端传下拉刷新的次数+1                     const data = {                        limitIndex: this.data.limitIndex,                          data:{                             name: this.data.inputVal,                         }                     };…

这篇文章主要介绍了c#使用微信接口开发微信门户中的微信消息的处理和应答的过程,需要的朋友可以参考下 微信应用如火如荼，很多公司都希望搭上信息快车，这个是一个商机，也是一个技术的方向，因此，有空研究下、学习下微信的相关开发，也就成为计划的安排事情之一了。本系列文章希望从一个循序渐进的角度上，全面介绍微信的相关开发过程和相关经验总结，希望给大家了解一下相关的开发历程。本篇随笔主要基于上一篇《c#使用微信接口开发微信门户应用》的基础上进行深入的介绍，介绍微信消息的处理和应答的过程。 1、微信的消息应答交互 我们知道，微信的服务器架起了客户手机和开发者服务器的一个桥梁，通过消息的传递和响应，实现了与用户的交互操作，下面是它的消息流程图。 微信向开发者服务器请求的消息包含了多种类型，不过基本来说，分为了文本消息处理、事件消息处理、语音消息的识别，以及成为开发者之前的那个消息认证操作基本分类，下面是我绘制的一个消息分类图，其中介绍了这几种关系，以及各自的消息细化分类。 对于这些消息的请求，我们在开发服务器端，需要编写相关的逻辑进行对应给的处理，然后给微信服务器平台回应消息即可。 在前一篇的随笔里面我贴过代码，介绍微信消息处理的入口操作，代码如下所示。 代码如下: public void ProcessRequest(HttpContext context)         {             //WHC.Framework.Commons.LogTextHelper.Info("测试记录");             string postString = string.Empty;             if (HttpContext.Current.Request.HttpMethod.ToUpper() == "POST")             {                 using (Stream stream = HttpContext.Current.Request.InputStream)                 {                     Byte[] postBytes = new Byte[stream.Length];                     stream.Read(postBytes, 0, (Int32)stream.Length);                     postString = Encoding.UTF8.GetString(postBytes);                 }                 if (!string.IsNullOrEmpty(postString))                 {                     Execute(postString);                 }             }             else             {                 Auth();             }…

　　上一篇《微信开发—微信开发环境搭建》我们已经完成了微信开发的准备工作，准备工作完成之后，就要开始步入正题了。 一、微信公众平台的基本原理 　　在开始做之前，先简单介绍了微信公众平台的基本原理。 　　微信服务器就相当于一个转发服务器，终端（手机、Pad等）发起请求至微信服务器，微信服务器然后将请求转发给我们的应用服务器。应用服务器处理完毕后，将响应数据回发给微信服务器，微信服务器再将具体响应信息回复到微信App终端。 　　通信协议为：HTTP 　　数据传输格式为：XML 　　具体的流程如下图所示： 　　 　　来一张更加直观的图吧: 　　 　　我们需要做的事情，就是对微信服务器转发的HTTP请求做出响应。具体的请求内容，我们按照特定的XML格式去解析，处理完毕后，也要按照特定的XML格式返回。 二、微信公众号接入 　　在微信公众平台开发者文档上，关于公众号接入这一节内容在接入指南上写的比较详细的，文档中说接入公众号需要3个步骤，分别是： 　　1、填写服务器配置　　2、验证服务器地址的有效性　　3、依据接口文档实现业务逻辑 　　其实，第3步已经不能算做公众号接入的步骤，而是接入之后，开发人员可以根据微信公众号提供的接口所能做的一些开发。 　　第1步中服务器配置包含服务器地址（URL）、Token和EncodingAESKey。 　　服务器地址即公众号后台提供业务逻辑的入口地址，目前只支持80端口，之后包括接入验证以及任何其它的操作的请求（例如消息的发送、菜单管理、素材管理等）都要从这个地址进入。接入验证和其它请求的区别就是，接入验证时是get请求，其它时候是post请求； 　　Token可由开发者可以任意填写，用作生成签名（该Token会和接口URL中包含的Token进行比对，从而验证安全性）； 　　EncodingAESKey由开发者手动填写或随机生成，将用作消息体加解密密钥。本例中全部以未加密的明文消息方式，不涉及此配置项。 　　第2步，验证服务器地址的有效性，当点击“提交”按钮后，微信服务器将发送一个http的get请求到刚刚填写的服务器地址，并且携带四个参数： 　　 　　接到请求后，我们需要做如下三步，若确认此次GET请求来自微信服务器，原样返回echostr参数内容，则接入生效，否则接入失败。 　　1. 将token、timestamp、nonce三个参数进行字典序排序　　2. 将三个参数字符串拼接成一个字符串进行sha1加密　　3. 开发者获得加密后的字符串可与signature对比，标识该请求来源于微信 　　下面我们用Java代码来演示一下这个验证过程 　　使用IDE(Eclipse或者IntelliJ…

去年年末，微信小程序的分包大小已经到达了 12m 大小,一方面说明小程序的确逐步为开发者放开更大的权限，另一方面也说明了对于某些小程序 8m 的大小已经不够用了。我个人今年也是在开发一个 to b 小程序应用。这里列举一些跨页面交互的场景。对于 B 端应用的业务需求来说，小程序开发的复杂度相对比网页开发要复杂一些。一个是双线程的处理机制问题，另一个是页面栈之间交互问题。注: 笔者目前只需要开发微信小程序，为了在小程序页面中可以使用 properties behaviors observers 等新功能，已经使用 Component 构造器来构造页面。具体可以参考微信小程序 Component 构造器。如果你也没有多端开发的需求，建议尝试使用，可以得到不错的体验。 性能优化类 对于小程序在页面中点击触发 wx.navigateTo 跳转其他页面，中间会有一段时间的空白加载期(对于分包出去的页面，空白期则会更长)，但是这是小程序内部机制，没有办法进行优化。我们只能眼睁睁的等待这段没有意思的空白期过去。 当考虑到跳转页面后的第一件事情便是取数逻辑，那么我们是否能够进行优化呢？答案是肯定的。我们没有办法直接在当前页面取得数据之后再进行跳转操作(这样操作更不好)，但是我们却可以利用缓存当前的请求，详情可以参考我之前的博客文章 ——Promise对象 3 种妙用。 代码如下:…

有一个H5页面的功能，比较简单的一个调查表功能，嵌套在我们微信公众号里面。选用的技术栈是Vue。同时用到了微信的登录和分享接口。 主要功能以及遇到的问题： 左右切换动画 路由带参数跳转 移动端引入外部字体样式 使用htmtl2canvas截图功能 使用微信接口(前端部分) 移动端屏幕适配 移动端点击一个页面点击多次只执行一次问题 ios使用输入框的时键盘弹起来掩盖住按钮问题 打包项目遇到静态资源加载问题 1.左右切换动画 –首先我考虑到用vue的移动端动画库，看了好久，但是项目非常小，就放弃了这个选择自己开始手写。首先我考虑到的是过渡效果。并且找到了相关的文章参考。代码如下： `<template>   <p>     <transition>       <router-view></router-view>     </transition>   </p> </template><script> export default { name: "app", data: () =>…

我们要进行微信公众平台的开发，第一步当然是要有公众号了。什么？不知道什么是微信公众号，看来你还要先回炉炼炼了，呵呵。通俗的说，我们微信平台就好像是一个大社会，里面有个体人，也有各种组织机构。         想要微信开发，首先要有个服务器，但是自己没有。这时候可以用花生壳，将内网映射到公网上，这样就可以在公网访问自己的网站了。         然后要写一个接入代码，而微信上只有php是示例。这里附上的示例。         首先创建一个Default.aspx。在Page_Load里进行检验：（MyLog是，可以忽略）   关于checkSignature()就和所查到的差不多了。这里贴一下   MyLog.DebugInfo("request default.aspx"); String echoStr = Request.QueryString["echostr"]; MyLog.DebugInfo("echoStr:"+echoStr); if (this.checkSignature()) { if(!string.IsNullOrEmpty(echoStr)){ MyLog.DebugInfo("echostr:" + echoStr); Response.Write(echoStr); Response.End(); } } 登录后复制 最最主要的是那句Response.End()，不加这一句怎么样都接不进去（希望有大神告知）。 关于checkSignature()就和所查到的差不多了。这里贴一下 private bool checkSignature()…

基本知识点 三个重要文件：app.js、app.json、app.wxss app.js     可以监听并处理小程序的生命周期函数、声明全局变量 app.json     小程序全局配置，在该文件中配置小程序由哪些页面组成、配置小程序窗口背景色、导航条样式、默认标题等 登录后复制 注意事项：不可添加任何注释 微信小程序中的每一个页面路径+页面名均需写在app.json的pages属性中，并且pages中的第一个页面是小程序的首页 每一个小程序页面由同一路径下同名的四个不同后缀文件组成，如: index.js、index.wxml、index.wxss、index.json .js后缀的文件为脚本文件，.json后缀的文件为配置文件，.wxss后缀的是样式表文件，.wxml后缀的文件是页面结构文件 index.js文件中可以监听并处理页面生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等 为便于开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名 App getApp()     获取当前App实例 getCurrentPages()     获取当前页面栈 登录后复制 注意事项：框架并非运行在浏览器中，如document、window等无法使用 onLaunch     生命周期函数--监听小程序初始化（全局只触发一次） onShow        生命周期函数--监听小程序显示                          当小程序启动或从后台进入前台显示触发 onHide         生命周期函数--监听小程序隐藏                          当小程序从前台进入后台会触发 onError        错误监听函数 登录后复制  当小程序发生脚本错误或者api调用失败时会触发，并带上错误信息 开发者可以添加任意函数或数据到Object参数值，用this可以访问 Page data     页面的初始数据…

在实际的移动应用程序交互方式中，最常见的就是滑动操作。像左右滑动切换页面，手指张开来放大图片等，都是由滑动操作来完成的。 微信小程序默认提供的相关事件如下： 触摸相关操作事件 tap对应点击操作，还提供了longtap来支持长按操作，这些都比较简单，就不多做讲述。touchmove对应滑动操作，通过bindtouchmove即可响应滑动操作。 //wxml <view></view> //js Page({   handletouchmove: function(event) {     console.log(event)   }, }) 登录后复制 当按住view标签并滑动鼠标时，会不停的触发滑动事件，直到放开鼠标，当鼠标移出view标签区域后依然会触发事件。 拖拽操作 通过监听滑动事件，可以实现一些实用的功能，比如用过iphone的用户都知道assistivetouch，一个桌面上的快捷按钮，可以将按钮拖动到桌面的任意位置。为了方便，这里就用一个圆形来代表该按钮。 //wxml <view></view> //wxss .ball {   box-shadow:2px 2px 10px #AAA;   border-radius: 20px;   position: absolute;  } //js Page({   handletouchmove: function(event) {     console.log(event)…