文 | Angeladaddy 最近组里开发小程序，遇到了一个困扰前端很长时间的话题：页面之间，如何传递数据和变量？ 刚开始，我们选择使用路径传参解决。...这样就「duang」地一下，解决了页面传值问题。 另外，既然小程序可以使用 ES6 的所有特性，那么那个 var that=this 又是什么鬼？为何不能用箭头函数解决作用域问题？
知晓程序注： 我们在之前发布过小程序页面传值方法的简单介绍，说明了在小程序开发中，两种常见的页面之间传值方法。...本期，「知晓程序」为你带来的是「倒数记日」小程序开发者带来的，小程序开发中，有关页面间数据传递的更多方法。 ? ?...文 | 小日子先生 在微信小程序的开发中，我们会经常遇到页面间数据传递或者相互影响的问题。在实际的开发过程中，可以通过以下几种方法来实现。...需要注意的是，在回到 A 页面的时候，小程序需要重新读取数据。...然后将模板所需要的 data 传入，如： ? 传入模板的除了变量，还可以是事件方法对象。例如，模板中的点击事件，可以传递到使用模板的元素中。
前言 前面有说到wepy和mpvue的区别，所以这段时间一直在用mpvue开发了，今天遇到一个问题，mpvue的下拉刷新配置了居然不生效，也是很无赖。...最终找到了这里，mpvue-loader@1.1.2-rc.4+ 升级指南 image.png 这样一看就明白了，将原 src/main.js 中的 config 迁移到 app.json 文件中（页面
作者：goodspeed 知晓程序注： 很多小程序都为用户提供图片上传功能。这时候，使用一些「对象存储」云服务，也许是最快、最经济的选择。 那么，小程序该如何使用这类服务呢？...知晓程序（微信号 zxcx0101）今天分享的这篇文章，会以腾讯云的对象存储服务为例，教大家将小程序接入对象存储服务。 关注「知晓程序」微信公众号，回复「开发」，获取小程序开发全套经验。...在公众平台小程序后台中，配置相关域名信息（否则无法在小程序中发起对该域名的请求）。 ? 这些配置过程这里就不做说明了，接下来主要介绍步骤 4 和 5。 小程序上传图片到 COS 的流程图，如下： ?...关注「知晓程序」微信公众号，回复「源码」，获取该框架下载地址。 在小程序上传图片 1. 选择图片 wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照。...调用这个方法，小程序会把选择的图片放到临时路径，在小程序本次启动期间可以正常使用。 如需持久保存，需再调用 wx.saveFile，在小程序下次启动时才能访问。
https://blog.csdn.net/acoolgiser/article/details/89016852 这里笔者介绍使用weex eros框架开发APP时遇到的在页面上添加图片的问题...： 一、首先是添加一张图片 第一种方式：img标签 第二种方式：image标签 两种标签均支持，但是与普通的HTML页面写法不一样，两种方式都必须给图片标签添加class属性设置图片的width和height，否则不会显示在eros...0-item_pic.jpg" alt=""> 均设置图片标签的样式class： .demo-image { width: 150px; height: 150px;...margin-top: 10px; } 二、通过v-for语句循环添加多张图片 比如： <li v-for ="item_img in imageList"
前面写到微信小程序开发中每一个页面都对应四个文件，它们就是小程序页面组件index.wxml，index.wxss，index.js，index.json四个文件。...index.js： 小程序中的JavaScript文件。在这里可以连接微信云开发数据库，可发送请求给服务器等动态操作。这里就涉及到微信小程序中的云开发了，后面我也会写到。...数据绑定操作： 在js页面中有一个data属性，通过它进行数据绑定。 如： data:{ abc:'def' }, wxml中可以通过{abc}来获取'def'这个值。...，该属性用来声明自定义组件，自定义组件是我们开发者自定义的标签，就像，我们可以自定义一个标签，给这个标签赋予需要的作用或样式，然后就可以在我们的页面使用它。...其他的属性基本与全局配置文件无异，全局配置文件配置过的属性这里无需再次配置，如果重复配置优先显示页面配置文件中的属性值。
一、写一个新的界面需要在app.wpy的<config>代码块下的pages下配置
下面教大家如何在小程序中添加广告。 1、申请成为流量主 首先进入小程序后台，点击流量主，点击开通。 ? 同意协议并点击下一步。 ? 填写个人的相关信息，包括身份证、收款账户等等。 ?...创建好后就会显示在管理页面中，你也可以选择创建多个广告，但是有些广告的曝光率会比较低。 ? 点击获取代码，将广告位的代码复制下来，并放在小程序的相应位置 ?...然后打开微信开发者工具，打开你的小程序工程，在相应的位置粘贴广告代码，保存编译，广告就显示在小程序中了。至于广告的位置，建议放在底部最为合适，如果放在中间，用户的体验会非常的不好。 ?...最后上传代码，并提交给后台进行审核，审核通过后，你的小程序便可以重新发布，小程序下面就出现了广告banner。...3、收益统计 在后台可以对小程序广告的点击次数、曝光量以及收益进行统计，平均点击一次的收益为0.5元，所以假如你的小程序的用户数量足够庞大，完全就能够实现财务自由了。 ?
在上一期“如何使用小程序插件”的分享中有提到，在FinClip中开发者可以像开发小程序一样开发一个插件，而开发出来的插件，既可以提供给自己的团队使用，也可以公开出来供其他开发者使用。...在插件发布之后 FinClip 会托管插件代码，其他小程序调用时，上传的插件代码会随小程序一起下载运行。本期就详细为大家分享一下，如何在FinClip中开发小程序插件？...://myPlugin/hello-component" }}5、 开发页面插件从小程序基础库版本 2.1.1 开始支持页面。...插件可以定义若干个插件页面，可以从本插件的自定义组件、其他页面中跳转，或从使用者小程序中跳转。所有页面必须在配置文件的pages段中列出（参考上文）。...开发者如果需要上传自有插件，需要进入「小程序管理-小程序插件」页面，点击其中的「新增插件」按钮，并在其中分别输入插件名称，头像与介绍信息以完成插件新建。
这是小程序开发第二篇，主要介绍如何上传图片到腾讯云，之所以选择腾讯云，是因为腾讯云免费空间大? 准备工作 上传图片主要是将图片上传到腾讯云对象存储（COS）。...小程序上传图片到 cos 流程如下图： ? 在这个过程中我们需要实现的是，鉴权服务器返回签名的步骤以及小程序的相关步骤。...签名生成 API 上一篇小程序开发：python sanic 实现小程序登录注册 我们介绍过，服务端使用sanic 框架 + swagger_py_codegen 生成 rest-api。...调用这个方法，小程序会把选择的图片放到临时路径（在小程序本次启动期间可以正常使用，如需持久保存，需在主动调用 wx.saveFile，在小程序下次启动时才能访问得到），我们只能将临时路径的文件上传。...cos_path=' + config.cos_dir_name; /** * 上传方法 * filePath: 上传的文件路径 * fileName： 上传到cos后的文件名 * that: 小程序所在当前页面的
主要的坑： 1.网络图片要下载到本地，就是getimginfo和promise，具体技术细节我也不晓得。然后就是本地图片的地址和网络图片的地址不同。本地的要加../.....https://www.ifanr.com/minapp/925253 3.最关键的是，目前有极少的在小程序里用html2canvas的，都是直接把图片啊，文章里的文字啊，取过来，再画到画布上。...shareImgPath: '' //用于储存canvas生成的图片 }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options...ctx.fillText('快来围观作品', 30, 710) ctx.setFontSize(22) ctx.fillText('长按扫码进入小程序查看...wx.showToast({ title: '删除成功', }) } } }) }, // 添加留言
在前面的章节尽管介绍了很多API和组件，但所有的代码都放在了一个页面中（布局放在了wxml文件中，JS代码写在了js文件中），然而，对于一个有实际应用价值的小程序，不可能只有一个页面，如果小程序中包含了多个页面...，就需要从一个页面切换到另一个页面，这被称为页面导航。...要实现页面导航，需要使用标签，该标签允许在当前页面显示另一个页面，也允许显示一个新页面。例如，下面的布局代码中使用了两个标签。...注意：新添加的页面，要在app.json文件的pages中注册，否则无法使用新建立的页面。...图2 在另一个页面显示新页面 点击第二个按钮，会跳转到如图3所示的页面，点击左上角的“返回”按钮，会返回到当前页面的上一个页面。 ? 图3 在当前页面显示新页面
通常轮询广告下方中心的位置是若干个小点（有的可能是其他效果，如横杠），小点数目和广告页面数目相同，当显示某个广告页面时，表示该广告页面的小点就会处于选中状态（一般是变颜色）。...图1 广告轮询视图演示 幸运的是，小程序组件直接提供了这种效果的实现，这就是swiper组件。该组件允许水平或垂直方式暂时多个可以切换的广告页面。本节将详细介绍swiper组件的使用方法。 1....这里使用了小程序的列表渲染技术循环生成了4个页面（wx:for），关于循环渲染技术，会在下一章详细介绍，这里只要了解wx:for是循环即可。 swiper组件中只能放swiper-item组件。...图2 水平广告轮询效果 如果要让swiper组件显示垂直效果的广告轮询图，可以为swiper组件添加一个vertical属性，并将该属性值设为true（默认为false）。...其中autoplay变量的值是true，interval变量的值是2000，也就是每2秒切换到相邻的广告页面，从第3个广告页面开始切换。切换到最后一个页面后，再从第一个页面开始切换。
上一章注册完小程序，添加新建的项目，大致的准备开发已经完成，本章要分享的是 要创建一个简单的页面了，创建小程序页面的具体几个步骤： 1....OK，到此，创建页面和实现页面间的跳转完成 下一章：微信小程序从零开始开发步骤（三）底部导航 文末福利： 福利一：前端，Java，产品经理，微信小程序，Python等资源合集大放送：https://www.jianshu.com...阅读链接： 微信小程序从零开始开发步骤（一）搭建开发环境https://www.jianshu.com/p/0ff8c3b2f59f 微信小程序从零开始开发步骤（二）创建小程序页面https://www.jianshu.com.../p/fe0db14e2869 微信小程序从零开始开发步骤（三）底部导航栏https://www.jianshu.com/p/89a63dc99839 微信小程序从零开始开发步骤（四）自定义分享的功能...https://www.jianshu.com/p/65d9bdb8051d 微信小程序从零开始开发步骤（五）轮播图https://www.jianshu.com/p/bc3261557031 微信小程序从零开始开发步骤
已经完成了登录和注册页面已经开发完毕，当用户注册和登录完毕后，让用户登录到我们的个人信息页面，就是我的页面。...源码：https://github.com/limingios/wxProgram.git 中No.15 我的页面的功能 当其他人查看我的信息，可以看到关注我，粉丝数量，关注数量，获赞数量。...页面的设计 ? mine文件内加入基本的小程序需要的元素 ?...() { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏.../** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数
文 | huazai123 知晓程序（微信号 zxcx0101）今天带来的，是基于「药顾问」微信小程序项目的 socket 客服模块搭建过程。 环境准备 1....搭建 HTTPS 和 WSS 环境 由于微信规定，白名单域名不能携带端口信息，我们建议，开发者使用 NginX 进行代理转发，使其支持微信白名单域名的要求。 2. 定义前后端通信 JSON 协议 ?...运行命令如下（先切换到服务器程序代码的public目录 ）： ? 客户端其实是一个 web 端的 websocket，源码包中同样有提供样例，可供大家参考。 2....小程序端 我们需要简单封装微信提供的 socket 接口，用于处理连接成功、发送消息、连接失败自动重连等操作。 目录结构如下： ? 发送方法封装参考： ? 3....另外，微信小程序真机环境不予许指定端口，那上面的服务器配置就没有什么用，解决办法是：停用 Apache 的 SSL 模块，改用 NginX 作为反向代理。
微信小程序开发系列教程 微信小程序开发系列一：微信小程序的申请和开发环境的搭建 微信小程序开发系列二：微信小程序的视图设计 微信小程序开发系列三：微信小程序的调试方法 微信小程序开发系列四：微信小程序之控制器的初始化逻辑...微信小程序开发系列五：微信小程序中如何响应用户输入事件 微信小程序开发系列六：微信框架API的调用 这个系列教程的前六篇文章我们都在单个的视图上操作。...首先开发第二个视图： [微信小程序开发系列七：微信小程序的页面跳转] <block wx:for="{{logs}}" wx:for-item...util.formatTime(new Date(log)) }) }) } }) 控制器logs.js的实现： 我们可以回忆这个系列里第四篇文章介绍过控制器的实现逻辑： 微信小程序开发系列四.../logs/logs' }) }, 跳转还是通过微信小程序提供的API wx.navigateTo: 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面
微信小程序开发系列教程 微信小程序开发系列一：微信小程序的申请和开发环境的搭建 微信小程序开发系列二：微信小程序的视图设计 微信小程序开发系列三：微信小程序的调试方法 微信小程序开发系列四：微信小程序之控制器的初始化逻辑...微信小程序开发系列五：微信小程序中如何响应用户输入事件 微信小程序开发系列六：微信框架API的调用 这个系列教程的前六篇文章我们都在单个的视图上操作。...util.formatTime(new Date(log)) }) }) } }) 控制器logs.js的实现： 我们可以回忆这个系列里第四篇文章介绍过控制器的实现逻辑： 微信小程序开发系列四...：微信小程序之控制器的初始化逻辑 在控制器里调用Page构造函数，给当前控制器指定名为logs的数据模型。.../logs/logs' }) }, 跳转还是通过微信小程序提供的API wx.navigateTo: 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面
,凡是有用户自发生产内容的都应当提前做检测 04 解决图片安全的方式 在小程序开发中,提供了两种方式 HTTPS调用 云调用 HTTPS 调用的请求接口地止 https://api.weixin.qq.com...而在小程序端,代码如下所示 // miniprogram/pages/imgSecCheck/imgSecCheck.js // 最大上传图片数量 const MAX_IMG_NUM = 9;..., 小程序端请求云函数方式// 图片转化buffer后，调用云函数 console.log(tempFiles); tempFiles.forEach(items =>...也就是说,对于超过1M大小的违规图片,微信官方提供的这个图片安全接口是无法进行校验的 这个根据自己的业务而定,在小程序端对用户上传图片的大小进行限制如果您觉得微信官方提供的图片安全接口满足不了自己的业务需求...至此,关于敏感图片的检测,以及多图片的上传到这里就已经完成了 如下是完整的小程序端逻辑示例代码 // miniprogram/pages/imgSecCheck/imgSecCheck.js // 最大上传图片数量
使用微信自带的 input 组件验证也非常好用，如 maxLength 属性，可以限制用户输入长度，如我这的姓名长度是最大 5 位，直接数字 5 即可。...实际效果，非常快捷，比以前省去很多事情，编写小程序，发现最大的好处可能就是我们不必去考虑一系列兼容性问题。...最后还有个头像上传图片，测试了下目前上传到后台服务器还有点问题，应该是内测版本不太完善导致吧。 设置的直接是背景图片。 提交表单与跳转。...修改名片流程效果图与需求，修改名片是一次性把以前填写的个人信息全部渲染出来，供用户来改动： 名片图片模块，上传图片暂时还有点问题，这里就是模仿了个跳转组件，比较建议需要跳转的页面还是使用 wx.navigateTo...好了，今天更新到这里，下一篇我们聊聊「微信小程序分组功能开发及其它小功能完善」。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
