微信小程序学习日志
记录小程序的学习心得。
So灬低调
这个作者很懒,什么都没留下…
展开
-
1-1 微信小程序开发工具下载以及安装
1、微信公众平台上登录你的微信小程序账号(没有账户的点击右下脚--注册小程序)需要扫码(绑定的微信必须要绑银行卡)2、下载工具(点击开发工具)进入后有基础的工具介绍以及开发文档、工具最后下载完成后双击安装即可...原创 2019-05-06 17:27:56 · 828 阅读 · 0 评论 -
1-2 微信小程序的项目创建
打开工具(一般打开就会让你先扫码登录)如图:项目目录为你项目创建后保存的位置项目名称为你创建的那个文件的名字关于appid获取方法(假如没有申请注册可以使用体验权限)打开微信公众平台登录你绑定的微信号并扫一扫进入界面(如图获取即可)关于启动模版(勾选上的话就会在项目中创建一个最基础的模版,如图右边就是创建的基础模版,如果不勾选那就只有一个project.config...原创 2019-05-07 15:51:04 · 147 阅读 · 0 评论 -
1-3 微信小程序框架结构
在html页面开发的时候一个html页面需要:.html .css .js(3个文件)一个微信小程序页面需要: .wxml .wxss .js(3个文件)他们的结构非常相似,文件也都一一对应,所以学习html的同学可以很快的上手微信小程序根据项目的主目录可以看到新建的项目有2个主目录(page、utils)和4个文件(app.js、app.json、app...原创 2019-05-08 11:50:46 · 952 阅读 · 0 评论 -
1-4 微信小程序app.json主配置文件
小程序根目录下的app.json文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。完整配置项说明请参考https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.htmlpages{ "pages": ["pages/index/i...原创 2019-05-09 10:52:15 · 742 阅读 · 0 评论 -
1-5 微信小程序页面配置
页面配置每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖app.json的window中相同的配置项。文件内容为一个 JSON 对象,有以下属性:配置项属性 类型 默认值 描述 最低版本 navigationBarBackgroundColor HexColor #000000 ...原创 2019-05-09 11:38:14 · 310 阅读 · 0 评论 -
1-6 微信小程序逻辑层js文件
微信小程序这个前端系统分为逻辑层和视图层,逻辑层实现数据的加工和处理,与html类似,微信小程序的逻辑层由javascript编写 逻辑层将数据进行处理后发送视图层,同时接受视图层的时间反馈,为了方便微信小程序的开发,官方在javascript的基础上进行了一些封装和修改,主要有: 1、提供app和page方法,用来进行程序和页面的注册 ...原创 2019-05-10 10:32:57 · 627 阅读 · 0 评论 -
1-7 小程序数据绑定
以下内容来自文档:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/data.html数据绑定WXML 中的动态数据均来自对应 Page 的 data。简单绑定数据绑定使用 Mustache 语法(双大括号)将变量包起来,可以作用于:内容<view>{{ message }...转载 2019-05-10 15:02:24 · 109 阅读 · 0 评论 -
1-8 小程序列表渲染
文章内容来自文档:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html列表渲染wx:for在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item<vi...转载 2019-05-10 15:04:53 · 132 阅读 · 0 评论 -
1-9 小程序条件渲染
以下内容来自文档:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/conditional.html条件渲染 条件渲染,是指根据绑定表达示的逻辑来判定是否渲染当前组件。wx:if在框架中,使用wx:if="{{condition}}"来判断是否需要渲染该代码块:<view wx...转载 2019-05-10 15:11:19 · 228 阅读 · 0 评论 -
1-10 小程序模板
以下内容来自文档:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html模板WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。定义模板使用 name 属性,作为模板的名字。然后在<template/>内定义代码片段,如:...转载 2019-05-10 15:13:02 · 169 阅读 · 0 评论 -
1-11 小程序引用
以下内容来自文档:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/import.html引用WXML 提供两种文件引用方式import和include。用import导入模版代码用include导入除模版定义之外的代码。相当于拷贝到include的位置。importimport可以在该...转载 2019-05-10 15:14:43 · 220 阅读 · 0 评论 -
1-12 微信小程序页面事件
事件什么是事件事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。 事件对象可以携带额外信息,如 id, dataset, touches。事件的使用方式在组件中绑定一个事件处理函数。如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。...转载 2019-05-11 15:12:46 · 1604 阅读 · 1 评论 -
1-13 页面样式文件wxss
WXSSWXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。关于css表可以参考http://www.w3school.com.cn/css/css_t...原创 2019-05-13 15:18:26 · 386 阅读 · 0 评论 -
2-1 认识组件
每一个组件都是由一对标签组成,有开始标签和结束标签,标签之间可以放内容也可以放组件 组件除了有标签名之外,还有各种属性1、id属性 string类型,与html类似,是组件唯一的标示,在javascript中用于获取dom对象,而微信小程序框架提供了动态数据绑定,就不再用id来获取dom对象,所以在微信小程序开发中很少用到2、class属性 string类型,与...原创 2019-05-14 15:50:44 · 139 阅读 · 0 评论 -
2-2 view组件
view组件是一个容器组件(可以在内放置其他组件、也可以放文字内容),于html的div类似,在开发中经常使用关于view常用的css:伸缩盒子模型: 伸缩盒子模型也叫弹性盒子模型,在flexbox,可以轻松创建“自适应”浏览器窗口的流动布局,他是css3中display新添加的类型。 常用属性: display:flex; //定义一个fl...原创 2019-05-14 15:31:36 · 717 阅读 · 0 评论 -
2-3 button组件
button基础库 1.0.0 开始支持,低版本需做兼容处理。按钮。属性 类型 默认值 必填 说明 最低版本 size string default 否 按钮的大小 1.0.0 type string default 否 按钮的样式类型 1.0.0 plain boolean...转载 2019-05-14 17:01:36 · 822 阅读 · 0 评论 -
2-4 input组件
https://developers.weixin.qq.com/miniprogram/dev/component/input.htmlinput基础库 1.0.0 开始支持,低版本需做兼容处理。输入框。该组件是原生组件,使用时请注意相关限制属性 类型 默认值 必填 说明 最低版本 value string 是 输...转载 2019-05-15 11:56:09 · 188 阅读 · 0 评论 -
2-5 案例(页面文本输入并提交)
如图:在很多app 中会碰到信息提交页面,结合之前所学,来写一下这种类型的页面1、在app.json中创建页面:"pages":[ "pages/anli1/anli1", "pages/index/index", "pages/logs/logs" ],2、在anli1.json中设置导航的样式(在这里提一下取色器,在mac下可以上appstor...原创 2019-05-16 11:46:31 · 212 阅读 · 0 评论 -
2-6 icon组件
icon基础库 1.0.0 开始支持,低版本需做兼容处理。图标。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。属性 类型 默认值 必填 说明 最低版本 type string 是 icon的类型,有效值:success, success_no_circle, info, warn, waitin...转载 2019-05-16 14:22:28 · 353 阅读 · 0 评论 -
2-7 微信小程序计算器
结合之前学过的今天来写一下计算器:拿到设计图以后先分析一下:1、上面一块显示区域,下面为按钮区域2、下面的按钮区域可以flex的row排列方式,一个一个创建这些按钮先写好界面:1、创建计算器页面(app.json页面):"pages":[ "pages/calculator/calculator", ]2、wxml编写页面(用比较笨的方法写的,便于看明...原创 2019-05-18 14:49:05 · 1081 阅读 · 0 评论 -
2-8 小程序中的var、let、const
之前写计算器的时候js中的很多代码,现在开始详细解析并学习参考ECMAScript5、以及ECMAScript6、JavaScript:ES5只有两种声明变量的方法:var命令和function命令。ES6除了添加let和const命令,后面章节还会提到,另外两种声明变量的方法:import命令和class命令。所以,ES6一共有6种声明变量的方法。1、varECMAScript中...原创 2019-05-20 11:02:13 · 404 阅读 · 0 评论 -
2-9 ECMAScript 原始类型
ECMAScript有5种原始类型(primitive type),即Undefined、Null、Boolean、Number和String。typeof运算符typeof运算符有一个参数,可以用于检测变量的类型。例如:var sTemp = "test string";alert (typeof sTemp); //输出 "string"alert (typeof 86...原创 2019-05-20 15:39:32 · 100 阅读 · 0 评论 -
2-10 ECMAScript 函数
函数是由这样的方式进行声明的:关键字 function、函数名、一组参数,以及置于括号中的待执行代码。函数的基本语法是这样的:function functionName(arg0, arg1, ... argN) { statements}例如:function sayHi(sName, sMessage) { alert("Hello " + sName + s...原创 2019-05-20 15:14:08 · 139 阅读 · 0 评论 -
2-11 ECMAScript 6 函数的扩展
函数参数的默认值基本用法在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。function log(x, y) { y = y || 'World'; console.log(x, y);}log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalog('Hello', '') /...转载 2019-05-20 16:05:35 · 84 阅读 · 0 评论 -
2-12 ECMAScript 6 Module
ES6的Class只是面向对象编程的语法糖,升级了ES5的构造函数的原型链继承的写法,并没有解决模块化问题。Module功能就是为了解决这个问题而提出的。历史上,JavaScript一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如Ruby的require、Python的import,甚至就连CSS都有@import,但...转载 2019-05-20 16:58:36 · 90 阅读 · 0 评论 -
2-13 微信小程序number数据类型(附带方法解析)
数据类型WXS 语言目前共有以下几种数据类型:number: 数值 string:字符串 boolean:布尔值 object:对象 function:函数 array: 数组 date:日期 regexp:正则number语法number 包括两种数值:整数,小数。var a = 10;var PI = 3.141592653589793;属性...原创 2019-05-21 11:44:43 · 10528 阅读 · 0 评论 -
2-14 微信小程序string数据类型(附带方法解析)
数据类型WXS 语言目前共有以下几种数据类型:number: 数值 string:字符串 boolean:布尔值 object:对象 function:函数 array: 数组 date:日期 regexp:正则string语法string 有两种写法:'hello world';"hello world";属性constructor(对创建...原创 2019-05-21 12:03:20 · 9095 阅读 · 0 评论 -
2-15 微信小程序array数据类型(附带方法解析)
array语法array 支持以下的定义方式:var a = []; //生成一个新的空数组a = [1,"2",{},function(){}]; //生成一个新的非空数组,数组元素可以是任何类型属性constructor(对创建该对象的函数的引用):返回字符串"Array"。 length(数组中参数个数量)除constructor外属性的具体含...转载 2019-05-21 15:00:34 · 3189 阅读 · 0 评论 -
2-16 微信小程序date数据类型(附带方法解析)
date语法生成 date 对象需要使用getDate函数, 返回一个当前时间的对象。getDate()getDate(milliseconds)getDate(datestring)getDate(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]])参数 milliseconds: 从...转载 2019-05-21 15:04:11 · 12342 阅读 · 0 评论 -
2-17 微信小程序regexp对象(附带方法解析)
regexp语法生成 regexp 对象需要使用getRegExp函数。getRegExp(pattern[, flags])参数: pattern: 正则表达式的内容。 flags:修饰符。该字段只能包含以下字符: g: global i: ignoreCase m: multiline。 示例代码:var a = getRegExp(...转载 2019-05-21 15:07:15 · 8410 阅读 · 0 评论 -
2-18 微信小程序全局属性/函数以及基础类库
JavaScript 全局属性属性 描述 Infinity 代表正的无穷大的数值。 NaN 指示某个值是不是数字值。 undefined 指示未定义的值。 JavaScript 全局函数函数 描述 decodeURI() 解码某个编码的 URI。 decodeURIComponent() 解码一个编码的 URI 组件。 ...转载 2019-05-21 15:11:38 · 602 阅读 · 0 评论 -
2-19 微信小程序中this指向
this在函数执行时,this 总是指向调用该函数的对象。要判断 this 的指向,其实就是判断 this 所在的函数属于谁。this 出现的场景分为四类,简单的说就是:有对象就指向调用对象 没调用对象就指向全局对象 用new构造就指向新对象 通过 apply 或 call 或 bind 来改变 this 的所指。1)函数有所属对象时:指向所属对象函数有所属对象时,通常通过...原创 2019-05-29 12:30:56 · 3187 阅读 · 0 评论 -
3-1 switch组件
switch基础库 1.0.0 开始支持,低版本需做兼容处理。开关选择器。属性 类型 默认值 必填 说明 最低版本 checked boolean false 否 是否选中 1.0.0 disabled boolean false 否 是否禁用 1.0.0 type stri...转载 2019-05-22 16:34:30 · 190 阅读 · 0 评论 -
3-2 radio组件
radio基础库 1.0.0 开始支持,低版本需做兼容处理。单选项目。属性 类型 默认值 必填 说明 最低版本 value string 否 <radio>标识。当该<radio>选中时,<radio-group>的 change 事件会携带<radio>的value...转载 2019-05-22 17:17:43 · 289 阅读 · 0 评论 -
3-3 checkbox组件
checkbox基础库 1.0.0 开始支持,低版本需做兼容处理。多选项目。属性 类型 默认值 必填 说明 最低版本 value string 否 <checkbox>标识,选中时触发<checkbox-group>的 change 事件,并携带<checkbox>的 value...转载 2019-05-23 11:03:17 · 195 阅读 · 0 评论 -
3-4 label组件
label基础库 1.0.0 开始支持,低版本需做兼容处理。用来改进表单组件的可用性。使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。 for优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。 目前可以绑定的控件有:button,checkbox,radio,switch。属性 类型 默认值 必填 说明...转载 2019-05-23 15:06:11 · 157 阅读 · 0 评论 -
3-5 slider组件
slider基础库 1.0.0 开始支持,低版本需做兼容处理。滑动选择器。属性 类型 默认值 必填 说明 最低版本 min number 0 否 最小值 1.0.0 max number 100 否 最大值 1.0.0 step number 1 否 步长,...转载 2019-05-23 15:31:01 · 352 阅读 · 0 评论 -
3-6 progress组件
progress基础库 1.0.0 开始支持,低版本需做兼容处理。进度条。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。属性 类型 默认值 必填 说明 最低版本 percent number 否 百分比0~100 1.0.0 show-info boolean false...转载 2019-05-23 17:02:52 · 246 阅读 · 0 评论 -
3-7 textarea组件
textarea基础库 1.0.0 开始支持,低版本需做兼容处理。多行输入框。该组件是原生组件,使用时请注意相关限制。属性 类型 默认值 必填 说明 最低版本 value string 否 输入框的内容 1.0.0 placeholder string 否 输入框为空时占位符 ...转载 2019-05-24 10:09:30 · 589 阅读 · 0 评论 -
3-8 form组件
form基础库 1.0.0 开始支持,低版本需做兼容处理。表单。将组件内的用户输入的<switch><input><checkbox><slider><radio><picker>提交。当点击<form>表单中 form-type 为 submit 的<button>...转载 2019-05-24 10:29:56 · 314 阅读 · 0 评论