1.小程序语法

1.1.认识几个常用标签

1.2.数据绑定

1.3.事件绑定

1.4.大小尺寸

1.5.样式引入

1.6.长按内容复制、对内容进行解码

1.7.选择器

1.8.插入图片

1.9.图片轮播

1.10.导航组件

1.11.滑块

1.12.富文本标签

1.13.button按钮

1.14.字体图标

1.15.单选框

1.16.复选框

1.17.父子页面传值

1.18.设置tabBar

2.生命周期

1.小程序语法

1.1.认识几个常用标签

1 text 相当于以前web中的 span标签行内元素不会换行

2 view 相当于以前web中的 div标签块级元素会换行

3 checkbox 以前的复选框标签

1.2.数据绑定

wxml文件：

<!-- 1 字符串 -->
<view> {{msg}} </view>
<!-- 2 数字类型 -->
<view>{{num}}</view>
<!-- 3 bool类型  -->
<view>性别: {{isGirl}} </view>
<!-- 4 object类型 -->
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view><!-- 5 在标签的属性中使用 -->
<view data-num="{{num}}"> 自定义属性</view><!-- 6 使用bool类型充当属性 checked  1 字符串和 花括号之间一定不要存在空格 否则会导致识别失败 以下写法就是错误的示范<checkbox checked="       {{isChecked}}"> </checkbox>-->
<view><checkbox checked="{{isChecked}}"> </checkbox>
</view><!-- 7 运算 => 表达式1 可以在花括号中 加入 表达式 --  “语句”2 表达式指的是一些简单 运算 数字运算 字符串 拼接  逻辑运算。。1 数字的加减。。2 字符串拼接3 三元表达式 3 语句1 复杂的代码段1 if else2 switch3 do while 。。。。4 for 。。。-->
<view>{{1+1}}</view><view>{{'1'+'1'}}</view><view>{{ 11%2===0 ? '偶数' : '奇数' }}</view><!-- 8 列表循环1 wx:for="{{数组或者对象}}"  wx:for-item="循环项的名称"  wx:for-index="循环项的索引"2 wx:key="唯一的值" 用来提高列表渲染的性能1 wx:key 绑定一个普通的字符串的时候 那么这个字符串名称 肯定是 循环数组 中的 对象的 唯一属性2 wx:key ="*this"  就表示 你的数组 是一个普通的数组  *this 表示是 循环项 [1,2,3,44,5]["1","222","adfdf"]3 当出现 数组的嵌套循环的时候 尤其要注意  以下绑定的名称 不要重名wx:for-item="item" wx:for-index="index"4 默认情况下 我们 不写wx:for-item="item" wx:for-index="index"小程序也会把 循环项的名称 和 索引的名称 item 和 index 只有一层循环的话 （wx:for-item="item" wx:for-index="index"） 可以省略9 对象循环1 wx:for="{{对象}}" wx:for-item="对象的值"  wx:for-index="对象的属性"2 循环对象的时候 最好把 item和index的名称都修改一下wx:for-item="value"  wx:for-index="key"-->
<view><view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">索引：{{index}} -- 值:{{item.name}}</view>
</view><view><view>对象循环</view><view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="age">属性:{{key}} -- 值:{{value}}</view>
</view><!-- 10 block1 占位符的标签 2 写代码的时候 可以看到这标签存在3 页面渲染 小程序会把它移除掉--><view><block wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id" class="my_list">索引：{{index}} -- 值:{{item.name}}</block>
</view><!-- 11 条件渲染1 wx:if="{{true/false}}"1 if , else , if elsewx:ifwx:elifwx:else 2 hidden 1 在标签上直接加入属性 hidden 2 hidden="{{true}}"3 什么场景下用哪个1 当标签不是频繁的切换显示 优先使用 wx:if直接把标签从 页面结构给移除掉 2 当标签频繁的切换显示的时候 优先使用 hidden通过添加样式的方式来切换显示 hidden 属性 不要和 样式 display一起使用--><view><view>条件渲染</view><view wx:if="{{true}}">显示</view><view wx:if="{{false}}">隐藏</view><view wx:if="{{flase}}">1</view><view wx:elif="{{flase}}">2 </view><view wx:else> 3 </view><view>---------------</view><view hidden>hidden1</view><view hidden="{{false}}">hidden2</view><view>-----000-------</view><view wx:if="{{false}}">wx:if</view><view hidden style="display: flex;">hidden</view>
</view>

js文件：

Page({data: {msg: "hello mina",num: 10000,isGirl: false,person: {age: 48,height: 333,weight: 222,name: "张三"},isChecked:false,list:[{id:0,name:"大众"},{id:1,name:"玛莎拉蒂"},{id:2,name:"奔驰"}]}
});

1.3.事件绑定

小程序中绑定事件，通过bind关键字来实现。如bindtap、bindinput、bindchange等，不同组件支持不同的事件，具体看组件的说明即可。

特别注意：

1.绑定事件时不能带参数，不能带括号，以下为错误写法：<input bindinput="handleInput(100)" />

2.事件传值，通过标签自定义属性的方式和value：<input bindinput="handleInput" data-item="100" />

3.事件触发时获取数据：

handleInput: function(e) {

// {item:100}

console.log(e.currentTarget.dataset)

// 输入框的值

console.log(e.detail.value);

}

<!-- 1 需要给input标签绑定 input事件 绑定关键字 bindinput2 如何获取 输入框的值 通过事件源对象来获取  e.detail.value 3 把输入框的值 赋值到 data当中不能直接 1 this.data.num=e.detail.value 2 this.num=e.detail.value 正确的写法this.setData({num:e.detail.value })4 需要加入一个点击事件 1 bindtap2 无法在小程序当中的 事件中 直接传参 3 通过自定义属性的方式来传递参数4 事件源中获取 自定义属性-->
<input type="text" bindinput="handleInput" />
<button bindtap="handletap" data-operation="{{1}}" >+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>  {{num}}
</view>

Page({data: {num: 0},// 输入框的input事件的执行逻辑handleInput(e) {// console.log(e.detail.value );this.setData({num: e.detail.value})},// 加 减 按钮的事件handletap(e) {// console.log(e);// 1 获取自定义属性 operationconst operation = e.currentTarget.dataset.operation;this.setData({num: this.data.num + operation})}
})

1.4.大小尺寸

wxss：


/*
1 小程序中 不需要主动来引入样式文件
2 需要把页面中某些元素的单位 由 px 改成 rpx1 设计稿 750x750 px = 750 rpx 1 px = 1 rpx2 把屏幕宽度 改成 375px375 px = 750 rpx1 px = 2rpx1rpx = 0.5px
3 存在一个设计稿 宽度 414 或者 未知 page 1 设计稿 page 存在一个元素 宽度 100px2 拿以上的需求 去实现 不同宽度的页面适配 page px = 750 rpx1 px = 750 rpx / page100 px = 750 rpx * 100 / page 假设  page =  375px
4 利用 一个属性 calc属性  css 和 wxss 都支持 一个属性1 750 和 rpx 中间不要留空格2 运算符的两边也不要留空格*/view{/* width: 200rpx; */height: 200rpx;font-size: 40rpx;background-color: aqua;/* 以下代码写法是错误  *//*  width:750 rpx * 100 / 375 ;  */width:calc(750rpx * 100 / 375);}

wxml：

<view>rpx
</view>

1.5.样式引入

wxss：

/*
1 引入的 代码 是通过 @import 来引入
2 路径 只能写相对路径*/@import "../../styles/common.wxss";

1.6.长按内容复制、对内容进行解码

wxml：

<!-- 1 长按文字复制 selectable2 对文本内容 进行 解码-->
<text selectable decode>text &nbsp; 123 &lt;
</text>

1.7.选择器

特别注意，小程序中*通配符无效！以下代码是无效的！

*{margin:0}

目前支持的选择器有：

1.8.插入图片

其中mode有13种模式，4种是缩放模式，9种是裁剪模式：

wxml：

<!-- image 图片标签1 src 指定要加载的图片的路径图片存在默认的宽度和高度 320 * 240      原图大小是 200 * 1002 mode 决定 图片内容 如何 和 图片标签 宽高 做适配1 scaleToFill 默认值 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 2 aspectFit 保持宽高比 确保图片的长边 显示出来   页面轮播图 常用3 aspectFill 保持纵横比缩放图片，只保证图片的 短 边能完全显示出来。  少用4 widthFix 以前web的图片的 宽度指定了之后 高度 会自己按比例来调整   常用  5 bottom。。 类似以前的backgroud-position 3 小程序当中的图片 直接就支持 懒加载  lazy-load1 lazy-load 会自己判断 当 图片 出现在 视口  上下 三屏的高度 之内的时候  自己开始加载图片 --><image mode="bottom" lazy-load src="https://tva2.sinaimg.cn/large/007DFXDhgy1g51jlzfb4lj305k02s0sp.jpg" />

wxss：

image{box-sizing: border-box;border: 1px solid red;width: 300px;height: 200px;
}

1.9.图片轮播

默认宽度100%，高度150px。

wxml：

<!-- 1 轮播图外层容器 swiper2 每一个轮播项 swiper-item3 swiper标签 存在默认样式1 width 100%2 height 150px    image 存在默认宽度和高度 320 * 240 3 swiper 高度 无法实现由内容撑开 4 先找出来 原图的宽度和高度 等比例 给swiper 定 宽度和高度原图的宽度和高度  1125 * 352 pxswiper 宽度 / swiper  高度 =  原图的宽度  /  原图的高度swiper  高度  =  swiper 宽度 *  原图的高度 / 原图的宽度height: 100vw * 352 /  11255 autoplay 自动轮播6 interval 修改轮播时间7 circular 衔接轮播8 indicator-dots 显示 指示器 分页器 索引器 9 indicator-color 指示器的未选择的颜色 10 indicator-active-color 选中的时候的指示器的颜色 -->
<swiper autoplay interval="1000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094"><swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i1/44/O1CN013zKZP11CCByG5bAeF_!!44-0-lubanu.jpg" /> </swiper-item><swiper-item> <image mode="widthFix" src="//aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg" /> </swiper-item><swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i2/37/O1CN01syHZxs1C8zCFJj97b_!!37-0-lubanu.jpg" /> </swiper-item>
</swiper>

wxss：

swiper {width: 100%;/* height: calc(100vw * 352 /  1125); */height: 31.28vw;
}
image {width: 100%;
}

1.10.导航组件

open-type有效值：

<!-- 导航组件 navigator0 块级元素 默认会换行  可以直接加宽度和高度 1 url 要跳转的页面路径  绝对路径 相对路径2 target 要跳转到当前的小程序 还是其他的小程序的页面self 默认值 自己 小程序的页面 miniProgram 其他的小程序的页面3 open-type 跳转的方式1 navigate 默认值   保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面2 redirect 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。3 switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面4 reLaunch   关闭所有页面，打开到应用内的某个页面--><navigator url="/pages/demo10/demo10"> 轮播图页面 </navigator><navigator url="/pages/index/index"> 直接跳转到 tabbar页面 </navigator><navigator open-type="redirect" url="/pages/demo10/demo10">  轮播图页面 redirect </navigator><navigator open-type="switchTab" url="/pages/index/index">  switchTab直接跳转到 tabbar页面 </navigator><navigator open-type="reLaunch" url="/pages/index/index">  reLaunch 可以随便跳 </navigator>

1.11.滑块

默认高度宽度都是100%。

1.12.富文本标签

可以将字符串解析成对应标签，类似于vue中v-html。

<!-- rich-text 富文本标签1 nodes属性来实现1 接收标签字符串 2 接收对象数组 --><rich-text nodes="{{html}}"></rich-text>

1.13.button按钮

<!-- button 标签1 外观的属性1 size 控制按钮的大小1 default 默认大小2 mini 小尺寸2 type 用来控制按钮的颜色1 default 灰色2 primary 绿色3 warn 红色3 plain  按钮是否镂空，背景色透明4 loading 文字前显示正在等待图标--><button>默认按钮</button><button size="mini">  mini 默认按钮</button><button type="primary"> primary 按钮</button> <button type="warn"> warn 按钮</button> <button type="warn" plain> plain 按钮</button> <button type="primary" loading> loading 按钮</button> <!-- button 开发能力open-type：1 contact 直接打开  客服对话功能  需要在微信小程序的后台配置   只能够通过真机调试来打开 2 share 转发当前的小程序 到微信朋友中   不能把小程序 分享到 朋友圈 3 getPhoneNumber 获取当前用户的手机号码信息 结合一个事件来使用  不是企业的小程序账号 没有权限来获取用户的手机号码 1 绑定一个事件 bindgetphonenumber 2 在事件的回调函数中  通过参数来获取信息 3 获取到的信息  已经加密过了 需要用户自己待见小程序的后台服务器，在后台服务器中进行解析 手机号码，返回到小程序中 就可以看到信息了4 getUserInfo 获取当前用户的个人信息1 使用方法 类似 获取用户的手机号码2 可以直接获取 不存在加密的字段 5 launchApp 在小程序当中 直接打开 app1 需要现在 app中 通过app的某个链接 打开 小程序2 在小程序 中 再通过 这个功能 重新打开 app3 找到 京东的app 和 京东的小程序  6 openSetting 打开小程序内置的 授权页面1 授权页面中 只会出现 用户曾经点击过的 权限 7 feedback 打开 小程序内置的 意见反馈页面 1 只能够通过真机调试来打开 -->
<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>

1.14.字体图标

<!-- 小程序中的字体图标1 type 图标的类型success|success_no_circle|info|warn|waiting|cancel|download|search|clear2 size 大小 3 color 图标的颜色-->
<icon  type="cancel" size="60" color="#0094ff"> </icon>

1.15.单选框

<!-- radio 单选框1 radio标签 必须要和 父元素 radio-group来使用2 value 选中的单选框的值 3 需要给 radio-group 绑定 change事件 4 需要在页面中显示 选中的值--><radio-group bindchange="handleChange"><radio color="red" value="male">男</radio><radio color="red" value="female" >女</radio></radio-group><view>您选中的是:{{gender}}</view>

1.16.复选框

<view><checkbox-group bindchange="handleItemChange"><checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox></checkbox-group><view>选中的水果:{{checkedList}}</view>
</view>

1.17.父子页面传值

<!-- 1 父组件(页面) 向子组件 传递数据 通过 标签属性的方式来传递1 在子组件上进行接收2 把这个数据当成是data中的数据直接用即可2 子向父传递数据 通过事件的方式传递1 在子组件的标签上加入一个 自定义事件-->
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange" ><block wx:if="{{tabs[0].isActive}}">0 </block>
<block wx:elif="{{tabs[1].isActive}}">1 </block>
<block wx:elif="{{tabs[2].isActive}}">2 </block>
<block wx:else>3</block></Tabs>

1.18.设置tabBar

在app.json中配置

{"pages": ["pages/index/index","pages/img/img","pages/mine/mine","pages/search/search","pages/logs/logs"],"window": {"backgroundTextStyle": "dark","navigationBarBackgroundColor": "#cccccc","navigationBarTitleText": "我的应用","navigationBarTextStyle": "black","enablePullDownRefresh": true,"backgroundColor": "#aaaaaa"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "icon/_home.png","selectedIconPath": "icon/home.png"},{"pagePath": "pages/img/img","text": "图片","iconPath": "icon/_img.png","selectedIconPath": "icon/img.png"},{"pagePath": "pages/mine/mine","text": "我的","iconPath": "icon/_my.png","selectedIconPath": "icon/my.png"},{"pagePath": "pages/search/search","text": "搜索","iconPath": "icon/_search.png","selectedIconPath": "icon/search.png"},{"pagePath": "pages/demo18/demo18","text": "demo18","iconPath": "icon/_search.png","selectedIconPath": "icon/search.png"}],"color":"#0094ff","selectedColor":"#ff9400","backgroundColor":"#ffffff"},"sitemapLocation": "sitemap.json"
}

2.生命周期

Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

微信小程序从入门到飞起（各个组件）相关推荐

微信小程序从入门到飞起（环境搭建、配置）
目录一.什么是微信小程序二.官方微信小程序体验三.环境搭建 3.1.注册账号 3.2.下载开发工具 3.3.创建工程四.话不多说,开始 4.1.开发工具还是很简洁方便的 4.2.微信小程序的文 ...
微信小程序开发入门与实战（组件的使用）
@作者 : SYFStrive @博客首页 : HomePage
《微信小程序开发入门精要》——导读
本节书摘来自异步社区<微信小程序开发入门精要>一书中的导读,作者李宁,更多章节内容可以访问云栖社区"异步社区"公众号查看目录第1章微信小程序入门第1章第1节 ...
微信小程序样式入门到精通(wxss)课程007-文本-text-align水平对齐
text-align水平对齐语法 text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式. 西方语言都是从左向右读,所有 text-align 的默认值是 left.文 ...
小程序onload_微信小程序开发入门之共享账本（十四）
微信小程序开发入门之共享账本(十四) (备注:微信小程序的wxml文件相当于HTML文件,wxss文件相当于CSS文件,js文件就是JavaScript文件,数据库为NoSQL数据库,数据库脚本语言也 ...
《微信小程序开发入门精要》——第2章，第2.8节带边距的水平等间隔排列
本节书摘来自异步社区<微信小程序开发入门精要>一书中的第2章,第2.8节带边距的水平等间隔排列,作者李宁,更多章节内容可以访问云栖社区"异步社区"公众号查看 2.8 ...
[免费分享]微信小程序从入门到精通视频教程 [8.2G]
获取方式公众号回复 wechat0423 获取下载地址, 好书推荐.视频分享,与您一起进步目录:/微信小程序从入门到精通视频教程 [8.2G] ┣━━课件资料demo [7.7M]┃ ┣━━表单组 ...
视频教程-微信小程序从入门基础(第一季)-PHP
微信小程序从入门基础(第一季) 多年一线互联网开发实战以及培训经验,对php开发,linux运维架构有丰富的经验,善于分析问题,解决问题. lampol ¥117.00 立即订阅扫码下载「CSDN程 ...
视频教程-微信小程序快速入门视频课程-微信开发
微信小程序快速入门视频课程北京八维研修学院技术工程师,5年大型项目实战开发经验,3年授课经验. 孟宪杰 ¥168.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 AP ...

微信小程序从入门到飞起（各个组件）

1.小程序语法

1.1.认识几个常用标签

1.2.数据绑定

1.3.事件绑定

1.4.大小尺寸

1.5.样式引入

1.6.长按内容复制、对内容进行解码

1.7.选择器

1.8.插入图片

1.9.图片轮播

1.10.导航组件

1.11.滑块

1.12.富文本标签

1.13.button按钮

1.14.字体图标

1.15.单选框

1.16.复选框

1.17.父子页面传值

1.18.设置tabBar

2.生命周期

微信小程序从入门到飞起（各个组件）相关推荐

最新文章

热门文章