微信小程序--问题汇总及详解之图片上传和地图

地图用的是百度的地图,链接:http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/getlocation 获取日期时间可以用小程序里自带的js文件,var util = require('../../utils/util.js') 引入文件 var date = new Date(); //有需要改的参数可以自己定义也可以去源文件找到然后更改 //传后台用这个参数 var paramTime = util.formatTime2(date);…

微信小程序--问题汇总及详解之form表单

附上微信小程序开发文档链接:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html form表单: 当点击 <form/> 表单中 formType 为 submit 的 <button/> 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key. bindtap 用户点击时触发 bindchange 用户输入完成时触发(建议要输入中文的input采用这个点击事件) 判断两…

微信小程序--问题汇总及详解之清空电话号码

wxml: <view class="btns" wx:for="{{phoneList}}" wx:key="id"> <input bindinput="writeNumber" type="number" value="{{item.phone}}" class="btn1" maxlength="11" placehold…

微信小程序--问题汇总及详解之picker 增、删

<block wx:for="{{salesList}}" wx:for-index="index" wx:key="id" wx:for-item="item"> <view class="con_txt"> <view class="con_txt1" style="margin-left:30rpx;width:140rpx">…

微信小程序--问题汇总及详解之tab切换

设置背景颜色就直接在page里设置 page {background-color: rgb(242, 242, 242);} tab切换: navigator 页面链接传参的格式为url="路径?title={{item.title}}" 多个用&&连接下个页面接收参数: wxml: <view class="container"> <view class="swiper-tab"> <…

微信小程序 this和that详解及简单实例

微信小程序中,在wx.request({});方法调用成功或者失败之后,有时候会需要获取页面初始化数据data的情况,这个时候,如果使用,this.data来获取,会出现获取不到的情况,调试页面也会报undefiend.原因是,在javascript中,this代表着当前对象,会随着程序的执行过程中的上下文改变,在wx.request({});方法的回调函数中,对象已经发生改变,所以已经不是wx.request({});方法对象了,data属性也不存在了.官方的解决办法是,复制一份当前的对象,如…

微信小程序获取用户手机号详解

最近在做一款微信小程序,需要获取用户手机号,具体步骤如下: 流程图: 1.首先,客户端调用wx.login,回调数据了包含jscode,用于获取openid(用户唯一标识)和sessionkey(会话密钥). 2.拿到jscode后,将其发送给服务端,服务端拿它与微信服务端做交互获取openid和sessionkey.具体获取方法如下: (1)需要写一个HttpUrlConnection工具类: <span style="font-size:18px;">public cl…

【微信小程序】支付过程详解

一.介绍今天跟大家分享微信小程序集成支付. 二.分析 1.小程序支付API 地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-pay.html#wxrequestpaymentobject 注释: 通过接口的查看,我们知道,小程序端要想使用支付的接口,必须要拿到相应的值 timeStamp:Linux时间戳,可获取本地时间. nonceStr:随机字符串,从服务器统一下单接口返回. package:统一下单接口返回的prepay_id参数…

微信小程序支付之代码详解

微信小程序自带的一套规则,类似vue语法,但是好多功能都集成在api中,给了很多初学者轮子,所以首先要熟悉这些api,忘记可照官网继续开发这里主要说下微信小程序的支付,原理类似上篇介绍的公众网页支付,话不多说,直接贴代码,不懂的可以直接留言,我们一起来探讨. wxPay: function (payStr) { var json = JSON.parse(payStr) wx.requestPayment({ timeStamp: json.timestamp, nonceStr: json.…

微信小程序项目wx-store代码详解

这篇文章会很长,非常长,特别长,无敌长. 真的是挤牙膏般的项目进度,差不多是8月底有开始这个项目的想法,时至今日都1个多月了,抛去频繁的加班时间,王者时间,羽毛球时间...见缝插针的写这个项目,我竟然写完了,我竟然没有半途放弃,可真把我自己感动坏了. 好吧,主要是这个小程序很简单,本文会讲解一下这个小程序的代码,所有代码几乎是我一个个敲出来的,所有逻辑也是自己构思梳理的,因此很多实现方式并不是很好,冗余代码很多,代码质量堪忧,但我也在学习中,随着技术提升,会不断来重构代码,如果大家有任何建议欢迎…

前端笔记之微信小程序（三）GET请求案例&文件上传和相册API&配置https

一.信息流小程序-GET请求案例 1.1服务端接口开发一定要养成接口的意识,前端单打独斗出不来任何效果,必须有接口配合,写一个带有分页.关键词查询的接口: 分页接口:http://127.0.0.1:3000/info?page=1 查询接口:http://127.0.0.1:3000/search?word=李详情接口:http://127.0.0.1:3000/xiangqing?id=2 const express = require("express"); const ap…

【微信小程序云开发】1分钟学会实现上传、下载、预览、删除图片，并且以九宫格展示图片

大家好,我叫小秃僧这篇文章是讲解云开发如何上传.下载.预览.删除图片,并且以九宫格展示图片的功能 @ 目录 1. 实现效果 2.JavaScript代码 3.wxml代码 4.wxss代码 1. 实现效果废话少说,先看效果为敬: 说明: 中间停顿一下是我在选择照片上传.点击右上角的"x"可以删除图片,点击"下载第一张图片"按钮可以下载并打开第一张图片,因为下载download()函数我传入的是第一张图片的云存储的图片地址. 2.JavaScript代码首先,我…

微信小程序flex容器属性详解

flex容器属性详解 flex-direction决定元素的排列方向 flex-wrap决定元素如何换行 flex-flow 是 flex-direction 和flex-wrap的简写 justify-content元素在主轴的对齐方式 align-items元素在交叉轴的对齐方式 flex元素属性详解 flex-grow 当有多余空间时,元素的放大比例默认值是0 flex-shrink当空间不足时,元素的缩小比例默认值是1 flex-basis元素在主轴上占据的空间 px flex是gr…

微信小程序~生命周期方法详解

生命周期是指一个小程序从创建到销毁的一系列过程在小程序中 ,通过App()来注册一个小程序 ,通过Page()来注册一个页面先来看一张小程序项目结构从上图可以看出,根目录下面有包含了app.js,app.wxss,app.json三个文件这是小程序的全局文件,app.js是小程序逻辑 ,app.json是小程序公共设置,app.wxss是小程序公共样式表在app.js文件中 , 定义了一些生命周期方法 , onLaunch,onShow,onHide,onError,以及任意开发者添加…

微信小程序setData()方法的详解以及对数组/json操作

此篇文章是本人对setData方法的一些理解,是查阅文档和查找一些其他资料综述的,有所不足希望指正! 直接进入正题! 一.setData()方法: 1.参数接受一个对象,以key,value的形式表示: 2.参数和变量名称一致,可用一个值代替(es6新语法特性) 如上图所示,在this.data中设置ceshi这条数据,在方法中,我们定义ceshi变量让其等于that.data.ceshi; 然后对ceshi进行操作,其实就是对that.data.ceshi进行操作,而that.setData(…

微信小程序 - 自定义components组件详解A篇

官网API:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html 自定义组件的原因,可以重复使用,只有数据不同且模板一样,节约开发成本. wxml  <swiper-banner Height="400rpx" Width="100%" imgList="{{banners}}&q…

微信小程序位置定位position详解，相对定位relative，绝对定位absolute相关问题

一.位置position[定位属性:static,relative,absolute,fixed,inherit,-ms-page,initial,unset] 1.static:元素框正常生成,块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或者多个行框,置于其父元素中. 2.relative:[相对于自己本身在流中的位置的偏移]元素框偏移某个距离.元素扔保持其未定位前的形状,它原来所占的空间扔保留. 3.absolute:[相对于父元素 —— 前提是父元素的位置是确定的]元素…

***PHP $_FILES函数详解 + PHP文件上传 move_uploaded_file() 参数的正确写法

PHP $_FILES函数详解在PHP中上传一个文件建一个表单要比ASP中灵活得多.具体的看代码. 如: 复制代码代码如下: <form enctype="multipart/form-data" action="upload.php" method="post"> <input type="hidden" name="MAX_FILE_SIZE" value="1000&q…

小程序脚本语言WXS详解

WXS脚本语言是 Weixin Script脚本的简称,是JS.JSON.WXML.WXSS之后又一大小程序内部文件类型.截至到目前小程序已经提供了5种文件类型. 解构小程序的几种方式,其中一种方式就是通过文件类型:JS.JSON.WXML.WXSS.WXS.前面四种之前已经介绍过,今天主要是介绍WXS这种文件类型.如果你是PHP.JAVA.C#程序员的话写过服务端代码的话,就很好理解WXS这种脚本语言了.能够更加方便的动态实现页面上的一些基本逻辑判断,而不用全部的依赖后台实现,再通过接口返回.…

微信小程序教程汇总

目前市面上在内测期间出来的一些实战类教程还是很不错的,主要还是去快速学习小程序开发的整体流程,一个组件一个组件的讲的很可能微信小程序一升级,这个组件就变了,事实本就如此,谁让现在是内测呢.我们不怕,下面就推荐一些涵盖了大部分组件和API的实战项目类课程. 讲项目实战,主要是学习的小程序的开发思路,架构思路,组价稍带就过,不会的看文档喽,还有比官网文档更详细的教程咩. 我们小黄象社区为此录制三套实战类视频教程,实战项目快速学习小程序开发.另外社区专栏作家也贡献了优质的小程序教程专栏,下面已经列出.…

微信小程序知识点汇总

微信小程序常用标签与HTML的对应关系 <div></div> <view></view> <h1></h1>...<h6></h6> <p></p><span></span> <view></view> <i class="icon"> <icon></icon> <iput…

微信小程序「官方示例代码」浅析【上】

从某个微信群里,拿到了这个IDE的下载地址,然后就有了这个: 根本登不上去,怎么办,怎么办呢? 看代码啊... 反正我又没有保密协议,解压缩一看NodeWebkit + React: 好啦 ,逛逛呗,这真是一个庞大的项目: 等等,这里有一个目录是 weapp/quick,这难道就是传说中的源码,打开一看,果然是.. 好了,毫无疑问,某讯又故计重演. html -> wxml css -> wxss app.js里面是登录代码: app.json定义了一些样式,和页面: wxss里面,明显就是c…

微信小程序rich-text 文本首行缩进和图片居中

微信小程序开发使用rich-text组件渲染html格式的代码,常常因为不能自定义css导致文本不能缩进,以及图片不能居中等问题,这里可以考虑使用js的replace方法,替换字符串,然后在渲染的同时加载行内样式. let content = `<div id="article_content273475" class="article-content-wrap"> <p><strong>宅是一种信仰.</strong>…

微信小程序wx.getLocation()获取经纬度及JavaScript SDK调用腾讯地图API获取某一类地址

简介腾讯位置服务为微信小程序提供了基础的标点能力.线和圆的绘制接口等地图组件和位置展示.地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品. 在此基础上,腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包,可以在小程序中调用腾讯位置服务的POI检索.关键词输入提示.地址解析.逆地址解析.行政区划和距离计算等数据服务,让您的小程序更强大! 有时候我们在做微信小程序时有些功能需要获取当前的地理位置及附近地点的一些要求,但是…

微信小程序转发商品的详情页 + 转发功能（传参）

1.微信小程序转发传参,利用的还是onShareAppMessageapi 2.利用的还有json转换 JSON 是用于存储和传输数据的格式. JSON 通常用于服务端向网页传递数据函数描述JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象.JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串.官方文档自定义转发字段字段说明默认值最低版本title 转发标题当前小程序名称 path 转发路径当前页面…

前端笔记之微信小程序（四）WebSocket&Socket.io&摇一摇案例&地图|地理位置

一.WebSocket概述 http://www.ruanyifeng.com/blog/2017/05/websocket.html Workerman一款开源高性能异步PHP socket即时通讯框架https://workerman.net HTTP是无连接的:有请求才会有响应,如果没有请求,服务器想主动推送信息给浏览器是不可能的. 比如图文直播.聊天室原理:长轮询. setInterval(function(){ $.get() },1000) 间隔一定的时间,主动向服务器发起请求,询问…

web端,app端,小程序端测试差异详解

前置解释:1.单纯从功能测试的层面上来讲的话,APP 测试.web 测试和H5测试在流程和功能测试上是没有区别的2.Web项目或pc项目都是在电脑上进行测试的.常见的PC项目架构有BS架构和CS架构的,BS架构就是通过浏览器(browser)请求后台服务(server),后台返回到响应内容显示在浏览器上3.app测试平台分为安卓和IOS端:安卓测试需要在安卓手机上安装开发提供的apk测试包:IOS测试需要将手机UUID提供给开发安装ipa测试包进行测试. 不同点:1.系统架构不一样a.web端测…