关注
分享
BlueZhang521
Coding is not all in my life!
展开
-
微信小程序 数据绑定
数据绑定WXML中的动态数据均来自对应Page的data。简单绑定数据绑定使用"Mustache"语法（双大括号）将变量包起来，可以作用于：内容<view> {{ message }} </view>Page({ data: { message: 'Hello MINA!' }})组件属性(需要在双引号之内)<view id="item-{{id}}...原创 2018-05-22 15:47:39 · 975 阅读 · 0 评论 -
微信小程序 列表渲染 wx:for
wx:for在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item<view wx:for="{{array}}"> {{index}}: {{item.message}}</view>Page({ data: { array: [{ ...原创 2018-05-22 16:59:22 · 1146 阅读 · 0 评论 -
微信小程序 条件渲染 wx:if
wx:if在框架中，我们用wx:if="{{condition}}"来判断是否需要渲染该代码块：<view wx:if="{{condition}}"> True </view>也可以用wx:elif和wx:else来添加一个else块：<view wx:if="{{length > 5}}"> 1 </view>&原创 2018-05-22 17:03:40 · 5074 阅读 · 1 评论 -
微信小程序 模板(template)
模板WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。定义模板使用name属性，作为模板的名字。然后在<template/>内定义代码片段，如：<!-- index: int msg: string time: string--><template name="msgItem"> <view>...原创 2018-05-22 17:08:49 · 541 阅读 · 0 评论 -
微信小程序 事件
什么是事件事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如id, dataset, touches。事件的使用方式在组件中绑定一个事件处理函数。如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。<view id="tapTes...原创 2018-05-22 17:11:46 · 374 阅读 · 0 评论 -
微信小程序 WXML提供了import和include引用方式
引用WXML提供两种文件引用方式import和include。importimport可以在该文件中使用目标文件定义的template，如：在item.wxml中定义了一个叫item的template：<!-- item.wxml --><template name="item"> <text>{{text}}</text></temp...原创 2018-05-23 09:54:51 · 3705 阅读 · 0 评论 -
微信小程序 WXS模块
WXS 模块WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内，或以 .wxs 为后缀名的文件内。模块每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。.wxs 文件...原创 2018-05-23 11:04:34 · 1203 阅读 · 0 评论 -
微信小程序 变量
概念WXS 中的变量均为值的引用。没有声明的变量直接赋值使用，会被定义为全局变量。如果只声明变量而不赋值，则默认值为 undefined。var表现与javascript一致，会有变量提升。var foo = 1;var bar = "hello world";var i; // i === undefined上面代码，分别声明了 foo、 bar、 i 三个变量。然后，foo 赋值为数值 ...原创 2018-05-23 11:08:19 · 1203 阅读 · 0 评论 -
微信小程序 注释
WXS 主要有 3 种注释的方法。示例代码：<!-- wxml --><wxs module="sample">// 方法一：单行注释/*方法二：多行注释*//*方法三：结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释var a = 1;var b = 2;var c = "fake";</wxs>上述例子中，所有 WXS 代码均被注释掉了。方法三 和...原创 2018-05-23 11:09:29 · 28168 阅读 · 0 评论 -
微信小程序 运算符
基本运算符示例代码：var a = 10, b = 20;// 加法运算console.log(30 === a + b);// 减法运算console.log(-10 === a - b);// 乘法运算console.log(200 === a * b);// 除法运算console.log(0.5 === a / b);// 取余运算console.log(10 ===...原创 2018-05-23 11:11:25 · 16639 阅读 · 0 评论 -
微信小程序 语句
if 语句在 WXS 中，可以使用以下格式的 if 语句 ：if (expression) statement ： 当 expression 为 truthy 时，执行 statement。if (expression) statement1 else statement2 : 当 expression 为 truthy 时，执行 statement1。 否则，执行 statement2if .....原创 2018-05-23 11:32:55 · 1832 阅读 · 0 评论 -
微信小程序 基础类库
consoleconsole.log 方法用于在 console 窗口输出信息。它可以接受多个参数，将它们的结果连接起来输出。Math属性ELN10LN2LOG2ELOG10EPISQRT1_2SQRT2以上属性的具体使用请参考 ES5 标准。方法absacosasinatanatan2ceilcosexpfloorlogmaxminpowrandomroundsinsqrttan以上方法的具体使...原创 2018-05-23 14:28:22 · 990 阅读 · 0 评论 -
微信小程序 WXSS
WXSSWXSS(WeiXin Style Sheets)是一套样式语言，用于描述WXML的组件样式。WXSS用来决定WXML的组件应该怎么显示。为了适应广大的前端开发者，我们的WXSS具有CSS大部分特性。同时为了更适合开发微信小程序，我们对CSS进行了扩充以及修改。与css相比我们扩展的特性有：尺寸单位样式导入尺寸单位rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规...原创 2018-05-23 14:54:04 · 483 阅读 · 0 评论 -
微信小程序 基础组件
基础组件框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。什么是组件：组件是视图层的基本组成单元。组件自带一些功能与微信风格的样式。一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。<tagname property="value"> Content goes here ...</tagename>注意：所有组件...原创 2018-05-23 15:00:37 · 699 阅读 · 0 评论 -
微信小程序 性能Trace工具
微信 Andoid 6.5.10 开始，我们提供了 Trace 导出工具，开发者可以在开发者工具 Trace Panel 中使用该功能。使用方法PC 上需要先安装adb工具，可以参考一些主流教程进行安装，Mac 上可使用 brew 直接安装。确定adb工具已成功安装后，在开发者工具上打开 Trace Panel，将 Android 手机通过 USB 连接上 PC，点击「Choose Devices...原创 2018-05-24 14:06:27 · 6454 阅读 · 1 评论 -
微信小程序API 数据缓存
每个微信小程序都可以有自己的本地缓存，可以通过wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以对本地缓存进行设置、获取和清理。同一个微信用户，同一个小程序 storage 上限为 10MB。localStorage 以用户维度隔离，同一台设...原创 2018-05-24 15:25:04 · 2819 阅读 · 0 评论 -
微信小程序API-设备-系统信息
wx.getSystemInfo(OBJECT)获取系统信息。OBJECT参数说明：参数类型必填说明successFunction是接口调用成功的回调failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）success回调参数说明：参数说明最低版本model手机型号 pixelRatio设备像素比 screenWidth屏...原创 2018-05-24 15:25:32 · 3997 阅读 · 0 评论 -
微信小程序API-设备- 网络状态
wx.getNetworkType(OBJECT)获取网络类型。OBJECT参数说明：参数类型必填说明successFunction是接口调用成功，返回网络类型 networkTypefailFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）success返回参数说明：参数说明networkType网络类型wx.getNetw...原创 2018-05-24 15:26:01 · 4779 阅读 · 0 评论 -
微信小程序API-设备-手机联系人
wx.addPhoneContact(OBJECT)基础库 1.2.0 开始支持，低版本需做兼容处理调用后，用户可以选择将该表单以“新增联系人”或“添加到已有联系人”的方式，写入手机系统通讯录，完成手机通讯录联系人和联系方式的增加。OBJECT参数说明：参数类型必填说明photoFilePathString否头像本地文件路径nickNameString否昵称lastNameString否姓氏mid...原创 2018-05-24 15:27:24 · 3727 阅读 · 0 评论 -
微信小程序画布 canvas
canvas画布。属性名类型默认值说明canvas-idString canvas 组件的唯一标识符disable-scrollBooleanfalse当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新bindtouchstartEventHandle 手指触摸动作开始bindtouchmoveEventHandle 手指触摸后移动bindtouchendEventHandl...原创 2018-05-24 15:35:03 · 2326 阅读 · 4 评论 -
微信小程序 模块化
文件作用域在JavaScript文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。通过全局函数getApp()可以获取全局的应用实例，如果需要全局的数据可以在App()中设置，如：// app.jsApp({ globalData: 1})// a.js// The localValue can only be used in file a....原创 2018-05-22 15:23:09 · 711 阅读 · 0 评论 -
微信小程序 页面路由
页面路由在小程序中所有页面的路由全部由框架进行管理。页面栈框架以栈的形式维护了当前的所有页面。当发生路由切换的时候，页面栈的表现如下：路由方式页面栈表现初始化新页面入栈打开新页面新页面入栈页面重定向当前页面出栈，新页面入栈页面返回页面不断出栈，直到目标返回页，新页面入栈Tab 切换页面全部出栈，只留下新的 Tab 页面重加载页面全部出栈，只留下新的页面getCurrentPages()getCur...原创 2018-05-22 11:22:20 · 364 阅读 · 0 评论 -
微信小程序 注册页面 Page()函数
PagePage() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。object 参数说明：属性类型描述dataObject页面的初始数据onLoadFunction生命周期函数--监听页面加载onReadyFunction生命周期函数--监听页面初次渲染完成onShowFunction生命周期函数--监听页面显示onHideFunctio...原创 2018-05-22 11:21:25 · 2488 阅读 · 0 评论 -
微信小程序-MINE目录结构
MINA 文件结构文件结构MINA程序包含一个描述整体程序的app和多个描述各自页面的page。一个MINA程序主体部分由三个文件组成，必须放在项目的根目录，如下：文件必需作用app.js是小程序逻辑app.json是小程序公共设置app.wxss否小程序公共样式表一个MINA页面由四个文件组成，分别是：文件类型必须作用wxml是页面结构wxss否页面样式表json否页面配置js是页面逻辑注意：为...原创 2018-03-19 15:29:32 · 865 阅读 · 0 评论 -
小程序配置
小程序配置配置我们使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。以下是一个包含了所有配置选项的简单配置app.json ：{"pages": ["pages/index/index","pages/logs/index" ], "window": {"navigationBarTitleText": "Demo"原创 2018-03-19 15:37:58 · 927 阅读 · 0 评论