小程序无法像html中,在页面中直接parseInt() index.wxml {{price | Int}} 小程序还有另一种处理方法 wxs 是一种类似于js脚本的东西 filters.wxs var filters = { toFix: function (value) { return parseFloat(value) } } module.exports = { toFix: filters.toFix } -index.wxml <wxs module="filters&qu…

项目中需要一个可拖动的小图标, 1.小程序组件movable-view 文档地址:https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html#movable-area movable-view可移动的范围是在整个movable-area区域,所以movable-area是必须的,一般图标可以全屏幕移动的,movable-areas就是pages下的最高父级,包裹所有节点的 附上代码,有需要了解的可以直接…

其实新建小程序的时候,会有一个util.js文件,这个文件里已经有时间格式化的方法了,可是它却不能再wxml页面调用, 不过wxml页面是支持引入.wxs文件的,我们重新写一个这样子的工具文件就解决了 1.新建一个date.wxs var formatTime = function (date) { var date = getDate(date) var year = date.getFullYear() var month = date.getMonth() + 1 var day = da…

早上过来遇到一个这样的bug: 在计算百分比的时候没有保留小数点后2位,从而导致一些无法整除的结果显示太长 一开始,我以为这是一个很普通的bug,既然wxml在页面{{}}内支持简单的运算,我想也应该会支持toFixed()方法 于是动手改代码,试试看 <text class="vote-item-data-percent">{{(item.vote_count/vote.data.voters_count).toFixed(2)*100}}%</text> 运…

1.页面注册 既然我们希望跳转到新的页面,那自然要新建页面相关的文件才行.在开篇已经讲过,一个小程序页面由四个文件组成,假如我们的页面名为welcome,那么这四个文件则是: welcome.js welcome.json welcome.wxml welcome.wxss   另外需要注意的是,json文件中至少包含空的结构体 { },而js文件中最好包含空的Page({ })方法,否则会编译出错(新版的IDE中对于空的js文件好像已经不再报错,不过还是建议加上)       新建页面到这里就…

小程序页面有2种跳转,可以在wxml页面或者js中: 1,在wxml页面中: <navigator url="../index/index">跳转到新页面</navigator> <navigator url="../index/index" open-type="redirect">在当前页打开</navigator> <navigator url="../index/index&…

微信小程序:WXML 模板 一.WXML 模板 网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来处理这个页面和用户的交互. 同样道理,在小程序中也有同样的角色,其中 WXML 充当的就是类似 HTML 的角色.打开 pages/index/index.wxml,你会看到以下的内容: <view class="container"> <view class="…

微信小程序实现登陆页面 实现上面两个页面 第一个页面 <view> <!-- 上侧部分 --> <view class="top-view"> <!-- 用户信息开始 --> <view class="user"> <!-- 头像开始 --> <view class="row"> <image class="avatar" wx:if=&…

在实现这样的一个功能时,   调用微信小程序api发现scroll中可以通过id来实现点击菜单栏,屏幕滚动到对应的id位置 但是id不能以数字,汉字类型的 字符串开头(暂发现两种),可能博主比较笨,想了好多办法通过转码.转换成字符串等等还是不行 . 最后解决办法如下:在便利的时候,我们可以通过 :data-id="goods + index"的方式来实现,相当于在开头添加 了默认字符串goods.所以开头不是数字而是字母也就可以实现了.   博主这里的开发环境是MpVue所以具体语法小…

微信小程序红包开发 小程序发红包 开发过程中遇到的坑 微信小程序红包接口的   最近公司在开发一个小程序红包系统,客户抢到红包需要提现.也就是通过小程序来给用户发红包. 小程序如何来发红包呢?于是我想到两个方法. 之前公众号开发一直用了的.一个是红包接口,一个是企业支付接口.一开始还是想着用红包接口吧,毕竟有一个点击拆的事件,让用户参与.然后各种坑就来了... 小程序里如何给用户发红包?拿到了小程序的openid有办法获取到这个用户的公众号openid吗? 在小程序里拿到了用户的openid,但…

Java Web项目 我们在Eclipse里开了Java Web项目之后,Run As Tomcat或者Apache服务器,本地运行,如果直接用http://localhost:8080访问项目,会发现浏览器会打开一个默认的页面. 这个页面是在什么地方配置的呢? 每个Java Web工程的目录下面,都有一个名为WEB-INF的目录,里面包含一个配置文件web.xml.Web项目的默认页面就定义在里面的welcome-file-list节点里. Android项目 我们知道一个Android项目里…

完整微信小程序授权登录页面教程 1.前言 微信官方对getUserInfo接口做了修改,授权窗口无法直接弹出,而取而代之是需要创建一个button,将其open-type属性绑定getUseInfo方法.在参考了网路上各种方案之后,实现了用户在授权之后跳转到小程序首页的授权登录页面. 2.实现效果 3.实现思路 在进入小程序时先对授权情况进行判断,若已经过授权则直接跳转到首页,若还未经过授权则进入授权页面,点击页面的授权按钮会弹出选择框,选择"拒绝"则不进行跳转,选择"允许&…

今天在做微信小程序时,设置wx.navigateTo页面跳转并传参数,点击始终没有效果,代码如下: //事件处理函数 newsDetail: function (event) { console.log(event), //带id跳转到指定的页面,这里的event.currentTarget.dataset.id是获取wxml页面上的data-id参数,详见事件说明 wx.navigateTo({ url: "../detail/detail?id="+event.currentTar…

<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript"></script>     //引入js   var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "micromessenger") { //ios的…

1.使用navigator的url带参传值 (1)在pageA页面有一个固定的值要传递到pageB页面,比如说一个固定的值user_id要传递给B <navigator url="../index/pageB?user_id='12345678'">index4</navigator> 注:?后面为你要传递的值 这样在pageB页面js的onload函数里面,使用setData方法可以获取到传递过来的值,并将它赋值给pageB页面初始数据在pageB页面的dat…

跟着视频开始小程序的项目的开发,视频中这个小程序已经上线了,可以很好的看着小程序的界面进行开发,昨天看了一下具体的需求,觉得真的细节好多啊,而且其中设计的组件的思想也是很好的,能够很好的实现代码的复用,实现代码的解耦合,这个视频讲解的是真的好,好好学习一下. 组件component开发 小程序中的大部分的页面其实都是由组件来组合起来的,所以开发适合需求的组件是非常重要的,来进行组件的开发. (1)在与pages同级目录下创建components文件目录,来存放所有需要进行开发的组件 (2)之后在…

通过小程序官方文档可知:Page() 函数用来注册一个页面.接受一个 object 参数,其指定页面的初始数据.生命周期函数.事件处理函数等.其中的参数data用来设置初始数据,WXML 中的动态数据均来自对应 Page 的 data. 所以如果页面需要显示动态数据必须要把数据更新到data中对应的变量中.页面js文件中这么写: Page({ data: { message: 'Hello MINA!' } }) wxml中这么写: <view> {{ message }} </view…

在此以插件开发中文章列表跳传文章详情为例. 1.首先在插件中的文章列表页面wxml中绑定跳转事件. bindtap='url' data-id="{{item.article_id}}" 2.在文章列表页面js中接收事件,并触发冒泡事件. /** * 跳转至详情 */ url: function (e) { var eventDetail = { data: a.pdata(e).id, } // 触发事件的选项 bubbles是否冒泡,composed是否可穿越组件边界,captur…

在当前版本中,我们可以快速的新建并且新建页面. 在app.json文件中输入 { "pages":[ "pages/index/index" ] } 输入"pages/index/index" 后,小程序的编辑工具会自动在根目录建立 pages文件夹 index文件夹 index命名的.js  .json  .wxss  .wxml 文件  app.json介绍 app.json是每个小程序必有切唯一的. 使用app.json文件来对微信小程序进…

主页面:index.wxml 主页面:index.js ↑跳转到另一个wxml页面→recharge.wxml recharge.wxml web-view中设置跳转h5的链接,可以加上需要的参数: tips: 1.首先,web-view组件的属性src,正如你说看到的,这个就是设置网页链接的,但是需要特别注意的是web-view的src必须配置https协议的链接: 2.其次,就是web-view组件只要配置了链接,它是铺满全屏且自动跳转的,所以这也就是为什么我这边需要先写一个navigato…

在此以插件开发中文章列表跳传文章详情为例. 1.首先在插件中的文章列表页面wxml中绑定跳转事件. bindtap='url' data-id="{{item.article_id}}" 2.在文章列表页面js中接收事件,并触发冒泡事件. /** * 跳转至详情 */ url: function (e) { var eventDetail = { data: a.pdata(e).id, } // 触发事件的选项 bubbles是否冒泡,composed是否可穿越组件边界,captur…

公司最近在开发微信小程序的红包功能,语音红包需要用到文字转拼音的功能. 之前介绍过怎么将中文的汉字转为拼音的,具体看下面这篇文章. 微信语音红包小程序开发如何提高精准度 红包小程序语音识别精准度 微信小程序红包开发语音红包 - 秋峰不是风 - 博客园http://www.cnblogs.com/xinweiyun/p/8213790.html 这个文章介绍的方法,在部分繁体字,或者一些生僻字方面就识别不了.所以后来就转使用其他的方法.百度搜了很多.后来找到一个其他的类库,最后这个类库还不错.一些…

微信小程序的排版就跟wxml和wxss有关,它们两者相当于HTML和CSS,其中wxml指定了界面的框架结构,而wxss指定了界面的框架及元素的显示样式. 一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 view 视图容器 icon  图标 scroll-view 可滚动视图容器 text 文字 swiper 可滑动的视图容器 progress 进度条…

微信小程序授权页面,进入小程序如果没授权跳转到授权页面,授权后跳转到首页,如果用户点拒绝下次进入小程序还是能跳转到授权页面,授权页面如下 app.js  中的 onLaunch或onShow中加如下代码,如果没授权跳转到授权页面 // 获取用户信息 wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框 wx.getUserI…

目录 1.页面展示 2.wxml代码 3.wxss代码 4.js代码 1.页面展示 2.wxml代码 <!--pages/register/register.wxml--> <scroll-view> <image src='/images/register.png' mode='widthFix' class="topImage"></image> <view class='input-top'> <input id=…

微信小程序  PK  APP: 1.微信有海量⽤⼾,⽽且粘性很⾼,在微信⾥开发产品更容易触达⽤⼾:而推⼴app的成本太⾼. 2.微信小程序也可以跨平台(Android和IOS). 一.project.config.json中只需要修改appid 二.app.json中通过使用扩展库userExtendedLib的方式,引入并使用weui, WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库. 1.先在全局配置文件app.json中引入 "useExtendedLib&quo…

在我们传统的Javascript开发函数编写中,我们习惯了回调函数的处理,不过随着回调函数的增多,以及异步处理的复杂性等原因,代码越来越难读,因此诞生了使用Promise来优化JS函数处理的需求,引入Promise确实能够很好的解决异步回调函数的可读性等问题,同时也使得我们调用的时候代码简洁一些,本文介绍如何在小程序的JS代码里面使用Promise来封装一些函数的做法. 1.小程序传统的回调处理 例如我们生成一个小程序,里面的app.js里面就自动带有一个getUserInfo的函数,这个是使用…

效果图: 实现原理:点击按钮,往需要动画的div中添加或移除拥有动画效果的class. 由于微信小程序中不能操作page这个根节点,所以,只有用一个div(view)来模仿page根节点. 1.结构 <view class='page {{isFix?"pageShow":"pageHide"}}' > <view class='header'> <view class='h-toggle iconfont icon-list' bin…

时间对象(Date())比较简单,本文旨在为初学者入门使用,大牛可略过! 本文承接基础知识实例,说一下实例的要求: 在页面中输出当前客户端时间(2015年1月1日星期一10:10:10这样的格式),每过一秒中页面不刷新,但是时间自动更新(用两种定时器方法都可以实现),鼠标点击时间,如果原先运动则停止,如果停止则继续运动: 要求基本上可分为2部分:一是不刷新自动更新时间,二是点击时间停止或更新时间 好,那我们还是老规矩,一步一步来,既然是时间,那就会用到时间对象 new Date(); var n…

在大型分布式系统架构中,必须选择适合的缓存技术以应对高并发,实现系统相应的高性能,酷客多小程序经过慎重选型,选择了采用基于腾讯云服务的Redis弹性缓存技术,结合Redis官方推荐的.NET驱动类库Service.Stack.Redis,实现Redis弹性缓存在系统中的应用. 现针对Redis在实际应用中需注意的要点,就如下几个方面进行总结: 一.    应用注意事项 在企业级应用过程,任何技术的引入都需要考虑可能产生的各种影响,对于缓存应用来说,首先需要考虑的是内存的占用状况.对于应用系统来说…