主界面wxml文件: page{ height:100%; } .content{ min-height:100%; display:flex; flex-direction:column; align-items:center; box-sizing:border-box; position:relative; } .main-bg{ height:100%; width:100%; position:absolute; top:0; left:0; z-index:-1; } .screen…
js文件: function isOperator(value) {   var operatorString = '+-*/()×÷';   return operatorString.indexOf(value) > -1; } function getPrioraty(value) {   if(value == '-' || value == '+') {     return 1;   } else if(value == '*' || value == '/' || value ==…
小程序的下拉刷新的值设置:需要设置app.json的window中 "navigationBarTextStyle":true  …
一般小程序页面都会大于等于1页,每个页面右上角都会有分享功能,建议把以下方法封装到app.js文件,在页面直接调用该方法,避免重复代码,提高性能.(代码用到ES6语法,若不支持,请自行还原js) //右上角分享功能 onShareAppMessage () { return { title: '自定义标题', path: '/pages/index/index',//用户点开后的默认页面,我默认为首页 imageUrl:"/images/share.png",//自定义图片的地址 su…
交互反馈就是在用户出发某事件之后,给用户一个反馈信息,这要是一个很友好的习惯. 在小程序中是通过一下几种方式实现的: 1.wx.showToast()方法 showToast: function (postscollected, postcollected) { wx.setStorageSync("posts_collected", postscollected); //跟新数据绑定变量,从而且还图片 this.setData({ collected: postcollected }…
界面 有关屏幕的api 交互: wx.showToast() 显示消息提示框 参数:object object的属性: title:类型 字符串 提示的内容(文本最多7个汉字) icon:类型 字符串 图标 属性值:success:显示成功的图标 loading:显示加载的图标 none:不显示图标 image:类型 字符串 自定义图标的本地路径,image的优先级高于 icon duration:类型 数字 提示延迟的时间 mask:类型 布尔 是否显示透明蒙层,防止触摸穿透 success:…
由于每个 API 参数:对象的属性都有 success,fail,complete,所以在这个提前介绍,就不再每个API 上写了 success:类型 函数 接口调用成功的回调函数 fail:类型 函数 接口调用失败的回调函数 complete:类型 函数 接口调用结束的回调函数(调用 成功,失败,都会执行) ---------------------------------- 下拉刷新: wx.stopPullDownRefresh() 停止当前页面的下拉刷新 直接调用即可 wx.startP…
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599 3:设计指南:https://mp.weixin.qq.com/debug/wxadoc/design/index.html 4:设计资源下载:https://mp.weixin.qq.com/debug/wxadoc/design/#资源…
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教…
随着正式开放公测,微信小程序再次万众瞩目,越来越多的企业和个人涌入到小程序开发的大军中.小程序究竟是什么?适合做小程序的产品有哪些?做小程序需要提前准备什么?如何零基础学做小程序?此文,将列出OSC上优质的资源供大学了解和学习. 一.新手入门 有关小程序的入门,首选自然是官方文档. 它解释了基本概念,有简单的设计指南和开发教程,能让你很好地对小程序有初步理解. 微信小程序产品定位及功能介绍 微信小程序设计指南 微信小程序简易教程 微信小程序运营规范 看完这些你会发现,小程序主打的是比APP更轻量…
本次项目主要了解及使用微信小程序,以及更好的理解微信动画,wxss,JavaScript,ajax,xml等技术: 借助的平台是java后端设计语言以及微信小程序界面,设计 该系统分为1,个人用户端:2,商家用户端:3,商家柜台: 客户要求: 在企业内部为企业商家用户提供线上支付功能,不同用户通过用户登录不同用户端的软件可进行实时支付功能:交易记录的查看,处理退款及财务结算等功能.该平台为用户提供高效便捷,良好的人机交互体验,提高了企业的信息化: 技术概况:本系统使用c/s(客户端/服务端)架构…
前段时间接触了微信小程序,现在回过头来做一些笔记. 先上效果图 后台数据管理界面(PHP) 校园信息通微信小程序前端界面 下面先简单的说一下怎样部署一个微信小程序 首先是前端 微信小程序有它专门的开发手册:https://mp.weixin.qq.com/debug/wxadoc/dev/ 和微信web开发者工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=18090422 下载后就可以根据开…
这是一个寒假假期作业,要求是用web开发或者微信小程序或者手机app开发的,我本来是打算用微信小程序开发的,但由于这个后台数据库连接需要通过https认证后的浏览器再访问MySQL.所以做到后台数据库连接我就不得不停止,因为太贵了实在买不起.这是我做的微信小程序的界面.因为我自己不按时设计程序的话会习惯先用固定数据设计页面(这样可以比较好看到页面效果)然后再连接数据库用数据库里的数据代替. 这个是只要一创建微信小程序就会帮你创建的一个页面之一,总共会创建两个页面还一个是记录页面,因为第二个页面没…
今天一天都没有撸码,没写BUG没改BUG,整一天都在弄那个微信小程序的配置了..唉.. 一个项目用的微信小程序,界面做出来了,就等着AJAX取网络数据后再显示到界面上了,查了下文档, 小程序取网络数据的那个网址必须是HTTPS的,经过备案的 自己电脑上之前已经做好一个简单的示例了,.NET CORE + MYSQL的,找了个WIN2008的服务器传上去测试,结果服务器上啥环境都没有.又得自己重新装一次,直接在服务器上网下载MYSQL,.NET CORE SDK,装好后上传发布后的网站,CMD中运…
1. 微信小程序环境搭建 请参考官网,哈哈! 2. 微信小程序基础学习 文件结构: 3. 微信小程序实战 4. 目前的逻辑,是从微信小程序的界面和服务器的Web API 进行交互, 有个注意事项就是Web API 发布的服务器比较可以使用HTTPS 协议.否则微信后台配置不成功 在小程序管理员界面注册域名: 每个月只能修改5次,所有还是慎重的好. --  有个部分是和Web API 进行交互,但是不好调试,所有我也只能使用网上提供的POST 和GET 调试工具,先测试好API 再发布. 调试工具…
起因:在开发一款旅游类微信小程序时,需要接入大量的景点信息,此时可以选择自己新建数据库导入数据并读取,但是对于我来说,因为只有一个人,数据库还涉及到需要维护方面,选择调用已有API. 过程:首先查阅微信官方文档关于API调用的过程,可以找到微信官方提供的wx.request方法,如下图(由于内容太多只放一部分截图). 找到方法后,我们只需要找到可以提供旅游景点数据的API,这里我选择了易源API.在申请了对应的API后,就可以在下面的界面找到对应的appid和密钥. 同时查询API官方提供的连接…
这是我个人探究微信小程序前端与后端之间的数据交换的过程,再结合个人所学的SSH框架, 编程工具用myEclipse2014工具.当然,前提是后台的项目要部署到tomcat服务器上才行, 然后总结了从后台获取数据和从前端读取数据存放到数据库的两个过程, 大家可以参考.学习一下,看代码: 首先,在微信小程序的界面中,先设两个按钮:如下图所示: 代码如下: <button bindtap='houduanButton1'>点击发起请求</button> <view wx:for=&…
写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微信小程序内测以来,我的网络信息几乎被它刷屏,一瞬间,都不知道发生了什么.特别是当晚有人熬夜吐血出教程,我勒个去,这么拼,感觉不立马学习等会儿就会被别人踩死在这个行业.惶恐惶恐的过来几天,等到了国庆终于也可以跟风熬夜研究了. 好吧,来吧,所以说菜鸟只会写计算器....嗯,是的,我想不出什么好创意.下面…
微信小程序计算器BUG版本 无APPID的测试号登录,先在app.json中更改路径,以及修改头部信息. 首先一个输入框字段用{{screenData}} 功能可以退格,清屏,正负号,正常操作加减乘除以及计算历史.这是计算器1.0,以后会优化添加更多功能. 每个按钮添加点击事件bintap,给每一个按钮添加id,id="{{id1}}"……,在js文件data里面添加这些id字段. 为每个按钮添加相应的功能,bindtap收到不同的参数会进行不同的操作. id=event.target…
一键获取微信小程序源代码 Tips: 一键获取微信小程序源码, 使用了C#加nodejs制作 直接解压在D盘根目录下后就可以使用 将小程序文件放到 wxapkg目录下3 这个目录下有一些demo 可以先进行实验 使用正确 wxapkg exe这些文件应该在 D:CrackMinApp\目录下4 然后打开 CrackMinApp.exe 按说明即可使用 前言 最近开始学习微信小程序的开发,可是苦于(自学),很多东西看了也不太会.发现小程序的坑远比想象的要多的多!!看到人家上线的小程序的效果,纯靠推…
前言 感谢! 承蒙关照~ 微信小程序我的界面 界面效果: 界面结构: 小程序代码: 我们先看me.json代码 { "navigationBarTitleText": "个人中心" } me.wxml代码 <view class="bg"> <view class="head"> <view class="headIcon"> <image src="{{…
如何解决微信小程序界面适配问题 .wxss page{ height: 100%; width:750rpx; } this.setData({ imageWidth: wx.getSystemInfoSync().windowWidth }) rpx(responsive pixe)可以根据屏幕宽度进行自适应 WXML 提供两种文件引用方式import和include. import import可以在该文件中使用目标文件定义的template,如: 在 item.wxml 中定义了一个叫it…
本文由云+社区发表 作者介绍:练小习,2011年加入搜狐,负责搜狐相册的产品策划与前端开发.2015年后加入腾讯 ISUX (社交用户体验设计部),目前主要负责腾讯云的UI开发工作,专注于人机交互,有丰富的UI开发经验. 这段时间有幸加入了一个关于微信小程序的项目开发组,从无到有的根据文档自行学习了小程序的开发过程,前面已经有几位前辈的文章珠玉在前,我这里就先从前端界面的开发方面谈一谈小程序以及我所遇到的问题吧. 在结构和样式方面,小程序提供了一些常用的标签与控件,比如: view,小程序主要的…
在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发计算器功能. 本文主要分为两个部分,小程序主体部分及计算器业务页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 1. 小程序逻辑 App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: funct…
微信小程序在两个之间传参类似js传递url拼接参数,举个例子来说吧 input自己设置参数 //index.wxml <form bindsubmit="formSubmit" bindreset="formReset" class="myform"> <text class="prompt">给自己起个名字吧</text> <input placeholder="给自己起个…
问题:数据层与UI不同步 微信小程序也采用UI绑定数据源的形式,根据以前做WPF的经验,直觉上认为修改了数据层(Page.data)后,UI会自动更新,然而实验发现数据层修改后UI层未修改,导致数据层与UI不同步的情况. 查看官方文档Q&A,第一项就是该问题的说明,不能直接操作Page.data!需要改用Page.setData来修改数据,才能同步到UI! 另外w3cschool的教程中,对UI与数据源的绑定,Page.setData的使用也有一个很好的例子. https://www.w3csc…
编写第一个微信小程序界面 不忘初心,方得始终:初心易得,始终难守. 传统的 web 结构 小程序文件目录结构 小程序页面层级结构 编写第一个小程序 1. 创建小程序目录结构 2. 编写代码 welcome.wxml <!-- wxml 是编写小程序骨架的文件 --> <!-- <div>一样的效果 --> <view class='container'> <image class='user-avatar' src='/images/1.jpg'>…
代码地址如下:http://www.demodashi.com/demo/14210.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1.基本需求. 简易计算器 满足日常所用的的加减乘除计算 带历史记录,查看过往计算 2.案例目录结构 二.程序实现具体步骤 1.index.wxml代码 <!--index.wxml--> <view cla…
微信小程序不可以使用js直接控制界面元素.而是通过改变 this.data中的属性,同步到界面 这个问题可以克服,带来的就是和H5不一样的编码方式.JS中更多的是改变数据的逻辑,而不是获取某个View来改变属性值 例: 图片的error,加载默认图片 网页中  <img src="http://www.url/...png" onerror="this.src='默认图片'" /> 微信小程序 <image src="{{imgurl}}…
原文链接:https://mp.weixin.qq.com/s/gYF7GjTRpeZNoKPAPI9aXA 1 概述 前几日QQ群里的朋友问我有没有计算器小程序案例,今天我们说下小程序计算器,然后就分享这样的小案例.希望对大家有所帮助 不多说了,二当家要上图来啦! 快去拿个小板凳,坐等更多更新 注意:如若需要请联系微信geekxz 2 wxml ,;      }      ;    });      );        ])*; i<optarr.length; i++){        ]…