微信小程序
关注
分享
扫一扫
宇直豪
这个人很胆小，什么都不敢写
展开
-
微信小程序学习之路——基础组件(icon、text、progress)
icon<icon/>是页面中非常常用的组件，它通常用于表示状态，起到引导作用。1.示例官方给出的icon图表有以上，可参考https://developers.weixin.qq.com/miniprogram/dev/component/icon.html?search-key=icon在这里，我自己也试用一下以上组件，示例代码如下：<view ...原创 2019-03-29 20:39:20 · 764 阅读 · 0 评论 -
微信小程序学习之路——API界面（二）
绘图之前提到过<canvas/>组件，再<canvas/>组件中画图必须通过本小结介绍的API实现，<canvas/>中存在一个二维坐标体系，左上角的坐标为（0，0）所有绘图API都会基于这个坐标体系进行绘制。绘图过程大致可以分为3步：创建执行上下文 通过执行上下文进行绘制描述 调用绘图API，将绘制描述绘制到<canvas/>示例代码...原创 2019-04-08 18:41:40 · 1218 阅读 · 0 评论 -
微信小程序学习之路——组件定义及属性（view组件）
小程序定义了各种各样的组件，它们在WXML中起着各不同的作用。与HTML元素一样，一个组件是指从组件开始标签到结束标签的所有代码，由于组件可能会被转译为不同端对应的代码，所以在页面创建过程中，不能使用小程序组件标签以外的标签。组件定义及属性1）组件是视图层的基本组成单元2）组件自带一些功能与微信风格的样式3）一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之...原创 2019-03-29 16:03:00 · 22696 阅读 · 0 评论 -
微信小程序学习之路——媒体组件（二）
Camera调用系统相机，该组件是原生组件，使用时请注意相关限制。扫码二维码功能需要将微信客户端升级到6.7.3并且需要用户授权，其属性如下：属性名 类型 默认值 说明 最低版本 mode String normal 有效值为 normal, scanCode 2.1.0 device-position String ba...原创 2019-04-02 19:48:56 · 728 阅读 · 0 评论 -
微信小程序学习之路——地图组件（Map）
地图组件移动应用中地图是必不可缺的内容，通过地图我们可以很直观地表现出地理信息，为此小程序提供了<map/>组件和定位相关的API，在给出其属性值之前，我们先用代码来测试以及看一看它的效果：示例代码如下:<map id="map" longitude="{{longitude}}" latitude="{{latitude}}"circles="{{circles}...原创 2019-04-02 20:45:22 · 4418 阅读 · 0 评论 -
微信小程序学习之路——画布组件及客服会话
画布组件<canvas/>主要用于绘制图像，在页面上放置一个<canvas/>就相当于在页面放置了一块画布，可以在其中进行图形绘制。<canvas/>组件是一块无色透明区域，本身没有绘制能力，它仅仅是容器，需要调用相关API来完成实际绘图任务，<canvas/>组件默认宽度300px，高度225px，统一页面中的canvas-id不能重复，如果使...原创 2019-04-03 11:07:36 · 682 阅读 · 0 评论 -
微信小程序学习之路——API网络
我们之前已经介绍了小程序组件的使用方法，运用这些组件我们就可以构建我们所需要的UI界面，但是小程序的一些功能需要依赖框架提供的API来完成。API包括了网络、媒体、文件、数据缓存、位置、设备、界面、开放接口8大类，这些API由微信本身提供，通过逻辑层JS代码进行调用。在介绍小程序API在定义和使用上一些通用规则。一般来说，微信API按命名规则可以分为两种：以w.on开头的API，如：wx.on...原创 2019-04-03 17:06:33 · 1077 阅读 · 0 评论 -
微信小程序学习之路——API登陆
登陆在小程序中，登陆分为2步，第一步需要获取登陆凭证，第二步用用户凭证获取用户登陆态信息，登陆态信息可用于后续支付等流程。1.wx.login(Object)调用接口获取登陆凭证(code)进而换取用户登陆信息，包括用户唯一表示(openid)及本次登陆的会话密钥(session_key)，用户数据的加解密通信需要依赖会话密钥完成，Object参数属性如下：属性 类型 ...原创 2019-04-09 16:16:39 · 873 阅读 · 0 评论 -
微信小程序学习之路——API用户信息
用户信息wx.getUserInfo(Object)获取用户信息，需要首先调用wx.login接口，Object参数属性如下：属性 类型 默认值 必填 说明 withCredentials boolean 否 是否带上登录态信息。当 withCredentials 为 true 时，要求此前有调用过 wx.login 且登录态尚未...原创 2019-04-09 17:08:38 · 624 阅读 · 0 评论 -
微信小程序学习之路——API微信支付
微信支付wx.requestPayment(Object)发起微信支付，参数属性如下：属性 类型 默认值 必填 说明 timeStamp string 是 时间戳，从 1970 年 1 月 1 日 00:00:00 至今的秒数，即当前的时间 nonceStr string 是 随机字符串，长度为32...原创 2019-04-09 17:13:21 · 578 阅读 · 0 评论 -
微信小程序学习之路——API媒体
媒体图片wx.chooseImage(Object)从本地相册选择图片或者使用相机拍照，拍照时产生的临时路径小程序本次启动期间都可以正常使用，如果需要持久保存，就要主动调用wx.saveFile，这样才能保证小程序下次启动时访问到，Object参数属性如下:属性 类型 默认值 必填 说明 count number 9 否 最多可以...原创 2019-04-03 22:03:08 · 1110 阅读 · 0 评论 -
微信小程序学习之路——API模板消息
模板消息1.调用模板消息接口发送模板消息需要通过POST方式调用微信后台接口，接口调用可以是前台调用，也可以是后台调用，接口地址为：POST https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=ACCESS_TOKENpost参数如下:属性 类型 默认值 必填...原创 2019-04-09 18:48:39 · 1336 阅读 · 0 评论 -
微信小程序学习之路——API客服消息
客服消息在页面中使用<button open-type="contact" />可以显示进入客服会话按钮。当用户在客服会话发送消息、或由某些特定的用户操作引发事件推送时，微信服务器会将消息或事件的数据包发送到开发者填写的 URL（详情请参考消息推送）。开发者收到请求后可以使用发送客服消息接口进行异步回复。1.接入指引1）填写开发者服务器配置登陆微信公众平台，...原创 2019-04-09 22:36:08 · 4279 阅读 · 0 评论 -
微信小程序学习之路——API分享
分享小程序分享页面需要在Page中定义onShareAppMessage函数，设置该页面分享信息，只有定义了该事件函数，右上角才会显示“分享”按钮。用户点击分享按钮时会触发该函数，该函数返回的Object对象将用于定义分享内容，目前分享图片不能自定义，系统会取当前页面，从顶部开始，高度为80%屏幕宽度的图像作为分享图片。返回Object属性如下:title:分享标题，默认值为当前小程序名称...原创 2019-04-09 23:09:05 · 1046 阅读 · 0 评论 -
微信小程序学习之路——API获取二维码
获取二维码通过后台接口可以获取小程序任意页面的二维码，扫描该二维码可以直接进入小程序对应的页面。可以使用开发工具 1.02.1803130 及以后版本通过二维码编译功能调试所获得的二维码为满足不同需求和场景，这里提供了三个接口，开发者可挑选适合自己的接口。 A接口，生成小程序码，可接受path参数较长，生成个数受限。 B接口，生成小程序码，可接受页面参数较短，生成个数不受限。 C接...原创 2019-04-09 23:14:40 · 2283 阅读 · 0 评论 -
微信小程序学习之路——Flex布局
2009年W3C提出了一种新的方案Flex布局，该布局可以简单快速地完成各种伸缩性的设计。Flex是Flexible Box的缩写，即为弹性盒子布局，可以为传统盒子模式带来更大的灵活性，目前主流浏览器都支持这种布局，小程序WXSS也对其进行了实现，项目中可以随意使用基本概念Flex布局主要由容器和项目构成，采用Flex布局的元素，称为Flex容器(flex container)，它的所有直...原创 2019-03-28 19:19:42 · 588 阅读 · 0 评论 -
微信小程序学习之路——媒体组件（一）
image一个应用中图片是必不可少的，小程序的<iamge/>除了可以显示图片外，还提供了图片的裁剪、缩放模式属性，<image/>默认宽度为300px,默认高度为225p，其属性如下：属性名 类型 默认值 说明 最低版本 src String 图片资源地址，支持云文件ID（2.2.3起） mode ...原创 2019-04-01 23:04:46 · 1280 阅读 · 0 评论 -
微信小程序学习之路——导航组件
<navigator/>是小程序种的页面链接，其作用和HTML中超链接标签一样，主要控制页面的跳转，<navigator/>属性如下：由于内容较多，请参考微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html实例代码如下：<view class="b...原创 2019-04-01 19:14:27 · 1424 阅读 · 0 评论 -
微信小程序学习之路——表单组件（一）
radio组件1.radio-group在小程序中<radio/>不能单独使用，同一组<radio/>需要包含在一个<radio group/>中，这样才能形成一组单项选择按钮，<radio/>的选中态不能直接获取，需要通过<radio-group>的change事件进行获取。<radio-group>内部可以包含其他...原创 2019-03-30 23:14:37 · 1604 阅读 · 0 评论 -
微信小程序学习之路——表单组件（二）
input<input/>是单行输入框，用于收集用户信息，其属性如下：属性名 类型 默认值 说明 最低版本 value String 输入框的初始内容 type String "text" input 的类型 password Boolean false 是否是密码...原创 2019-03-31 10:00:31 · 1845 阅读 · 1 评论 -
微信小程序学习之路——API文件
文件从网络下载、拍照、录音、录视频时，文件都是存在临时文件中，需要永久保存这些文件就需要我们主动调用API进行保存，这时小程序会将文件保存到系统指定目录，关于这些文件操作都需要调用相关APIwx.saveFile(Object)保存文件到本地，本地文件存储大小限制为10MB，Object参数属性如下：属性 类型 默认值 必填 说明 tempFilePat...原创 2019-04-04 18:41:45 · 1001 阅读 · 0 评论 -
微信小程序学习之路——API数据缓存
数据缓存每个小程序都可以由自己的本地缓存，local Storage是永久存储的，本地缓存最大为10MB，数据操作API分为同步和异步两种数据保存wx.setStorage(Object)将数据存在本地缓存指定的key中，会覆盖掉原来该key对应的内容，这时一个异步接口，Object参数属性如下:属性 类型 默认值 必填 说明 key stri...原创 2019-04-04 19:13:17 · 635 阅读 · 0 评论 -
微信小程序学习之路——API位置
位置获取位置在国际上，坐标体系有多套标准，小程序支持WGS84标准和GCJ02标准，WGS84是地球坐标，国际上通用的坐标系。设备一般包含的GPS芯片或者北斗芯片所获取的经纬度是WGS84地理做白哦西。GCJ02坐标系为火星坐标系，是由中国国家测绘局指定的地理信息系统的坐标系统，它是由WGS84坐标系加密后的坐标系，它是在小程序中，查看位置需要使用GCJ02标准坐标。wx.getLoc...原创 2019-04-04 19:36:22 · 1124 阅读 · 0 评论 -
微信小程序学习之路——框架及配置（一）
框架主体文件框架主体文件由app.json、app.js、app.wxss构成，这3个文件必须放置在项目根目录，一个小程序只有一份，它们负责小程序整体的配置：app.json：小程序公共设置，配置小程序全局设置 app.js：小程序逻辑文件，主要用于注册小程序全局实例，编译时会和其他页面逻辑文件打包成一份JavaScript文件 app.wxss：小程序公共样式表，对所有页面的布局文件...原创 2019-03-27 15:40:46 · 517 阅读 · 0 评论 -
微信小程序学习之路——框架及配置（二）
框架页面文件小程序中一个框架页面包含4个文件，同一框架页面的这4个文件必须具有相同的路径与文件名，进入小程序时或页面跳转时，小程序会根据app.json配置的路径找到对应的资源进行渲染。js文件：页面逻辑文件，必要项 wxml文件：页面结构文件，必要项 wxss文件：页面样式文件 json文件：页面配置文件与框架主体文件相比框架页面文件多了一种页面结构文件，其余3个文件和框架主体文...原创 2019-03-27 18:03:53 · 456 阅读 · 0 评论 -
微信小程序学习之路——页面结构文件(WXML)
WXML(WeiXin Markup Language)是框架设计的一套标准语言，用于渲染界面，WXML的渲染原理和React Native思路一致，通过一套标记语言，在不同平台被解析为不用端的渲染文件，如图：使用微信开发者工具时，在WXML中编写一些HTML标签或自定义标签仍然会被正常解析，这会给开发者造成一种小程序能直接支持HTML标签的误解。这是因为微信开发者工具内核是浏览器内核，同时小...原创 2019-03-27 22:11:17 · 3794 阅读 · 0 评论 -
微信小程序学习之路——页面样式文件(WXSS)
WXSS(WeiXin Style Sheets)是基于CSS拓展的样式语言，用于描述WXML的组件样式，决定WXML组件该怎么显示，它具有CSS的大部分特性，在CSS基础上WXSS拓展了尺寸单位、样式导入特性，对CSS选择器属性上做了部分兼容。在开发过程中不能想当然地使用CSS属性，一定要使用IOS和Android真机进行调试，本小节主要讲述WXSS和CSS的不同点，后续布局会讲解CSS盒子模型...原创 2019-03-28 09:18:08 · 2347 阅读 · 0 评论 -
微信小程序学习之路——API设备
设备系统wx.getSystemInfo(Object)异步获取系统信息，Object参数属性为：属性 类型 默认值 必填 说明 success function 否 接口调用成功的回调函数 fail function 否 接口调用失败的回调函数 complete function ...原创 2019-04-06 16:47:27 · 702 阅读 · 0 评论 -
微信小程序学习之路——API界面（一）
界面交互反馈wx.showToast(Object)显示消息提示框，Object参数的属性如下:属性 类型 默认值 必填 说明 最低版本 title string 是 提示的内容 icon string 'success' 否 图标 image string ...原创 2019-04-07 12:06:54 · 769 阅读 · 0 评论 -
微信小程序学习之路——模块化
模块化简介最早前端JavaScript代码量不大，统一放在一个文件夹内，如下面一段代码：var name ='weixin', age=12;function getName(){ //实现代码}function getAge(){ //实现代码}后来前端代码越来越多，为了便于管理和工作拆分，我们不得不把代码拆分为多个文件，这时将上述代码封装到user....原创 2019-03-28 09:46:38 · 680 阅读 · 0 评论 -
微信小程序学习之路——布局基础知识
之前写的似乎太详细了...从本篇开始删繁就简，拒绝一味抄书打字，独立思考提炼...本篇主要讲述CSS布局相关的一些基本知识，包括典型的盒子模型、浮动定位、绝对定位以及近几天提出的Flex布局，这些基本知识在WXSS也是通用的。再次提醒大家，在代码编写过程中移动要开启开发者工具中的这个“开启上传代码时样式文件自动补全”，否则Flex布局时会存在不同终端不兼容问题。盒子模型简单来说，H...原创 2019-03-28 11:42:10 · 849 阅读 · 0 评论 -
微信小程序学习之路——浮动与定位
了解基本盒子模型后，我继续学习定位相关的内容，定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现在哪，或者相对于父元素、零一元素甚至浏览器窗口本身的位置，浮动和定位是我们常用的布局方案浮动浮动不完全是定位，同时它也不是正常流布局，通过设置float属性，浮动的框可以向左或者向右移动，直到其外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不再文档的普通流中，文档的普通流中的...原创 2019-03-28 15:51:40 · 2061 阅读 · 1 评论 -
微信小程序实战——消息通知界面
先给大家上一个实战的效果图这个是我们小组在开发的一个消息界面，用于实现简单的交流通信功能，只实现了简单的前端框架，下面献上代码供大家参考学习，若有不足，请多多指教。wxml部分<!--头部消息中心--><view class='title' style='height:{{navH}}px' catchtouchmove='true'> &l...原创 2019-05-26 20:35:39 · 18582 阅读 · 18 评论