fwq

去年年末，微信小程序的分包大小已经到达了 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)…