1.事件绑定 在微信小程序中,事件的绑定依附于组件,当事件触发时,就会执行事件对应的处理函数. 我们回到前几章中的例子,将index页面调整为首页(app.json中调整pages数组元素的顺序),此时我们希望,点击页面中的"Hello World"字样,能够跳转到我们之前写的Welcome页面中去: 首先来说明一下事件的绑定形式: 事件绑定依附于组件,所以其绑定的写法和组件的属性写法是类似的,以key.value形式 key以bind或catch开头并跟上事件类型,如bindtap.…
js:Page( { data:{ parmer:"",             //字符串参数 userinfo:{      userphone:"",      headimage:"../../../../../../image/个人中心/个人中心_07.png",      username:"半世浮沉"    }                       //对象参数 } }) wxml: <image …
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序之控制器的初始化逻辑 通过前面四个章节的介绍,大家对微信小程序的视图和控制器,以及微信调试器的用法已经有了一个最基本的认识了.在这个基础上,让我们进一步学习微信小程序控制器,掌握在小程序控制器中响应用户输入的方法. 这个例子很简单,在微信小程序的视图index.wxml里,我定义了一个按钮,和一个文…
注:本文来源于:<零基础入门微信小程序开发> 课程介绍 本达人课是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件.页面样式文件.JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装.小程序发布等内容,共 9 篇文章. 本课程共包含四个部分. 第一部分(第1-3篇)带你初步了解小程序是什么,然后进行小程序开发的准备工作,从注册账号到安装开发工具一应俱全.工欲善其事,必先利其器. 第二部分(第4-6篇).面…
微信小程序从2016年9月21日开始内测 ,以及在2017年1月9号正式发布也有一段时间了, 很多人开始拥抱微信小程序,我也是一样 ,从微信小程序内测开始就加入进来 , 开始研究微信小程序 ,属于最早的一批小程序开发者 ,但是由于小程序发布后一直不温不火,以及在工作中也没有这方面的需求,所有本人也没有在这方面投入太多的时间, 这里贴一下我开源的一个小程序知乎日报,这是一年前写的了 , 当时也是花了很多的时间去研究,前几天对这个小程序进行了一些修改,也算是重新开始拥抱微信小程序 , 这几天公司也是…
1月9日零点刚过,张小龙与团队正式发布微信小程序.它究竟能在微信8.5亿用户中牵动多少人,现在还很难说.但对于创业者来讲,小程序无疑带来了新契机,以及服务“上帝”们的新方式. 从今天起,只要开发者登录小程序后台,在“开发管理”页面点击“发布”按钮,就会有一个新的微信小程序诞生.可在创建小程序过程中,开发者们还要解决很多问题,比如开发微信小程序需要了解什么?开发微信小程序可能会遇到哪些问题?哪里能找到开发微信小程序可以参考的案例?如何进行数据绑定.列表渲染?小程序开发中的事件如何使用? 在这里,我…
这可能是一个java程序员最不务正业的一次分享了. 小程序的火热相信不用我多说了,年初的时候老婆去浦东某达面试,甚至都被问有没有小程序测试经验.俨然小程序成为了互联网公司自PC,WAP,安卓,IOS之后又一不可或缺的入口.正好这段时间公司也在做一款小程序,于是顺便也学习了一把.当然因为我是一个后端猿,自然是以后端的视角来谈谈,肯定和前端的同学还是比不上的. 学习小程序,我认为对于后端同学还是比较有优势的,因为后端同学对于HTML,CSS以及JS这些前端基本知识还是有所涉猎的,而前端的同学对于后端…
为打通游戏人生擂台赛与线下商家的O2O衔接,同时响应时下日臻火热的微信小程序,项目团队决定也开发一款针对性的微信小程序,以此方便商家在我们平台入驻并进行擂台赛事的创建和奖励的核销,进一步推广擂台赛的玩法模式和渠道来源.以下是我们作为部门团队内第一批吃螃蟹者,在这款微信小程序开发过程中踩过的一些坑以及总结,与大家一起分享,也欢迎指正和交流. 作者:一时两无 | 腾讯互娱高级开发工程师 本文由微信平台开发发表在腾讯云+社区 目前[腾讯游戏人生]小程序已经发布上线,大家可以扫小程序码进行体验.接下来主…
框架的视图层由WXMKL(WeiXin Markup language)与WXSS(WeiXin Style Sheet)编写,由组件进行展示. 对于微信小程序而言,视图层就是所有.wxml文件与.wxss文件的集合. 微信小程序在逻辑层将数据进行处理后发送给视图层展现出来,同时接受视图层的事件反馈. ♦ .wxml文件用于描述页面的结构. ♦ .wxss文件用于描述页面的样式. 视图层以给定的样式展现数据并将时间反馈给逻辑层,而数据展现是以组件来进行的.组件(Component)是视图的基本单…
基础知识---- MINA 框架 为方便微信小程序开发,微信为小程序提供了 MINA 框架,这套框架集成了大量的原生组件以及 API.通过这套框架,我们可以方便快捷的完成相关的小程序开发工作. MINA 框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,因此我们主要聚焦于数据与逻辑上. 响应的数据绑定 框架的核心是一个响应的数据绑定系统. 整个系统分为两块:视图层(View)和逻辑层(App Ser…
微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认证信息如,营业执照等 再次就是用一个未曾开通过公众号的QQ号或微信号来注册一个微信小程序号. 最后,下载微信小程序开发工具. 由于这里,我们更多的关注如何去开发一些app,而不是科谱微信小程序,故在此不在过多的解释,详细的说明,可以去官网帮助文档. 首先,我们拿自己的项目在一步一步的说明并开发吧,…
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教程分为以下三篇 微信小程序日记--高仿知乎日报(上) 微信小程序日记--高仿知乎日报(中) 微信小程序日记--高仿知乎日报(下) 三篇分别讲不同的组件和功能块 这篇要讲 主题日报 我的收藏 设置 图片修正 主题日报 主题日报的样式跟首页几乎一模一样,区别在多了一行主编区域.不过这个主编区域没有实现…
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教程分为以下三篇 微信小程序开发日记--高仿知乎日报(上) 微信小程序开发日记--高仿知乎日报(中) 微信小程序开发日记--高仿知乎日报(下) 三篇分别讲不同的组件和功能块 这篇要讲 日报详情页 底部工具栏 评论页面 日报详情页 日报的内容也是最难做的,因为接口返回的内容是html-,天呀,是html…
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教程分为以下三篇 微信小程序开发日记--高仿知乎日报(上) 微信小程序开发日记--高仿知乎日报(中) 微信小程序开发日记--高仿知乎日报(下) 三篇分别讲不同的组件和功能块 这篇要讲 API分析 启动页 轮播图 日报列表 浮动按钮 侧滑菜单 API分析 以下是使用到的具体API,更加详细参数和返回结…
写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微信小程序内测以来,我的网络信息几乎被它刷屏,一瞬间,都不知道发生了什么.特别是当晚有人熬夜吐血出教程,我勒个去,这么拼,感觉不立马学习等会儿就会被别人踩死在这个行业.惶恐惶恐的过来几天,等到了国庆终于也可以跟风熬夜研究了. 好吧,来吧,所以说菜鸟只会写计算器....嗯,是的,我想不出什么好创意.下面…
做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先来看看其有哪些官方文档. 微信公众平台开发者文档统一入口为:https://mp.weixin.qq.com/wiki,这里面大部分内容都是以前就有的,微信开发都是基于此份文档. 现在的变化是在这份文档的顶部加了一个“微信公众平台.小程序”的入口,这个入口才就是专门针对微信小程序开发的文档,如下图:…
微信小程序开发-新闻列表之新闻列表绑定开发教程: 1.效果图预览 2.准备工作 在拿到效果图后不要先急着去写代码,而是要去分析一下页面的整体结构,用什么方式定位和布局.小程序里建议使用flex布局,因为小程序对flex的支持是很好的. 上一篇博客中完成了轮播图部分,接下来继续完成下面的新闻列表部分 3.wxml部分 新闻列表部分整体使用flex纵向布局比较合适, 先把页面内的元素标签和类名写好. <view class="post-container"> <view…
微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受.首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认证信息如,营业执照等再次就是用一个未曾开通过公众号的QQ号或微信号来注册一个微信小程序号. 最后,下载微信小程序开发工具.由于这里,我们更多的关注如何去开发一些app,而不是科谱微信小程序,故在此不在过多的解释,详细的说明,可以去官网帮助文档. 首先,我们拿自己的项目在一步一步的说明并开发吧,下面是…
选项卡是web开发中经常使用到的一个模块,在小程序中竟然没有,这里参考别人的文章自己做了一个双选项卡 实现思路: 通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是否显示),达到切换展示电影和游戏的目的 代码: 1.index.wxml <!--index.wxml--> <view class="swiper-tab"> <view " bindtap="swichNav">电影&l…
一.添加模板 登录https://mp.weixin.qq.com获取模板,如果没有合适的模板,可以申请添加新模板,审核通过后可使用,详见模板审核说明 页面的 <form/> 组件,属性report-submit为true时,可以声明为需发模板消息,此时点击按钮提交表单可以获取formId,用于发送模板消息.或者当用户完成支付行为,可以获取prepay_id用于发送模板消息. 表单 <form bindsubmit="formSubmit" report-submit…
本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果. 开发准备工作 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 下载开发工具 下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=…
grace和wepy都是辅助小程序开发的开源库,本文对两者做个对比. 注:本文是作者本人的一些拙见,纯粹的技术讨论,不想引起技术信仰之争,欢迎积极.正向的讨论及建议. 如果你还不了解Grace, 请参考:微信小程序开发神器-Grace Github: github.com/wendux/grac- 自小程序发布后,现在最著名的小程序开发框架就是wepy, 它借助一系列工具,通过预编译的手段实现了和Vue接近的开发风格,可以认为wepy更就是小程序的 vue(但还有一些不同,如布局模板),首先,必…
前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从近期的使用上来说,小程序可以作为底层,但是缺少一个框架层,这个框架层需要提供: ① 组件库 ② 更好的代码组织方式,也就是让我们可以做到轻松的组件化开发 我们从最开始到现在,都在沿着这个方向去分解小程序学习,其实小程序本身的东西差不多了,但是我们代码过程中有时候却越高越复杂,多了很多封装,其实这所有…
编写组件 基本结构 接上文:微信小程序开发02-小程序基本介绍 我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ① 只提供Header部分以及容器部分 ② 容器部分的HTML结构由业务层提供 ③ 容器部分对应样式由业务层提供 我们如果要在小程序中实现这类组件,意味着我们需要往小程序中动态插入WXML结构,我们这里先做个demo,试试往动态插入WXML是不是可行 this.setData({'wxml': `…
前言: 微信小程序开入入门,如果你有html+css+javascript的基础,那么你就很快地上手掌握的.下面提供微信小程序官方地址:https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html 下面一起学一学,微信小程序的框架吧~看文档,别学别理解.在下的讲述如果不正确的话,可以参考官方文档,也可以帮忙改正.具体还得看官方文档. 目录 微信小程序的介绍,如何上手小程序,开发的框架,组件,api,技能与实战,…
最近帮人家做一个微信小程序,刚好想熟悉一下.由于牵扯到多用户使用系统,以及数据共享,所以自然架构选择了,客户端和服务器的方式. 后台服务器是windows server,后台程序是.Net  WebApi,跑在IIS下面,因为不想系统太重,数据量不大,所以选择了xml 作为数据库 客户端,服务器架构的微信小程序坑如下 第一坑:(五项条件请具备) 1.一个已备案的域名(二级域名可以的),不是localhost.也不是127.0.0.1,域名不能加端口 (所以不要梦想可以搭在局域网里使用了,那是不可…
微信小程序开发的基本流程 一,微信小程序简介 1,微信小程序简称小程序,张小龙在微信公开课 Pro 上发布的小程序正式上线,时间是2017年1月9日. 2,微信小程序这个词可以分解为“微信”和“小程序”两部分 (1),其中“微信”可以理解为“微信中的”,指的是小程序的执行环境:当然微信在提供执行环境的同时也延长了用户使用微信的时间. (2),“小程序”是说它首先是程序,然后具备轻便的特征.小程序并不像其他应用那样,它不需要安装,而是通过扫描二维码等打开后直接执行:用完以后也不需要卸载.这就是所谓…
本篇文章想跟大家分享下:我们公司“湖北诚万兴科技”最近刚帮客户定制开发.目前已上线的“哎咆课堂”微信小程序的开发经验分享.首先大概介绍下这个小程序所涉及到的主要技术点:微信登录.微信支付.微信小程序Flex布局以及微信小程序视频播放器的使用. 首先,任何一个微信小程序开发之前都需要先设计界面效果图:既然是仿网易云课堂App,那么界面上都有不少地方是借鉴其布局排版,先一睹为快看下首页和课程分类界面的效果吧 界面效果图确定,下面就开始做程序开发,这也是本文要讲的重点,主要经验总结如下: 1.使用"t…
异常描述: 点击按钮获取用户手机号码,有的时候会出现点击无反应或很久之后才弹出用户授权获取手机号码的弹窗,这种情况下,也会出现点击穿透的问题(详见:微信小程序开发——连续快速点击按钮调用小程序api返回后仍然自动重新调用的异常处理) 异常解析: 1. getPhoneNumber的使用: 对于 getPhoneNumber(OBJECT) API,由于小程序需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 <button> 组件的点击来触发(具体使用方法详见getP…
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 一:推荐地址集合:(初入门者请先看这里) 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=147643467…