项目目录: 逻辑层: pay.js // pages/pay/pay.js Page({ /** * 页面的初始数据 */ data: { resultType: "", resultContent: "", url:"" }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var resultType = options.resultType; if (resultType == &q…

本文转自:http://blog.csdn.net/michael_ouyang/article/details/70755892 续上一篇的文章:微信小程序之商品属性分类  —— 微信小程序实战商城系列(4) 自从认识某人后,我收获了两个成功.登录成功.付款成功,而且还拥有了自己的一辆车: 购物车 也发现了自己的不足之处: 余额不足. 为大家介绍的就是购物车 这里演示从商品列表中添加到购物车 下面先做商品列表页.如下图: 布局分析: 首先一个list的主盒子,接着是item盒子,这是必须的.…

本文转自:http://blog.csdn.net/michael_ouyang/article/details/70194144 我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示: 在宝贝详情页里: 在购物车里: 现在就为大家介绍这个小组件,在小程序中,该如何去写 下图为本项目的图: wxml: <!-- 主容器 --> <view class="stepper"> <!-- 减号 --> <text class="…

本文转自;http://blog.csdn.net/michael_ouyang/article/details/56846185 loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流量,基于优化的角度来考虑,后台不要一次性返回所有数据,当用户有需要再往下翻的时候,再加载更加数据出来. 业务需求: 列表滚动到底部时,继续往上拉,加载更多内容 必备参数…

下拉刷新 实现下拉刷新目前能想到的有两种方式 1. 调用系统的API,系统有提供下拉刷新的API接口 当然,你可以直接在全局变量app.json的window里面配置上面这个属性,这样整个项目都允许下拉刷新了,因为系统默认是不具备下拉刷新功能的  2. 监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一个bindscrolltoupper属性吗?忘记请自行回顾上一篇微信小程序实战篇-电商(二)当滚动到顶部/左边,会触发 scrolltoupper 事件,所以我们可以…

本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示:   商品属性联动.gif 代码示例 1.commodity.xml <!-- <view class="title">属性值联动选择</view> --> <!--options--> <view class="commodity_attr_list"> <!--每组属性--> <…

原文:微信小程序实战之百思不得姐精简版 微信小程序基本组件和API已撸完,总归要回到正题的,花了大半天时间做了个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块.这篇就带着大家简述下这个小的APP,源码会放到GitHub上欢迎star. 地址: https://github.com/shuncaigao/BS 项目中我能学到什么? tabbar使用方式 网络调用真实接口 loading使用 scroll-view实现下拉刷新上拉加载 image组件对图片的处理, 音乐和视频组件的使用 跳…

微信小程序开发实战教程 一.微信小程序 它是一种混合开发的方式. 是安装在微信中的程序(一个程序最多2M空间). 1.1 注册 1  2 点击立即注册:进入下方页面 3  4 点击小程序进入表单填写页面 5  6 填写完毕之后提交,会让你去邮箱中激活.激活之后就可以进入小程序开发了. 1.2 安装开发工具 经过1.1注册之后,我们有了开发账号,但是没有办法凭空开发内容,我们需要下载开发工具.使用微信提供的开发工具进行开发. 下载地址: 1 https://developers.weixin.qq…

本文是"WordPress 开发微信小程序"系列的第三篇,本文记录的是开发"DeveWork+"小程序1.2 版本的过程.建议先看完第一篇.第二篇再来阅读本文. 如果你没有看过本小程序,可以通过下面的小程序码进入体验.注意看文章的此时你扫码进入的版本可能不是1.2 版本了. "DeveWork+"小程序v1.2 的更新内容主要集中在提升用户体验的优化点以及修复遗留bug.如同上一篇,本文除最后一章节,每个章节即为一个改动点,并参考微信小程序的开发…

代码地址如下:http://www.demodashi.com/demo/12400.html 一.准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 基本需求 显示图书基本信息:名称.作者.描述.价格.数量. 点击复选框进行toggle操作.当前选中,则变成未选中:当前未选中,则变成选中. 图书数量的加减操作. 根据选中商品进行价格汇总. 全选/全不选. 目录结构 二…

原文:微信小程序把玩(五)页面生命周期 这里只要熟悉页面的基本生命周期即可,业务在指定生命周期函数内书写. 以下是官网给出的生命周期函数方法和状态图 上面的生周期函数图对于做Android 或者IOS的来书理解起来应该不是难事,具体怎么掌握只有慢慢尝试和摸索 代码处理: 这里的代码主需要对使用创建项目时index目录下文件处理下就行,至于跳转后的页面用的还是logs不需要更改!下面贴下代码注释也比较详细 index.wxml <!--index.wxml--> <view class=&…

原文:微信小程序实战之天气预报 这个案例是仿UC中天气界面做的中间也有点出入,预留了显示当前城市名字和刷新图标的位置,自己可以写下,也可以添加搜索城市.值得注意的是100%这个设置好像已经不好使了,可以通过获取设备的高度通过数据绑定设置高度.地址:https://github.com/shuncaigao/Weather 界面主要分为四部分: 第一部分 这里是预留的一块可以自行添加补充下 <view class="newTopView"> <!--左边添加当前城市名字…

想要的效果 1.第一页只显示第一道题的内容,如图红框2.答题后,点击下一题,内容显示第二道题的内容 代码 answer.wxml <!--pages/answer/answer.wxml--> <view class="app-answer"> <view class="answer-header"> <view class="header-title">全民答题</view> <…

之前做了个恋爱话术微信小程序,实现高情商的恋爱聊天. 但最近突然发现,每天早上给女朋友发一段优美情话可以让她开心一整天,但无奈自己的语言水平确实有限,不能随手拈来,着实让人有点不爽. 不过办法总比困难多,作为高情商的程序猿,来源于日常生活的需求往往是咱们最大的动力,必须盘他,所以想着在之前的恋爱话术小程序上在加一个每日情话推荐的功能.…

场景:小程序页面有一个web-view组件,组件嵌套的H5页面,要唤起微信支付. 先讲一下我的项目,首先我是自己开发的一个H5触屏版的商城系统,里面含有购物车,订单支付等功能.然后刚开始,我们公众号里面点击官网导航,其实就是访问的 https://m.xxxx.com 然后支付的时候,我判定了如果是微信浏览器则只展示微信公众号支付,如果是外部浏览器则展示支付宝.微信H5支付 2个选项. 小提示:(微信支付分了 微信公众号支付和微信H5支付,微信H5支付是后期才出的,早期没有.微信公众号支付是在微…

前言: 微信小程序最近刚从鹅厂生产出来,我有幸参与了一次小程序的实战,有必要记录我的开发过程.看上去小程序很简单,但是在深入开发的时候才能具体体会里面的变化,接下来记录我的第一个微信小程序的点点滴滴! 想做微信小程序就要先了解微信官方给出的API:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=20161122 编译工具: 我用的是微信官方提供的工具:这个工具是用react.js开发出来的,对于会react.js的开发来说很容易看懂它的代码结构,并且能了…

为了积攒粉丝,公司决定做一个一分钱姓名测算的小程序引导大家关注公众号. 实现的需求就是  1 首页 用户编辑姓名和性别进行提交 2 测算结果页 实现分享和支付功能 3 测算历史页面 看到用户曾经测算记录 4 分享的过程和实现 首先,微信小程序单位可以采用rpx,布局可以采用flex布局 row :从左到右的水平方向为主轴 <view > <view class="flex-row" style="display: flex;flex-direction: r…

刚刚写了小程序入门没几天,小程序就开放个人开发者资格,感觉为我而来啊 \(≧▽≦)/.迫不及待的去注册,准备将之前的处女作传上去体验一把,结果卡在了服务器配置上:免费的果然不靠谱/(ㄒoㄒ)/~~,后来尝试用个人服务器转发代理请求,发现不支持http,必须https!必须https!必须https! 好不容易做的项目不能上线,感觉心被掏空了,这种憋屈大家懂得~,于是不甘寂寞的我,准备做个不需要请求的单机版,就是这么机智(*^__^*) 嘻嘻--文末高能,慎入~ 接下来我们开始动手吧,之前做过类似…

github地址(欢迎star):https://github.com/xiaobinwu/dj 版本:0.15.152900(暂未升级原因:升级后需要图片无法本地引用,必须使用image或是远程路径引用) 目录结构 css => 放置公用wxss,目前只有一个font.wcss image => 静态资源目录 lib => 第三方库(如:qqmap-wx-jssdk.min.js) pages => 小程序页面(包括四个文件,.wxml/.wxss/.js/.json) temp…

网上找的帖子大多是直接在onload中请求数据.而我想实现的是点击按钮,然后请求服务器,接着返回数据,前端页面渲染.所以搞了挺久的,在此记录一下. 请求是按照微信官方给出的,wx.request 在这里,我的逻辑是:点击按钮--->根据绑定的事情注册函数-->发起微信请求-->判断是否返回数据,成功返回数据则显示请求成功.-->返回数据到前端页面进行渲染 废话不多说,直接上代码: 一.前端页面代码: <view class="container2">…

接触微信小程序也有一段时间了,以天气预报练一下手. 主要实现了以下功能: (1) 首页图标式菜单,便于以后扩展功能 (2)首页顶部滚动消息 (3)页面右上角三点菜单转发功能,便于小程序的传播 (4)天气预报详情页(实时数据由和风天气API提供,具体信息有很多请参阅官方说明文档) (5)城市切换功能 (6)赞赏功能 (7)客服功能 包含以下三个页面: (1)功能导向页 (2)天气详情页 (3)关于页 扫码查看效果…

前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从近期的使用上来说,小程序可以作为底层,但是缺少一个框架层,这个框架层需要提供: ① 组件库 ② 更好的代码组织方式,也就是让我们可以做到轻松的组件化开发 我们从最开始到现在,都在沿着这个方向去分解小程序学习,其实小程序本身的东西差不多了,但是我们代码过程中有时候却越高越复杂,多了很多封装,其实这所有…

如何离开含有tabbar的页面 在微信小程序开发过程中,我们会碰到从某页跳转到一个含有tabbar的页面的需求, 用 wx.navigateTo({url: '...',})  不起作用,需要使用 wx.switchTab({url: '...',}) 来实现. 那么,我们反过来,如何从含有tabbar的页面跳转到一个不含有/隐藏了tabbar的页面呢? 在尝试了上述的两个API后发现不起作用,wx.switchTab({url: '...',}) 倒是可以在有tabbar的页面之间跳转,但无法…

github地址(欢迎star):https://github.com/xiaobinwu/dj 版本:0.15.152900(暂未升级原因:升级后需要图片无法本地引用,必须使用image或是远程路径引用) 目录结构 css => 放置公用wxss,目前只有一个font.wcss image => 静态资源目录 lib => 第三方库(如:qqmap-wx-jssdk.min.js) pages => 小程序页面(包括四个文件,.wxml/.wxss/.js/.json) temp…

接触微信小程序也有一段时间了,以天气预报练一下手. 主要实现了以下功能: (1) 首页图标式菜单,便于以后扩展功能 (2)首页顶部滚动消息 (3)页面右上角三点菜单转发功能,便于小程序的传播 (4)天气预报详情页(实时数据由和风天气API提供,具体信息有很多请参阅官方说明文档) (5)城市切换功能 (6)赞赏功能 (7)客服功能 包含以下三个页面: (1)功能导向页 (2)天气详情页 (3)关于页 扫码查看效果…

这段时间开发了一个微信小程序,虽然小程序的导航API 官方文档写得很详细,但是在具体开发过程中还是会遇到很多不明白,或者一时转不过弯的地方. 1.页面切换传参,参数读取 1.1  wx.navigateTo(object) 功能:保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面.使用 wx.navigateBack 可以返回到当前页面. wx.navigateTo({ //当前页面对应的JS文件内 控制模板 url: 'test?id=1' //需要切换到的页面路劲,此处为…

多项技能,好像也不错.学习一下微信小程序. 教程:https://mp.weixin.qq.com/debug/wxadoc/dev/ 简介:一套用来开发在手机微信上运行的app框架,不用安装 组成:结构文件wxml.样式文件wxss.js文件 备注:wxml 和html是一样的,除了部分便签不一致:wxss和css是一样的:js同理 说明:支持双向数据绑定.ES6语法,遵循commonjs规范管理模块 首先在教程(https://mp.weixin.qq.com/debug/wxadoc/de…

电商底部导航栏的制作 我想大家对电商一定不陌生,一般电商的底部导航栏有以下几个首页.分类.购物车.个人中心. app.json是用来配置page路径以及导航栏属性的,那我们要做首页.分类.购物车.个人中心界面就要在page也添加这几个界面,所以在app.json的page里添加如下代码,写入page路径,系统会自动帮你创建界面的 "pages":[ "pages/home/home", "pages/classify/classify", &qu…

前言 微信小程序图表插件(wx-charts)是基于canvas绘制,体积小巧,支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个.   订单报表.gif 如上图所示,我们基于wxcharts.js 来实现订单统计报表. 导入wxcharts.js   3.pic.jpg 将wxcharts.js 存放在utils目录 column.wxml <view class="container"> <!--…

由于项目需要,最近便在做 一个类似于美团的餐饮平台的的微信微信小程序 ,项目有十几个页面,那么页面间的传值被经常用到.在小程序中页面间的传值主要有使用全局变量和本地存储这两种方法,在这个项目中我采用的是全局变量的方法 项目中使用的地方 下图为用户下单页面,下单时要选择配送地址,点击配送地址后跳入选择地址页面. 下图为用户选择地址页面,用户点击选择地址选项进行选择后再点击返回按钮回到用户下单页面 此为用户选择地址后返回的下单页面.此时下单页面的“选择地址”变为了用户自己的地址,便已经是完成了页面间…