24微信小程序开发2

WXML模板语法-数据绑定：在data中定义页面的数据：在页面对应的.js文件中，把数据定义到data对象中即可Page({data: {name:'zero',age:100},Mustache语法的格式：把data中的数据绑定到页面中渲染，使用Mustache语法(双大括号)将变量包起来即可，语法格式为：<view>姓名：{{name}}，年龄：{{age}}</view>Mustache语法的应用场景：Mustache语法的主要应用场景如下：绑定内容，绑定属性，运算(三元运算，算术运算等)WXML模板语法-事件绑定：什么是事件：事件是渲染到逻辑层的通讯方式，通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理小程序中常用的事件：类型      绑定方法                        事件描述tap      bindtap和bind:tap              手指触摸后马上离开，类似于HTML中的click事件input    bindinput和bind:input          文本框的输入事件change   bindchange和bind:change        状态改变时触发事件对象的属性列表：当回调触发的时候，会收到一个事件对象event，它的详细属性如下表所示：属性                  类型           说明type                String        事件类型timeStamp           Integer       页面打开到触发事件所经过的毫秒数target              Object        触发事件的组件的一些属性值集合currentTarget       Object        当前组件的一些属性值集合detail              Object        额外的信息touches             Array         触摸事件，当前停留在屏幕中的触摸点的数组changeTouches       Array         触摸事件，当前变化的触摸点信息的数组target和currenTarget的区别：target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件，举例如下：<view class="outer-view" bindtap="outerHandler"><button type="primary">按钮</button></view>点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数此时，对于外层的view来说：e.target指向是触发事件的源头组件，因此，e.target是内部的按钮组件e.currentTarget指向的是当前正在触发事件的那个组件，因此，e.currentTarget是当前的view组件bindtap的语法格式：在小程序中，不存在HTML中的onclick鼠标点击事件，而是通过tap事件来相应用户的触摸行为1 通过bindtap，可以为组件绑定tap触摸事件，语法如下：<button type="primary" bindtap="btnTapHandler">按钮</button>2 在页面的.js文件中定义对应的事件处理函数，事件参数通过形参event(一般简写成e)来接收：Page({btnTapHandler(e){   // 按钮的tap事件处理函数console.log(e)  // 事件参数对象e}})在事件处理函数中为dat中的数据赋值：通过调用this.setData(dataObject)方法，可以给页面的data中的数据重新赋值，示例如下：Page({data:{count:0},// 修改count的值changeCount(){this.setData({count:this.data.count+1})}})事件传参：小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数，例如，下面的代码将不能正常工作：<button type="primart" bindtap="btnHandler(123)">事件传参</button>因为小程序会把bindtap的属性值，统一当作事件名称来处理，相当于要调用一个名称为btnHandler(123)的事件处理函数可以为数组提供data-*自定义属性传参，其中*代表的是参数的名字，示例代码如下：<button bindtap="btnHandler" data-info="{{2}}">事件传参</button>最终：info会被解析为参数的名字数值2会被解析为参数的值在事件处理函数中，通过event.target.dataset.参数名即可获取到具体参数的值，示例代码如下：btnHandler(event){// dataset是一个对象，包含了所有通过data-*传递过来的参数项console.log(event.target.dataset)// 通过dataset可以访问到具体参数的值console.log(event.target.dataset.info)}bindinput的语法格式：在小程序中，通过input事件来相应文本框的输入事件，语法格式如下：1 通过bindinput，可以为文本框绑定输入事件：<input bindinput="inputHandler" />2 在页面的.js文件中定义事件处理函数：inputHandler(e){// e.datail.value是变化过后，文本框最新的值console.log(e.datail.value)}WXML模板语法-条件渲染：wx:if：在小程序中，使用wx:if="{{condition}}"来判断是否需要渲染该代码块：<view wx:if="{{condition}}">True</view>也可以用wx:elif和wx:else来添加else判断：<view wx:if="{{type===1}}">男</view><view wx:elif="{{type===2}}">女</view><view wx:else>其他</view>结合<block>使用wx:if：如果要一次性控制多个组件的展示与隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在<block>标签上使用wx:if控制属性，示例如下：<block wx:if="{{true}}"><view>view1</view><view>view2</view></block>注意：<block>并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染hidden：在小程序中，直接使用hidden="{{condition}}"也能控制元素的显示与隐藏<view>条件为true隐藏，条件为false显示</view>wx:if与hidden的对比：1 运行方式不同：wx:if以动态创建和移除元素的方式，控制元素的展示与隐藏hidden以切换样式的方式(display:none/block;)，控制元素的显示与隐藏2 使用建议：频繁切换时，建议使用hidden控制条件复杂时，建议使用wx:if进行展示与隐藏的切换WXML模板语法-列表渲染：wx:for：通过wx:for可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：<view wx:for="array">索引是：{{index}}当前项是：{{item}}</view>默认情况下，当前循环项的索引用index表示，当前循环项用item表示手动指定索引和当前项的变量名：使用wx:for-index可以指定当前循环项的索引的变量名使用wx:for-item可以指定当前项的变量名<view wx:for="array" wx:for-index="idx" wx:for-item="itemNane">索引是：{{idx}}当前项是：{{itemName}}</view>wx:key的使用：类似于Vue列表渲染中的:key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的key值从而提高渲染的效率，示例代码如下：data:{userList:[{id:1,name:"zero"},{id:2,name:"king"},{id:3,name:"ping"}]}<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>WXSS模板样式：什么是WXSS：WXSS(WeiXin Style Sheets)是一套样式语言，用于美化WXML的组件样式，类似于网页开发中的CSSWXSS和CSS的关系：WXSS具有CSS大部分特性，同时，WXSS还对CSS进行了扩充以及修改，以适应微信小程序的开发与CSS相比，WXSS拓展的特性有：rpx尺寸单位@input样式导入WXSS模板样式-rpx：什么是rpx尺寸单位：rpx(responsive pixel)是微信小程序独有的，用来解决屏适配的尺寸单位rpx的实现原理：rpx的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份(即：当前屏幕的总宽度为750rpx)在较小的设备上，1rpx所代表的宽度较小在较大的设备上，1rpx所代表的宽度较大小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配WXSS模板样式-样式导入：什么是样式导入：使用WXSS提供的@input语法，可以导入外联的样式表@import的语法格式：@import后跟需要导入的外联样式的相对路径，用;表示语句结束，示例如下：@import "wxss路径"WXSS模板样式-全局样式和局部样式：全局样式：定义在app.wxss中的样式为全局样式，作用于每一个页面局部样式：在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面注意：1 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式2 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式全局配置：全局配置文件及常用的配置项：小程序根目录下的app.json文件是小程序的全局配置文件，常用的配置项如下：pages：记录当前小程序所有页面的存放路径window：全局设置小程序窗口的外观tabBar：设置小程序底部的tabBar效果style：是否启用新版的组件样式全局配置-window：小程序窗口的组成部分：navigationBaer：导航栏区域background：背景区域，默认不可见，下拉才显示页面的主体区域，用来显示wxml中的布局了解window节点常用的配置项：属性名                             类型        默认值     说明navigationBarTitleText           String      字符串     导航栏标题文字内容navigationBarBackgroundColor     HexColor    #000000   导航栏背景颜色，如#000000navigationBarTextStyle           String      white     导航栏标题颜色，仅支持black/whitebackgroundColor                  HexColor    #ffffff   窗口的背景色backgroundTextStyle              String      dark      下拉loading的样式，仅支持dark/lightenablePullDownRefresh            Boolean     false     是否全局开启下拉刷新onReachBottomDistance            Number      50        页面上拉触底事件触发时据页面底部距离，单位为px设置导航栏的标题：设置步骤：app.json->window->navigationBarTitleText设置导航栏的背景色：设置步骤：app.json->window->navigationBarBackgroundColor设置导航栏的标题颜色：设置步骤：app.json->window->navigationBarTextStyle注意：navigationBarTextStyle的可选值只有black和white全局开启下拉刷新功能：概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为设置步骤：app.json->window->把enablePullDownRefresh的值设置为true注意：在app.json中启用下拉刷新功能，会作用于每个小程序页面设置下拉刷新时窗口的背景色：当全局开启下拉刷新功能之后，默认的窗口背景为白色，如果自定义下拉刷新窗口背景色，设置步骤为：app.json->window->为backgroundColor指定16进制的颜色值#efefef设置下拉刷新的loading的样式：当全局开启下拉刷新功能之后，默认窗口的loading样式为白色，如果要更改loading样式的效果，设置步骤为app.json->window->为backgroundTextStyle指定dark值注意：backgroundTextStyle的可选值只有light和dark设置上拉触底的距离：概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为设置步骤：app.json->window->为onReachBottomDistance设置新的数值注意：默认距离为50px，如果没有特殊要求，建议使用默认值即可全局配置-tabBer：什么是tabBar：tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换小程序中通常将其分为：底部和顶部注意：tabBer中只能配置最少2个、最大5个tab页签当渲染顶部时，不显示icon(图标)，只显示文本tabBer的6个组成部分：1 backgroundColor:tabBar的背景色2 selectedIconPath:选中时的图片路径3 borderStyle:tabBer上边框的颜色4 iconPath:未选中时的图片路径5 selectedColor:tab上的文字选中时的颜色6 color:tab上文字的默认(未选中)颜色tabBar节点的配置项：app.json->tabBar属性              类型      必填      默认值    描述position        String     否       bottom   tabBar的位置，仅支持bottom/topborderStyle     String     否       black    tabBar上边框的颜色，仅支持black/whitecolor           HexColor   否                tab上文字的默认(未选中)颜色selectedColor   HexColor   否                tab上的文字选中时的颜色backgroundColor HexColor   否                tabBar的背景色list            Array      是                tab页签的列表，最少2个、最大5个tab每个tab项的配置选项：属性                  类型       必填      描述pagePath            String      是       页面路径，页面必须在pages中预先丁页text                String      是       tab上显示的文字incoPath            String      否       未选中时的图标路径selectedIconPath    String      否       选中时的图标路径页面配置：页面配置文件的作用：小程序中，每个页面都有自己的.json配置文件，用来对当前页面的窗口外观、页面效果等进行配置页面配置和全局配置的关系：小程序中，app.json中的window节点，可以全局配置小程序中每个页面的窗口表现如果某些小程序页面想要拥有特殊的窗口表现，此时，页面级别的.json配置文件就可以实现这种需求注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准页面配置中常用的配置项：属性                              类型        默认值       描述navigationBarBackgroundColor    HexColor    #000000     当前页面导航栏背景颜色，如#000000navigationBarTextStyle          String      white       当前页面导航栏标题颜色，仅支持black/whitenavigationBarTitleText          String                  当前页面导航栏标题文字内容backgroundColor                 HexColor    #ffffff     当前页面窗口的背景色backgroundTextStyle             String      dark        当前页面下拉loading的样式，仅支持dark/lightenablePullDownRefresh           Boolean     false       是否为当前页面开启下拉刷新的效果onReachBottomDistance           Number      50          页面上拉触底事件触发时距页面底部距离，单位为px网络数据请求：小程序中网络数据请求的限制：出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：1 只能请求HTTPS类型的接口2 必须将接口的域名添加到信任列表中配置request合法域名：配置步骤：登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名注意事项：1 域名只支持https协议2 域名不能使用IP地址或localhost3 域名必须经过ICP备案4 服务器域名一个月内最多申请5次修改发起GET请求：调用微信小程序提供的wx.request()方法，可以发起GET请求数据，示例代码如下：wx.request({url:"https://www.myapp.cn/api/get", // 请求的接口地址，必须基于https协议method:"GET",    // 请求方式data:{  // 发送到服务器的数据name:"zero",age:100},success:(res)=>{    // 请求成功之后的回调函数console.log(res)}})发起POST请求：调用微信小程序提供的wx.request()方法，可以发起POST请求数据，示例代码如下：wx.request({url:"https://www.myapp.cn/api/post", // 请求的接口地址，必须基于https协议method:"POST",    // 请求方式data:{  // 发送到服务器的数据name:"zs",age:10},success:(res)=>{    // 请求成功之后的回调函数console.log(res)}})在页面刚加载时请求数据：在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据，此时需要在页面的onLoad事件中调用获取数据的函数，示例代码如下：onLoad:function(options){this.getSwiperList()this.getGridList()},// 获取轮播图的数据getSwiperList(){...},// 获取九宫格的数据getGridList(){...}跳过request合法域名校验：如果后端程序员仅仅提供了http协议的接口、暂时没有提供https协议的接口此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启开发环境不校验请求域名、TLS版本及HTTPS证书选项跳过request合法域名的校验注意：跳过request合法域名校验的选项，仅限在开发与调试阶段使用关于跨域和Ajax的说明：跨域问题只存在于基于浏览器的Web开发，由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做”发起Ajax“请求，而是叫做”发起网络数据请求“

24微信小程序开发2相关推荐

微信小程序开发03-这是一个组件
编写组件基本结构接上文:微信小程序开发02-小程序基本介绍我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...
微信小程序开发基础入门笔记
文章目录 vsc 安装插件(小程序开发助手-微信小程序开发助手) 日常注意: 微信小程序WXS模块的使用框架 1小程序结构和传统的web结构 2 基本的项目目录 3全局配置app.js 4.运算 = ...
微信小程序开发一定要服务器么，该怎么选择小程序服务器？
因为微信用户群体广,微信小程序自从上线以来就受到用户的青睐,很多商家看准商机开始部署自己的微信小程序平台,且占据了很大的市场份额,尤其是微信小游戏和微信购物类商城很少火爆.但是很多人们对微信小程序开发 ...
MOOC微信小程序开发从入门到实践~笔记
MOOC微信小程序开发从入门到实践~笔记 1.图标网站[icon]www.iconfont.cn 2.新建项目是必须需要AppID 3.app.js是页面逻辑文件 app.json是页面全局配置文件( ...
微信小程序开发之城市选择器城市切换
移动开发中城市选择器必不可少. 空白造了个. gif: 这里只上部分js代码: var city = require('../../utils/city.js');//欢迎关注:http://w ...
学习（微信小程序开发入门及案例详解 --李骏，边思编著）
第一章初识小程序 1.小程序不仅在商业上具备很大潜力,同时在技术上解决了一套代码多端运行和动态发版的两大痛点,用户在微信中扫一扫或搜一下即可打开具备原生体验的应用,这给开发者带来了很大的想象空间 2 ...
标星 2.7w+ 堪称史上最全的微信小程序开发资源汇总
[公众号回复 "1024",免费领取程序员赚钱实操经验] 2017 年 1 月,微信小程序一夜成名. 微信小程序成名后,各大厂开始效仿,相继出现了支付宝.百度.今日头条.QQ.抖音 ...
视频教程-微信小程序开发【初级篇 / 附案例】-微信开发
微信小程序开发[初级篇 / 附案例] 北风网讲师!瓢城Web俱乐部创始人,教学总监! 李炎恢 ¥129.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订阅课程, ...
微信小程序——开发基础
内容说明:这是微信小程序第一次实验报告本次实验主要实现了三部分内容:开发环境的搭建,开发工具的安装以及比较数字大小的实验案例.在进行实验的过程中,掌握了以下知识内容: 微信小程序开发环境的搭建 ...

24微信小程序开发2

24微信小程序开发2相关推荐

最新文章

热门文章