微信小程序开发的四十个技术窍门总结(推荐)

前言

微信“小程序”正式上线一周时间,相关话题持续升温。支付宝开发“小程序”的消息也随即曝出,互联网巨头们摩拳擦掌,不少网友调侃说,这势头感觉要挑战现有的“APP帝国”了。那么,面对如此炙手可热的小程序,WeX5移动开发云也没有闲着,经过全网搜索,为大家筛选出一条小程序开发者的必读文章,内容涵盖小程序开发实战需要注意的40个技术点,供大家参考!

Q:为什么脚本内不能使用window等对象

A:页面的脚本逻辑是在JsCore中运行,JsCore是一个没有窗口对象的环境,所以不能在脚本中使用window,也无法在脚本中操作组件

Q:为什么 zepto/jquery 无法使用

A:zepto/jquery 会使用到window对象和document对象,所以无法使用。

Q:wx.navigateTo无法打开页面

A:一个应用同时只能打开5个页面,当已经打开了5个页面之后,wx.navigateTo不能正常打开新页面。请避免多层级的交互方式,或者使用wx.redirectTo

Q:样式表不支持级联选择器

A:WXSS支持以.开始的类选择器。

Q:本地资源无法通过 css 获取

A:background-image:可以使用网络图片,或者 base64,或者使用<image/>标签

Q:如何修改窗口的背景色

A:使用 page 标签选择器,可以修改顶层节点的样式

page {
  display: block;
  min-height: 100%;
  background-color: red;
}

Q:为什么上传不成功

A:为了提升体验流畅度,编译后的代码包大小需小于 1MB ,大于 1MB 的代码包将上传失败。

Q:HTTPS 请求不成功

A:tls 仅支持 1.2 及以上版本

Q:网络请求的 referer

A:网络请求的 referer 是不可以设置的,格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html,其中 {appid} 为小程序的 appid {version} 为小程序的版本号,版本号为 0 表示为开发版。

Q:不能直接操作 Page.data

A:避免在直接对 Page.data 进行赋值修改,请使用 Page.setData 进行操作才能将数据同步到页面中进行渲染怎么获取用户输入

能够获取用户输入的组件,需要使用组件的属性bindchange将用户的输入内容同步到 AppService。

<input id="myInput" bindchange="bindChange" /><checkbox id="myCheckbox" bindchange="bindChange" />
var inputContent = {}

Page({
 data: {
 inputContent: {}
 },
 bindChange: function(e) {
 inputContent[e.currentTarget.id] = e.detail.value
 }
})

Q:微信小程序支持fetch或者promise吗?

A:promise工具目前不支持,fetch 客户端不支持 工具下个版本保持统一。

Q:touchmove滑动事件里面的currentTarget. id值不变动。

A:ouchmove / touchend 事件的 target / currentTarget 会永远是 touchstart 时的 target / currentTarget 。

Q:wx.request的POST方法的参数传输服务器接收不到的bug。

A:wx.request post 的 content-type 默认为 ‘application/json '

如果服务器没有用到 json 解释的话,可以把 content-type 设置回 urlencoded

wx.request({
....
method: "POST",
header: {
"content-type": "application/x-www-form-urlencoded"
},
...
})

Q:wx.uploadFile在手机上返回http码403。

A:安卓的微信升级到6.5.2及其以上版本。

Q:小程序SVG支持吗?

A:image的src放远程svg可以,background-image里也可以。

Q:wx.request返回statusCode两端类型不一致。

A:确实有这个问题,稍后的版本将会修复。

Q:关于组件的动态生成与销毁?

A:不支持动态生成组件,但可以用 wx:for 去渲染多个。

Q:小程序支持热更吗?

A:不支持开发者自行更替。

Q:一些接口的回调IOS和Android不一致,例如支付接口,用户取消支付后,ios只回调complete方法,android则回调fail方法,官方文档也没有任何回调说明,造成开发很困难;类似的还有图片选择接口,分享接口等等。

A:支付接口,用户取消支付后,ios只回调complete方法,android则回调fail方法,问题已记录,多谢反馈。

Q:如果icon已经在服务器上了,想用直接访问网址的方法加载图片进来这样可以吗?

A:不能。

Q:ipad不能使用小程序?

A:暂时不支持ipad打开小程序。

Q:小程序音频,视频播放器问题 。1、能够只隐藏进度条跟时间吗?2、现在iOS平台上的时间显示是0:00,但是android上会显示错误码,能够通过什么设置修改吗?

A:1:下个版本会修改这里的交互,不显示进度条和时间。2:6.5.3 版本已修复此问题。

Q:拍照窗口可以加浮层吗?

A:暂时不支持。

Q:开发者工具经常报jsEngineScriptError错误,会导致页面白屏。

A:移步下载最新 0.12.130400 版本的开发工具试试

Q:开发者工具里面,SPA页面,更改title无效。

A:wx.setNavigationBarTitle可以通过 API 改变导航栏标题。

Q:请问小程序页内支持长按保存图片或分享图片吗?

A:目前没有这个功能。

Q:关于swiper中的current问题。如果在新的版本中,直接设current,会产生的效果是:无论从哪个swiper元素点击进去,都会显示swiper第一个子元素的值。

A:目前swiper在处理swiper-item动态变化的情况时有一些bug,会很快修复的。

Q:小程序能引用自己服务器上的wxss和js文件吗?

A:不能,无法执行远程代码。

Q:苹果7,提示内部错误,内存占用过多。

A:页面做的预加载,列表中有图片,图片渲染的太多了,解决办法就是不当屏展示的图片,不让它渲染。

Q:小程序体验者安卓卡在加载页面进不去,IOS可以进去。

A:这是android微信客户端旧版本的bug, 请下载最新版本的 6.5.3 客户端。

Q:请问目前微信小程序支持蓝牙吗?

A:目前不支持。

Q:分享功能真机没有效果?

A:这是android微信客户端旧版本的bug, 请下载最新版本的 6.5.3 客户端。

Q:强制使用https,开发和测试环境下怎么联调和测试?

A:「微信web开发者工具」->「项目」->「开发环境不校验请求域名及TLS版本」。

Q:wx.showToast()方法无效。

调用wx.request请求网络然后在

complete: function (res) {

// complete
wx.hideToast();
}

在成功方法里面如果要进行showToast的时候感觉无效,并没有弹出提示框。

A:success 回调调用是在 complete 之前的,如果在 success showToast,下一步 complete hideToast 就会被冲掉 showToast

Q:picker 组件中的文字大小是否支持修改?

A:不支持修改。

Q:tabBar的图片在android和ios上面大小差异太大。

A:这是android微信客户端旧版本的bug, 请下载最新版本的 6.5.3 客户端

Q:tabbar 页面返回问题。非首页的tabbar 页面 点击左上角返回箭头时如何返回到小程序首页? 现在是直接退出小程序了

A:创建新页面时用 navigateTo 才会新建新页面,同时保留旧页面,如果用 redirectTo 是在当前页面内跳转。

Q:问下 wx.request() 怎么设置成同步。

A:reqeust是发起网络请求。没有同步接口。

Q:最新mac版工具不可用,进来就出现获取appservice 失败。

A:工具设置中选择直接链接网络 。或者 系统中的代理软件设置工具直接链接网络。

Q:真机 view overflow-y下滑会很卡。

A:父层需要 position:relative; 加了之后就不卡了。

总结

以上就是干货分享的主要内容,需要提醒的是,小程序本身还在不断调整、修改、完善之中,对陆续发现的BUG,也需要进行相应的修复。关心小程序开发的朋友请关注我们,获取最新的小程序开发干货。希望本文的内容对大家的学习或者工作能带来一定的帮助。

时间: 2017-01-20

微信小程序开发一键登录 获取session_key和openid实例

微信小程序开发一键登录 获取session_key和openid实例 思来想去不愿自己的微信小程序是个单机版本.自己又不会写后台.现在借助leancloud可以实现微信小程序一键登录功能.尝试后,做笔记. 第一步:下载av-weapp.js,放到utils下. 第二步:使用 const AV = require('../../utils/av-weapp.js');路径根据具体情况而定. 第三步:做初始化. AV.init({ appId: 'EJx0NSfY********-gzGzoHsz'

微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换

微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml <!--index.wxml--> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"

微信小程序开发(二)图片上传+服务端接收详解

这次介绍下小程序当中常用的图片上传. 前几天做了图片上传功能,被坑了一下.接下来我们来看一下微信的上传api. 这里的filePath就是图片的存储路径,类型居然是个String,也就是 只能每次传一张图片,我以前的接口都是接收一个array,我本人又是一个半吊子的PHP,只能自己去改接收图片的接口. 看一下页面效果图 一个很常见的修改头像效果,选择图片(拍照),然后上传. 下面就是贴代码了 首先是小程序的wxml代码 <view class="xd-container">

微信小程序版的知乎日报开发实例

先看看效果图 开发环境准备 小程序 出来第二天就被破解,第三天微信就把开发工具开发下载了, 现在只需要下载 微信开发者工具 就可以使用了, 创建项目的时候,要选择无 appid, 这样就不会有 appid 的验证了. 目录结构 1.app.js 注册app逻辑, app.wxss 全局样式文件 app.json 配置信息 2.pages 存放页面文件 3.utils 工具类代码 4.images 图片资源文件 小程序中每一个页面都会有三个文件 .wxml .wxss .js ,对应着结构.样式.

微信小程序(应用号)开发新闻客户端实例

下载最新版的微信小程序开发工具,目前是v0.9.092300 下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html git下载地址:http://git.oschina.net/dotton/news 先看下效果图: Paste_Image.png 一.新建应用 1.内测阶段对于无内测号的开发者,

详解微信小程序开发之下拉刷新 上拉加载

微信小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善. 上gif: 原理: scroll-view中有监听滑动的方法,这个跟Android类似.其中用到了滑动到顶部,滑动到底部的方法. 1.下拉刷新,在滑动到顶部时,bindscrolltoupper被调用,根据自己的业务逻辑请求即可.我的demo只是随机换了个关键字. 2.上拉加载,在滑动到底部时,bindscrollto

微信小程序 开发指南详解

编写代码 创建小程序实例 点击开发者工具左侧导航的"编辑",我们可以看到这个项目,已经初始化并包含了一些简单的代码文件.最关键也是必不可少的,是 app.js.app.json.app.wxss 这三个.其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件.微信小程序会读取这些文件,并生成小程序实例. 下面我们简单了解这三个文件的功能,方便修改以及从头开发自己的微信小程序. ​ app.js是小程序的脚本代码.我们可以在这个文件中监听并处理小程序的

微信小程序 开发工具快捷键整理

微信小程序 微信开发者工具 快捷键,最近学习研究微信小程序,用了不少快捷键,索性记录下来,后续如果有其它的快捷键继续增加, 微信小程序已经跑起来了.快捷键设置找了好久没找到,完全凭感觉.图贴出来.大家看看. 我现在用的是0.10.101100的版本,后续版本更新快捷键也应该不会有什么变化. 现在貌似不能修改.如果有同学找到修改的方法,麻烦告诉我.谢谢. 微信小程序代码编辑快捷键 常用快捷键 格式调整 Ctrl+S:保存文件 Ctrl+[, Ctrl+]:代码行缩进 Ctrl+Shift+[, C

详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能

微信小程序在12月21日发布了新版本的开发工具,并在官网公布新增分享.模板消息.客服消息.扫一扫.带参数二维码功能. 有了分享功能,相信会给很多创业者带来了无限的可能性! 下面就来看看这些新功能到底怎么用吧! 1.分享 可以分享小程序的任何一个页面给好友或群聊.注意是分享给好友或群聊,并没有分享到朋友圈.一方面微信在尝试流量分发方式,但同时又不愿意开放最大的流量入口. 开发文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/share.html?t=

微信小程序 简单实例(阅读器)的实例开发

今天和朋友聊天说到小程序,然后看在看书,然后我们就弄了个小读书的demo,然后现在分享一下. 一.先来上图: 二.然后下面是详细的说明   首先先说下边的tabBar,项目采用json格式的数据配置,不得不说,现在这个是趋势,.net core的配置也是这种方式了(暴露我是.net 阵营了).   在这里好多同学会发现好多颜色的配置都不管用,是的,现在有效的颜色是有限制的,具体的大家可以进入官方文档去查看.需要几个tabBar,就在list里面写几个,本篇问是三个,所以,你看了三个.上面的ico

微信小程序之绑定点击事件实例详解

微信小程序之绑定点击事件实例详解 微信小程序出来那么久了,趁着有时间自己研究一下,前阶段看一了一下,但是不允许个人注册,现在已经对个人开放了,所以爱好者们可以自己研究了. 首先,我们看一下如何添加底部的标签栏:在app.json里操作 { "pages":[ //在这里添加页面的路径 "pages/index/index", "pages/logs/logs", "pages/home/home" ], "windo

微信小程序三级联动地址选择器的实例代码

本文介绍了微信小程序三级联动地址选择器的实例代码,分享给大家,有需要的可以一起了解一下 在一些电商类的小程序中,地址选择这个功能一般是必备的,一般的收货信息都需要有一个能选择省市县的控件,当然也有些人为了省事就直接写了一个供输入的input,那么这样做的缺点不言而喻,而且用户体验也不是那么的好,今天的这篇文章就分享一下微信小程序地址选择的实现.省市县的数据以及区域码可以从国家统计局查询到,具体可以自己搜一下.照例先上源码和效果图 源码传送门 picker和picker-view组件 在正式介绍实

微信小程序实现音乐播放器

今天继续玩小程序的api,看着别人例子跟着做一个小程序,留下一个脚印吧.末尾附上github源码地址.实现以下微信小程序的音乐播放器,先看下效果图 界面做的确实挺丑的,先上wxss文件 //index.wxss .button-style{ background-color: #eee; border-radius: 8rpx; margin: 20rpx; } 只是顶一个简单的按钮的圆角和间距,颜色这个我还是用primary这个小绿色. 下面是index.wxml文件 //index.wxml

微信小程序 利用css实现遮罩效果实例详解

微信小程序 利用css实现遮罩效果实例详解 实现效果图: 如图所示,使用css实现小程序的遮罩效果,代码如下 js文件代码: //index.js //获取应用实例 var app = getApp() Page({ data: { flag: false }, a: function(){ this.setData({flag: false}) }, b: function(){ this.setData({flag: true}) } }) wxss文件代码: .b1{position:fi

微信小程序电商常用倒计时实现实例

微信小程序电商常用倒计时实现实例 wxml文件放个text <text>second: {{second}} micro second:{{micro_second}}</text> 在js文件中调用 function countdown(that) { var second = that.data.second if (second == 0) { // console.log("Time Out..."); that.setData({ second: &q

Thinkphp5微信小程序获取用户信息接口的实例详解

Thinkphp5微信小程序获取用户信息接口的实例详解 首先在官网下载示例代码, 选php的, 这里有个坑 官方的php文件,编码是UTF-8+的, 所以要把文件改为UTF-8 然后在Thinkphp5 extend文件夹下建立Wxxcx命名空间,把官方的几个类文件放进去(这里要注意文件夹名, 命名空间名, 类名的, 大小写,一定要一样,官方的文件名和类名大小写不一样) 然后是自己的thinkphp接口代码: <?php /** * Created by PhpStorm. * User: le

微信小程序封装http访问网络库实例代码

微信小程序封装http访问网络库实例代码 之前都是使用LeanCloud为存储,现在用传统API调用时做如下封装 文档出处:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html 代码如下: var HOST = 'http://localhost/lendoo/public/index.php/'; // 网站请求接口,统一为post function post(req) { //发起网络请求 wx.request(

微信小程序之页面拦截器的示例代码

场景 小程序有52个页面,其中13个页面无需任何身份,另外39个页面需要系统角色.对于这39个页面,如果微信用户没有系统角色,则跳转到登录页. 是否有系统角色信息需要通过异步请求来获取. 需求分析&实现 对需求进行抽象,其实要的就是一个过滤器,对小程序页面的访问进行过滤,符合条件的通过,不符合条件进行其他处理. 使用过php的laravel框架的童鞋,肯定一下子就联想到了laravel框架的http中间件: HTTP 中间件提供一个方便的机制来过滤进入应用程序的 HTTP 请求,例如,Larav

微信小程序图片自适应支持多图实例详解

微信小程序图片自适应支持多图实例详解 微信小程序图片自适应,是一个比较常见的需求,平时我们在WEBView中,只需要设置max-width:100%.在微信里面虽然widthFix也能实现,但有一个缺陷就是图片的宽度值要大于或者等于设定的值,否则就会发生拉伸变形,本文通过另外一种来适应. 首先我们来看看图片组件给的一些说明: 属性名 类型 默认值 说明 src String 图片资源地址 mode String 'scaleToFill' 图片裁剪.缩放的模式 binderror HandleE

微信小程序canvas写字板效果及实例

微信小程序canvas写字板效果及实例 写字板效果:书写文字,画板重置,导出图片,导出图片前判断是否书写内容 app.json: 添加一个路由:"pages/canvas/canvas" { "pages":[ "pages/index/index", "pages/logs/logs", "pages/canvas/canvas" ], "window":{ "navigat