微信小程序基础代码

可以使用 Visual Studio Code 开发微信小程序,看个人喜好了;

安装插件小程序开发助手

安装插件Easy Less 后支持 less样式开发

还需要配置下才支持less

添加:

"less.compile": {"outExt": ".wxcss"}

一.基础代码 wxml

<!-- 1 text 相当于以前web中的 span标签 行内元素  不会换行2 view 相当于以前web中的 div标签 块级元素  会换行3 checkbox 以前的复选框标签 -->
<!-- <text>1</text>
<text>2</text>
<view>1</view>
<view>2</view> --><!-- 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>

//Page Object
Page({data: {msg: "hello mina",num: 10000,isGirl: false,person: {age: 74,height: 145,weight: 200,name: "富婆"},isChecked:false,list:[{id:0,name:"猪八戒"},{id:1,name:"天蓬元帅"},{id:2,name:"悟能"}]}
});

二.事件及数据绑定 wxml

<!-- 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 通过自定义属性的方式来传递参数  data-operation="{{1}}     js中    const operation = e.currentTarget.dataset.operation;4 事件源中获取 自定义属性-->
<input type="text" bindinput="handleInput" />
<button bindtap="handletap" data-operation="{{1}}" >+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>  {{num}}
</view>

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

三. 分辨率 rpx wxml

<view>rpx
</view>

wxss

1 存在一个设计稿宽度 414 或者未知 page
1 设计稿 page 存在一个元素宽度 100px
2 拿以上的需求去实现不同宽度的页面适配

page px = 750 rpx
1 px = 750 rpx / page
100 px = 750 rpx * 100 / page
假设设备是苹果6 分辨率 page = 375px
2 利用一个属性 calc属性 css 和 wxss 都支持一个属性
1 750 和 rpx 中间不要留空格
2 运算符的两边也不要留空格

/* 以下代码写法是错误 */
/* width:750 rpx * 100 / 375 ; */

正确:

假设设备是苹果6 分辨率375 page = 375px

view{
width:calc(750rpx * 100 / 375);
height: 200rpx;
font-size: 40rpx;
background-color: aqua;
}


/* 
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);}

wxss 引入

1.工程目录下创建样式文件夹mini-01\styles

2.创建样式文件

common.wxss

view{color: aqua;font-size: 100px;
}

wxss

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

四.

wxss

/* 1 定义less变量 */
text {/* 2 使用变量 */color: yellow;
}
view .vie1 text {color: red;
}
/* 导入 */
view {color: green;
}
.main {/* 1 less中 支持 两种注释  多行  单行2 wxss 不能写 单行注释 因为 写了 和没写是一样！！！*//* font-size: 200px; */
}

less

/* 1 定义less变量 */
@color:yellow;
text{/* 2 使用变量 */color:@color;
}view{.vie1{text{color: red;}}
}/* 导入 */
@import "../../styles/reset.less";
view{color: @themeColor;
}
.main{/* 1 less中 支持 两种注释  多行  单行2 wxss 不能写 单行注释 因为 写了 和没写是一样！！！*//* font-size: 200px; */// font-size: 400px;
}

reset.less

@themeColor:green;

五. 长按文字复制,对文本内容进行解码 wxml

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

转存失败重新上传取消

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

转存失败重新上传取消

六. 图片 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;
}

七. 轮播图 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>

转存失败重新上传取消

八. 页面跳转wxml

<!-- 导航组件 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>

转存失败重新上传取消

九. 富文本标签 wxml

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

转存失败重新上传取消

// pages/demo12/demo12.js
Page({data: {// 1 标签字符串 最常用的// html:'<div class="tpl-wrapper" data-tpl-id="m_h_v31icon_1" style="margin-top: -10px;"><div view-name="DFrameLayout" style="display: flex; overflow: hidden; height: 160px; width: 375px; place-self: flex-start; position: relative;"><div view-name="DView" style="display: flex; overflow: hidden; background-color: rgb(255, 255, 255); margin-top: 9px; height: 100%; width: 100%; top: 0px; left: 0px; position: absolute;"></div><div view-name="HImageView" style="display: flex; overflow: hidden; height: 100%; width: 100%; position: absolute;"><div style="width: 100%; height: 100%; background-image: url(&quot;https://gw.alicdn.com/tps/TB155AUPpXXXXajXVXXXXXXXXXX-1125-480.png_.webp&quot;); background-repeat: no-repeat; background-position: center center; background-size: contain;"></div></div><div view-name="DLinearLayout" aria-label="天猫" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 10px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1Wxi2trsrBKNjSZFpXXcXhFXa-183-144.png_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫</div></div><div view-name="DLinearLayout" aria-label="聚划算" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 83.5px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://img.alicdn.com/tfs/TB10UHQaNjaK1RjSZKzXXXVwXXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">聚划算</div></div><div view-name="DLinearLayout" aria-label="天猫国际" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 157px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB11rTqtj7nBKNjSZLeXXbxCFXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫国际</div></div><div view-name="DLinearLayout" aria-label="外卖" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 230.5px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tps/TB1eXc7PFXXXXb4XpXXXXXXXXXX-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">外卖</div></div><div view-name="DLinearLayout" aria-label="天猫超市" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 304px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1IKqDtpooBKNjSZFPXXXa2XXa-183-144.png_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫超市</div></div><div view-name="DLinearLayout" aria-label="充值中心" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 10px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1o0FLtyMnBKNjSZFoXXbOSFXa-183-144.png_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">充值中心</div></div><div view-name="DLinearLayout" aria-label="飞猪旅行" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 83.5px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB15nKhtpkoBKNjSZFEXXbrEVXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">飞猪旅行</div></div><div view-name="DLinearLayout" aria-label="领金币" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 157px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1BqystrZnBKNjSZFrXXaRLFXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">领金币</div></div><div view-name="DLinearLayout" aria-label="拍卖" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 230.5px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1CMf4tlnTBKNjSZPfXXbf1XXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">拍卖</div></div><div view-name="DLinearLayout" aria-label="分类" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 304px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB18P98tyQnBKNjSZFmXXcApVXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">分类</div></div></div></div>'// 2 对象数组html:[{// 1 div标签 name属性来指定name:"div",// 2 标签上有哪些属性attrs:{// 标签上的属性 class  styleclass:"my_div",style:"color:red;"},// 3 子节点 children 要接收的数据类型和 nodes第二种渲染方式的数据类型一致 children:[{name:"p",attrs:{},// 放文本children:[{type:"text",text:"hello"}]}]}]}
})

转存失败重新上传取消

十. button 按钮开发 wxml


<!-- 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>

转存失败重新上传取消

// pages/demo13/demo13.js
Page({// 获取用户的手机号码信息getPhoneNumber(e){console.log(e);},// 获取用户个人信息getUserInfo(e){console.log(e);}
})

转存失败重新上传取消

十一. 小程序中的字体图标 icon wxml


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

转存失败重新上传取消

十二. radio 单选框 wxml


<!-- 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>

转存失败重新上传取消

// pages/demo15/demo15.js
Page({data: {gender: ""},handleChange(e){// 1 获取单选框中的值let gender=e.detail.value;// 2 把值 赋值给 data中的数据this.setData({// gender:gendergender})}
})

转存失败重新上传取消

九. 复选框 wxml

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

转存失败重新上传取消

// pages/demo16/demo16.js
Page({data: {list:[{id:0,name:"馃崕",value:"apple"},{id:1,name:"馃崌",value:"grape"},{id:2,name:"馃崒",value:"bananer"}],checkedList:[]},// 澶嶉€夋鐨勯€変腑浜嬩欢handleItemChange(e){// 1 鑾峰彇琚€変腑鐨勫閫夋鐨勫€?    const checkedList=e.detail.value;// 2 杩涜璧嬪€?    this.setData({checkedList})}
})

转存失败重新上传取消

十三. 自定义组件及传递数据 demo17.wxml

1.同级目录下右键点击新建目录创建components->及Tabs目录

mini-01\components\Tabs

2. 在Tabs目录下右键点击component 新建 component

3.新建完成

4. Tabs.js

// components/Tabs.js
Component({/*** 里面存放的是 要从父组件中接收的数据*/properties: {// 要接收的数据的名称// aaa:{//   // type  要接收的数据的类型 //   type:String,//   // value  默认值//   value:""// }tabs:{type:Array,value:[]}},/*** 组件的初始数据*/data: {// tabs},/* 1 页面.js 文件中 存放事件回调函数的时候 存放在data同层级下！！！2 组件.js 文件中 存放事件回调函数的时候 必须要存在在 methods中！！！*/methods: {hanldeItemTap(e){/* 1 绑定点击事件  需要在methods中绑定2 获取被点击的索引 3 获取原数组 4 对数组循环1 给每一个循环性 选中属性 改为 false2 给 当前的索引的 项 添加激活选中效果就可以了！！！5 点击事件触发的时候 触发父组件中的自定义事件 同时传递数据给  父组件  this.triggerEvent("父组件自定义事件的名称",要传递的参数)*///  2 获取索引const {index}=e.currentTarget.dataset;// 5 触发父组件中的自定义事件 同时传递数据给  this.triggerEvent("itemChange",{index});// 3 获取data中的数组// 解构  对 复杂类型进行结构的时候 复制了一份 变量的引用而已// 最严谨的做法 重新拷贝一份 数组，再对这个数组的备份进行处理，// let tabs=JSON.parse(JSON.stringify(this.data.tabs));// 不要直接修改 this.data.数据 // let {tabs}=this.data;// let tabs=this.data;// 4 循环数组// [].forEach 遍历数组 遍历数组的时候 修改了 v ，也会导致源数组被修改// tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);// this.setData({// tabs// })}}
})

5.Tabs.json

{"component": true,"usingComponents": {}
}

6.Tabs.wxml


<view class="tabs"><view class="tabs_title"><!-- <view class="title_item active">首页</view><view class="title_item">原创</view><view class="title_item">分类</view><view class="title_item">关于</view> --><view wx:for="{{tabs}}"wx:key="id"class="title_item {{item.isActive?'active':''}}"bindtap="hanldeItemTap"data-index="{{index}}">{{item.name}}</view></view><view class="tabs_content"><!-- slot 标签 其实就是一个占位符 插槽等到 父组件调用 子组件的时候 再传递 标签过来 最终 这些被传递的标签就会替换 slot 插槽的位置 --><slot></slot></view>
</view>

7.Tabs.wxss

.tabs{}
.tabs_title{display: flex;padding: 10rpx 0;
}
.title_item{flex: 1;display: flex;justify-content: center;align-items: center;
}
.active{color:red;border-bottom: 5rpx solid currentColor;
}
.tabs_content{}

8. 在需要使用的页面目录中 demo17.json 引入组件

{"usingComponents": {"Tabs":"../../components/Tabs/Tabs"}
}

9. demo17.wxml 引用自定义的组件 <Tabs> <T/abs>

<!-- 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>

转存失败重新上传取消

demo17.js

// pages/demo17/demo18.js
Page({/*** 页面的初始数据*/data: {tabs: [{id: 0,name: "首页",isActive: true},{id: 1,name: "原创",isActive: false},{id: 2,name: "分类",isActive: false},{id: 3,name: "关于",isActive: false}]},// 自定义事件 用来接收子组件传递的数据的handleItemChange(e) {// 接收传递过来的参数const { index } = e.detail;let { tabs } = this.data;tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);this.setData({tabs})}
})

转存失败重新上传取消

父组件向子组件传递数据:

子组件通过触发父组件事件来传递数据;

十四. 生命周期 wxml

<!--pages/demo18/demo18.wxml-->
<text>pages/demo18/demo18.wxml</text><navigator url="/pages/demo17/demo17" open-type="navigate">demo17
</navigator><navigator url="/pages/demo17/demo17" open-type="redirect">demo17 redirect
</navigator>
<view>1</view>
<view>2</view>
<view>3</view>
<view>4</view>
<view>5</view>
<view>6</view>
<view>7</view>
<view>8</view>
<view>9</view>
<view>10</view>
<view>11</view>
<view>12</view>
<view>13</view>
<view>14</view>
<view>15</view>
<view>16</view>
<view>17</view>
<view>18</view>
<view>19</view>
<view>20</view>
<view>21</view>
<view>22</view>
<view>23</view>
<view>24</view>
<view>25</view>
<view>26</view>
<view>27</view>
<view>28</view>
<view>29</view>
<view>30</view>
<view>31</view>
<view>32</view>
<view>33</view>
<view>34</view>
<view>35</view>
<view>36</view>
<view>37</view>
<view>38</view>
<view>39</view>
<view>40</view>
<view>41</view>
<view>42</view>
<view>43</view>
<view>44</view>
<view>45</view>
<view>46</view>
<view>47</view>
<view>48</view>
<view>49</view>
<view>50</view>
<view>51</view>
<view>52</view>
<view>53</view>
<view>54</view>
<view>55</view>
<view>56</view>
<view>57</view>
<view>58</view>
<view>59</view>
<view>60</view>
<view>61</view>
<view>62</view>
<view>63</view>
<view>64</view>
<view>65</view>
<view>66</view>
<view>67</view>
<view>68</view>
<view>69</view>
<view>70</view>
<view>71</view>
<view>72</view>
<view>73</view>
<view>74</view>
<view>75</view>
<view>76</view>
<view>77</view>
<view>78</view>
<view>79</view>
<view>80</view>
<view>81</view>
<view>82</view>
<view>83</view>
<view>84</view>
<view>85</view>
<view>86</view>
<view>87</view>
<view>88</view>
<view>89</view>
<view>90</view>
<view>91</view>
<view>92</view>
<view>93</view>
<view>94</view>
<view>95</view>
<view>96</view>
<view>97</view>
<view>98</view>
<view>99</view>
<view>100</view>

转存失败重新上传取消

// pages/demo18/demo18.js
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log("onLoad");// onLoad发送异步请求来初始化页面数据 },/*** 生命周期函数--监听页面显示*/onShow: function () {console.log("onShow");},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {console.log("onReady");},/*** 生命周期函数--监听页面隐藏*/onHide: function () {console.log("onHide");},/*** 生命周期函数--监听页面卸载 也是可以通过点击超链接来演示 * */onUnload: function () {console.log("onUnload");},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {console.log("onPullDownRefresh");// 页面的数据 或者效果 重新 刷新},/*** 页面上拉触底事件的处理函数* 需要让页面 出现上下滚动才行 */onReachBottom: function () {console.log("onReachBottom");// 上拉加载下一页数据 },/*** 用户点击右上角分享*/onShareAppMessage: function () {console.log("onShareAppMessage");},/*** 页面滚动 就可以触发 */onPageScroll(){console.log("onPageScroll");},/*** 页面的尺寸发生改变的时候 触发* 小程序 发生了 横屏竖屏 切换的时候触发 */onResize(){console.log("onResize");},/*** 1 必须要求当前页面 也是tabbar页面* 2 点击的自己的tab item的时候才触发*/onTabItemTap(){console.log("onTabItemTap");}
})

转存失败重新上传取消

.json 开启横屏竖屏开发

{"pageOrientation": "auto"
}

转存失败重新上传取消

全局文件

App.js

//app.js
App({//  1 应用第一次启动的就会触发的事件  onLaunch() {//  在应用第一次启动的时候 获取用户的个人信息 // console.log("onLaunch");// aabbcc// js的方式来跳转 不能触发 onPageNotFound// wx.navigateTo({//   url: '/11/22/33'// });},// 2 应用 被用户看到 onShow(){// 对应用的数据或者页面效果 重置 // console.log("onShow");},// 3 应用 被隐藏了 onHide(){// 暂停或者清除定时器 // console.log("Hide");},// 4 应用的代码发生了报错的时候 就会触发onError(err){// 在应用发生代码报错的时候，收集用户的错误信息，通过异步请求 将错误的信息发送后台去// console.log("onError");// console.log(err);},// 5 页面找不到就会触发 //  应用第一次启动的时候，如果找不到第一个入口页面 才会触发onPageNotFound(){// 如果页面不存在了 通过js的方式来重新跳转页面 重新跳到第二个首页// 不能跳到tabbar页面  导航组件类似  wx.navigateTo({url: '/pages/demo09/demo09' });  // console.log("onPageNotFound");}
})

app.json

{"pages": [  "pages/demo18/demo18","pages/demo17/demo17",       "pages/demo16/demo16",             "pages/demo15/demo15",    "pages/demo14/demo14",  "pages/demo13/demo13","pages/demo12/demo12","pages/demo11/demo11",     "pages/demo10/demo10",    "pages/demo09/demo09",  "pages/demo08/demo08",   "pages/demo07/demo07",   "pages/demo06/demo06",    "pages/demo05/demo05",   "pages/demo04/demo04",   "pages/demo03/demo03",   "pages/demo01/demo01", "pages/index/index",  "pages/img/img","pages/mine/mine", "pages/search/search","pages/demo02/demo02", "pages/logs/logs"],"window": {"backgroundTextStyle": "dark","navigationBarBackgroundColor": "#0094ff","navigationBarTitleText": "我的应用","navigationBarTextStyle": "black","enablePullDownRefresh": true,"backgroundColor": "yellow"},"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":"#ff5533","position":"top"},"sitemapLocation": "sitemap.json"
}

app.wxss

/**app.wxss**/
.container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding: 200rpx 0;box-sizing: border-box;
}

project.config.json

{"description": "项目配置文件","packOptions": {"ignore": []},"setting": {"urlCheck": true,"es6": false,"postcss": true,"minified": true,"newFeature": true,"autoAudits": false,"checkInvalidKey": true},"compileType": "miniprogram","libVersion": "2.7.7","appid": "wxad258ddc70c8662c","projectname": "mini-01","debugOptions": {"hidedInDevtools": []},"isGameTourist": false,"simulatorType": "wechat","simulatorPluginLibVersion": {},"condition": {"search": {"current": -1,"list": []},"conversation": {"current": -1,"list": []},"plugin": {"current": -1,"list": []},"game": {"currentL": -1,"list": []},"miniprogram": {"current": 0,"list": [{"id": -1,"name": "不存在的页面","pathName": "pages/de333mo17/de3333mo17","query": "","scene": null}]}}
}

sitemap.json

{"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html","rules": [{"action": "allow","page": "*"}]
}

.json 开启横屏竖屏开发

 "pageOrientation": "auto"