========================== flex[盒子]   display: flex; flex-direction: column; [从上到下排列]↓ justify-content: center; [距上方  和距下边 ——  距离一致] align-items: center; [距左+距右——  距离一致]   opacity: 0.8; [不透明度]       flex-direction: row; vertical-align: middle; ======…

微信小程序,前端大梦想(六) 微信小程序之联合百度API实现定位 定位功能对于我们都不陌生,在移动端的应用中更是不可或缺的功能,小程序中也提供了对应的API帮助我们完成定位的实现,但是目前小程序的定位API只能返回经纬度,所以要获取更加完整的地理信息需要其它数据接口的帮助,这里我们使用百度地图API. 小程序位置API介绍 百度地图API返回地理信息 一. 获取位置 wx.getLocation(OBJECT): 获取当前的地理位置.速度.当用户离开小程序后,此接口无法调用,当用户点击"显示在聊…

微信小程序前端页面书写 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 一.数据绑定 1. 普通写法 <view> {{ message }} </view> Page({ data: { message: 'Hello MINA!' } }) 2. 组件属性 **简直和上面没区别啊** <view id="item-{{id}}"> </view> Pag…

微信小程序前端样式WXSS书写 一. WXSS的简单介绍 WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式. 与 CSS 相比,WXSS 扩展的特性有: 尺寸单位 样式导入 二. 尺寸单位 rpx(responsive pixel): 可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素…

关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 ​ 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些例子. 微信小程序画图实例 基本步骤 wxml中代码: <canvas canvas-id="myCanvas" class="myCanvas" ></canvas> js中onLoad()函数 const ctx = wx.createCan…

这是我个人探究微信小程序前端与后端之间的数据交换的过程,再结合个人所学的SSH框架, 编程工具用myEclipse2014工具.当然,前提是后台的项目要部署到tomcat服务器上才行, 然后总结了从后台获取数据和从前端读取数据存放到数据库的两个过程, 大家可以参考.学习一下,看代码: 首先,在微信小程序的界面中,先设两个按钮:如下图所示: 代码如下: <button bindtap='houduanButton1'>点击发起请求</button> <view wx:for=&…

看完微信小程序的前端代码真的让我热血沸腾啊,代码逻辑和设计一目了然,没有多余的东西,真的是大道至简. 废话不多说,直接分析前端代码.个人观点,难免有疏漏,仅供参考. 文件基本结构: 先看入口app.js,app(obj)注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等.其他文件可以通过全局方法getApp()获取app实例,进而直接调用它的属性或方法,例如(getApp().globalData) //app.js App({ onLaunch: function ()…

小程序框架MINA简介       微信公众平台"小程序"具有不是APP胜似APP的效果,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下即可打开应用.也体现了"用完即走"的理念,用户不用关心是否安装太多应用的问题.应用将无处不在,随时可用,但又无需安装卸载. 去年9月22日,微信公众平台向外发出200个"小程序"内测邀请函.该"小程序"即去年年初腾讯曾对外介绍的微信…

微信小程序的视图与渲染  今天我们从四个方面来了解小程序:   •组件的基本使用  •数据绑定  •渲染标签  •模板的使用     一.组件的基本使用:  微信小程序为我们的开发提供了丰富的UI组件,按类别可分为视图容器.基础内容.表单组件.导航.媒体组件.地图.画布.客服会话,后期课程中用到相关组件再详细介绍.  视图容器中最关键的就是view组件,学过html的同学可以把view组件简单理解成div区块标签来使用.  基础内容中常用的组件是text组件,可以简单理解为span标签.  表单…

之前由于不了解微信小程序的整个的运行开发机制,走了很多的弯路,脑子灵光的可能不会遇到,这个主题系列的帖子希望可以帮助到像我一样理解能力慢的孩子. 不论是开发微信小程序还是说学习任何一门编程语言,最重要的一点是要夯实基础,不是只是去看看概念,从hello word开始就要好好的去对待每一行代码,软工是工科,工科就要多动手,每一位走的长远的程序员都不会缺少匠心精神. 1.Q:一个appid只能创建一个小程序项目吗?我写毁了怎么办?我把小程序开发者工具自动创建的快速启动模板不小心删掉了怎么办?? A:…

原文地址 //index.js Page({ data: { }, //点击支付按钮进行支付 payclick: function () { var t = this; wx.login({ //获取code换取openID success: function (res) { //code = res.code //返回code console.log("获取code"); console.log(res.code); var opid = t.getOpenId(res.code);…

wxml代码 <wxs src="../../wxs/string.wxs" module="tools" /> <!-- 调用tools.img(item.content)返回bool,也可以返回其他值 --> <view class='clearfix' wx:if="{{tools.img(item.content)}}"> <view class='content-view'> <im…

funtion的封装 utils =>http.js var tips = { 1: "没有网络", 999: "无效的请求", 5000: "没有这些电影" } function http(params) { /*params 对象包含 url,success,method,data */ if(!params.method){ params.method ="GET"; } wx.request({ url:para…

config.js const config = { base_url_api : "https://douban.uieee.com/v2/movie/", } export {config} http.js import { config } from "../config"; class HTTP { requset({ url, method = "GET", data = {} }) { const promise = new Prom…

链接:https://www.cnblogs.com/showMagic/p/7677551.html…

前言 2016年9月22日凌晨,微信官方通过“微信公开课”公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众号据说只有200个. 虽然内测名额十分稀少,但依赖中国广大开发者的破解和分享精神,在网络上很快出现了开发工具的破解版本和API文档.然而可能是微信的妥协或者早已预料,9月24日微信官方发布了不需要破解就可以使用的微信小程序开发者工具和文档,对于费劲心思破解完的开发者来说应该瞬间整个人都不好了. 以下…

前言 2016年9月22日凌晨,微信官方通过"微信公开课"公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众号据说只有200个. 虽然内测名额十分稀少,但依赖中国广大开发者的破解和分享精神,在网络上很快出现了开发工具的破解版本和API文档.然而可能是微信的妥协或者早已预料,9月24日微信官方发布了不需要破解就可以使用的微信小程序开发者工具和文档,对于费劲心思破解完的开发者来说应该瞬间整个人都不好…

前段时间接触了微信小程序,现在回过头来做一些笔记. 先上效果图 后台数据管理界面(PHP) 校园信息通微信小程序前端界面 下面先简单的说一下怎样部署一个微信小程序 首先是前端 微信小程序有它专门的开发手册:https://mp.weixin.qq.com/debug/wxadoc/dev/ 和微信web开发者工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=18090422 下载后就可以根据开…

从九月底内测到现在已经三个半月.凌晨一点睡觉已经习以为常,也正是这样,才让无前端经验的我做微信小程序开发并不感到费劲.最近才开始接微信小程序的外包项目,目前已经签下了五份合同,成品出了两个.加上转给朋友做的,正在谈的,算起来有十来个项目.距离微信正式开放的时间越来越近,接外包的同学也越来越多.@天下雪 让分享下接外包的经验,作为微信小程序联盟 外包版的版主,自然是当仁不让. 经常遇到的几个情况: 1.客户:开发一个微信小程序多少钱? 这是客户最常问到的问题,就跟我问你吃一顿饭多少钱一样.很难回答…

微信小应用资源汇总整理 开源项目 WeApp - 微信小程序版的微信 wechat-weapp-redux-todos - 微信小程序集成Redux实现的Todo list wechat-weapp-gank - 微信小程序版Gank客户端 wechat-dribbble - 微信小程序-Dribbble wechatApp-demo - 微信小程序 DEMO weapp-ide-crack - 微信小应用资源破解 API - API 文档 weapp-quick - 微信小应用示例代码 wea…

做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先来看看其有哪些官方文档. 微信公众平台开发者文档统一入口为:https://mp.weixin.qq.com/wiki,这里面大部分内容都是以前就有的,微信开发都是基于此份文档. 现在的变化是在这份文档的顶部加了一个“微信公众平台.小程序”的入口,这个入口才就是专门针对微信小程序开发的文档,如下图:…

基于微信小程序的失物招领系统的Postmortem 设想和目标 1.我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 对于我们团队要解决的问题和实现的功能在项目开始就很明确,在项目过程中也一直没有改变.有清晰的典型用户和典型场景描述. 2.是否有充足的时间来做计划? 有时间 3.团队在计划阶段是如何解决同事们对于计划的不同意见的? 因为团队成员都是第一次上手,很多都是参照网络上的资料,或者按照队长的意思. 计划 1.你原计划的工作是否最后都做完了? 如果有没做完…

概述 由于项目中,微信前端和后端对接出现错误.所以Alpha测试分为微信小程序前端,管理员web测试. 测试工具选择 微信小程序的前端使用微信小程序开发工具测试. 管理员web使用web测试. 测试工具使用 打开微信小程序,填写AppID,项目地址和项目名字开始调试. 管理员web登陆账号密码均为:admin . 测试用例文档 编号 发布者 标题 类别 信息说明 图片名称 发布时间 03 孙敏铭 自行车 找回 黄色自行车.知道的请联系我.电话:136552 自行车.jpg 2017-12-04…

1.首先分享 微信统一下单接口: https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1   微信接口 签名 对比网址: https://pay.weixin.qq.com/wiki/tools/signverify/   微信小程序 微信支付 网址: https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-pay.html#wxrequestpaymentobject 2.微信小程序端…

本次项目主要了解及使用微信小程序,以及更好的理解微信动画,wxss,JavaScript,ajax,xml等技术: 借助的平台是java后端设计语言以及微信小程序界面,设计 该系统分为1,个人用户端:2,商家用户端:3,商家柜台: 客户要求: 在企业内部为企业商家用户提供线上支付功能,不同用户通过用户登录不同用户端的软件可进行实时支付功能:交易记录的查看,处理退款及财务结算等功能.该平台为用户提供高效便捷,良好的人机交互体验,提高了企业的信息化: 技术概况:本系统使用c/s(客户端/服务端)架构…

其实微信小程序前端和云端都是可以调用短信平台接口发送短信的,使用云端云函数的好处是无需配置域名,也没有个数限制. 本文使用的是榛子云短信平台(http://smsow.zhenzikj.com) ,SDK下载: http://smsow.zhenzikj.com/doc/sdk.html 1. 安装下载后的SDK在cloudfunctions文件夹下会包含3个云函数文件夹,如下: 由于目前IDE没有云函数导入功能,您需要手工创建同名的云函数,然后将云函数下的文件手工拷进去 注:下载的SDK是一个…

1.如何定义全局数据 在app.js的App({})中定义的数据或函数都是全局的,在页面中可以通过var app = getApp();  app.function/key的方式调用,不过我们没有必要再app.js中定义全局函数. 定义 全局函数 如下图: 2.如何实现代码的复用 实现函数的复用前我们先复习一个知识点:require 用来加载代码,而 exports 和 module.exports 则用来导出代码.module.exports 对象是由模块系统创建的.在我们自己写模块的时候,需…

WordPress版微信小程序(下称开源版)距离上次更新已经过去大半年了,在此期间,我开发新的专业版本-微慕小程序(下称微慕版),同时开源版的用户越来越多,截止到2018年11月26日,在github star 数达到795.很多人会有疑问,我开发了微慕版,是否放弃更新开源版,现在我给你答案:不会.我会继续完善和优化. WordPress版微信小程序3.2版发布,就是对这个答案的践行. 微慕版虽然在表面上只是在开源版上增加了一点功能,但实际上无论是插件程序代码,还是小程序的代码都完全重构了,真正…

前言 3 个月前,微信小程序推出了 web-view 组件引发了一波小高潮,笔者所在的大前端团队写过一篇浅析,详情可见:浅谈微信小程序前端生态. 我们曾大胆猜想,这一功能,可能直接导致小程序数量增长迎来一波高峰. 毕竟磨刀霍霍却一直资源不足的团队应该不少,现在可以把已有 H5 应用嵌入到小程序 web-view 容器中,以最低的开发成本坐蹭微信流量红利,何乐而不为呢? 我们也曾畅想也许“小程序页面+ web 页”混合开发(甚至 web 更重)会成为以后的新趋势. 2M 代码限制(如今已更新至 4…

之前学习了微信小程序前端,使用到LeanCloud线上数据库 [传送门].作为一个前端开发人员,了解后端及数据库是学习工作的需要. LeanCloud直接登录,未注册直接创建账户.它是一款免费的线上数据库(开发版免费).适用于一些想自己写微信小程序前端但不太会后端的开发者学习用.本篇文章涉及数据存储服务(增删查改). 首先,下载一个JavaScript-sdk :av-weapp-min.js[下载链接],它是在微信小程序中使用此数据库的关键文件.下载之后,保存至项目路径,这里以‘/libs/a…