小程序之开发教程(二)
四,基本语法
小程序的模板语法约等于vue的模板语法
☘️ 1,文本渲染
{{ msg }} 可以执行简单的js表达式 {{ 2+3 }} {{ msg.length }}
☘️ 2,条件渲染
wx:if="{{}}" <!--注意:这里给Vue有所不同,这里引入变量也需要加{{ }} --> wx:elif="{{}}" <!--注意:这里给Vue有所不同,这里引入变量也需要加{{ }} --> wx:else
☘️ 3,列表渲染默认数组的当前项的下标变量名默认为
index
,数组当前项的变量名默认为 item
wx:for="{{ list }}" wx:key="index" {{ item }} {{ index }}
☘️ 4,自定义列表渲染
自定义定义item与index的名称
使用wx:for-item
可以指定数组当前元素的变量名
使用wx:for-index
可以指定数组当前下标的变量名
wx:for="{{list}}}" wx:for-item="myitem" wx:for-index="myidx" {{ myidx }} {{ myitem }}
☘️ 5,导入(不常用)
-
require:js代码中引用其他js模块代码
const App = require('./App');
-
include:wxml文件中引用template模板文件。 (只能用在wxml文件中)
被引用文件(header.wxml)
<!-- header.wxml --> <view> header </view>
引用文件(index.wxml)
<!-- index.wxml --> <include src="header.wxml"/> <view> body </view>
-
import:既可以在js代码中导入模块代码,又可以在wxml或wxss文件中导入模块文件。
模板文件(item.wxml)
<!-- item.wxml --> <template name="item"> <text>{{text}}</text> </template>
使用模板文件的文件(index.wxml)
<import src="item.wxml"/> <template is="item" data="{{text: 'forbar'}}"/>
总结:
☘️ 6,wxss
WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。
1、新增了尺寸单位。在写 CSS 样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ,开发者可以免去换算的烦恼,只要交给小程序底层来换算即可,由于换算采用的浮点数运算,所以运算结果会和预期结果有一点点偏差。
2、提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同,你可以写一个 app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。
3、此外 WXSS 仅支持部分 CSS 选择器
tips: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。规定屏幕宽为750rpx。设计师设计稿为750的
WXSS支持的选择器:
1、目前支持的选择器有:(官方公布)
2、实际可用的wxss选择器
测试伪类选择器:
.test::after { content:"111"; }
⚠️ 注意:微信小程序中是没有hover事件的,建议使用active,点击时的状态
.test:active { background-color: red; }
wxss的样式导入:
使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。这样可以达到一些样式的公用,非常方便。
@import "common.wxss"; .middle-p { ·padding:15px; }
☘️ 7,事件
事件绑定:
事件分为冒泡事件和非冒泡事件:
1、冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
2、非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
事件的捕获阶段:
捕获阶段位于冒泡阶段之前,且在捕获阶段中,事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时,可以采用capture-bind、capture-catch关键字,后者将中断捕获阶段和取消冒泡阶段。
事件对象:
如无特殊说明,当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。
☘️ 8,内置组件
<!-- 相当于div --> <view>相当于div</view> <!-- 相当于span --> <text>相当于span</text> <!-- 按钮 --> <button>相当于按钮</button> <!-- 输入框 --> <input type="text"/>
☘️ 9,事件的传参
<button data-msg="xxx" bindtap="tapHd">
获取事件的参数 e.target.dataset.msg
☘️ 10,表单的绑定
在 WXML 中,普通的属性的绑定是单向的。例如:
<input value="{{value}}" />
如果使用 this.setData({ value: ‘leaf’ }) 来更新 value ,this.data.value 和输入框的中显示的值都会被更新为 leaf ;但如果用户修改了输入框里的值,却不会同时改变 this.data.value 。
如果需要在用户输入的同时改变 this.data.value ,需要借助简易双向绑定机制。
此时,可以在对应项目之前加入 model: 前缀:
<input model:value="{{value}}" />
这样,如果输入框的值被改变了, this.data.value 也会同时改变。同时, WXML 中所有绑定了 value 的位置也会被一同更新, 数据监听器 也会被正常触发。
1. 第一种方式:通过 input 的 bindinput 事件实现
这里建议吧 bindinput 换成 bindblur 在输入框失去光标时再去赋值。
官方解释:setData 都会触发逻辑层虚拟 DOM 树的遍历和更新,也可能会导致触发一次完整的页面渲染流程。
WXML 代码
<view class="my-page"> <form catchsubmit="formSubmit"> <!-- 昵称 --> <view class="form-item"> <view class="form-label">昵称</view> <view class="form-input"> <input type="text" value="{{ form.nickName }}" data-prop="form.nickName" bindinput="BindInput" placeholder="请输入昵称" /> </view> </view> <!-- 简介 --> <view class="form-item"> <view class="form-label">简介</view> <view class="form-input"> <input type="text" value="{{ form.introduce }}" data-prop="form.introduce" bindinput="BindInput" placeholder="请输入简介" /> </view> </view> <!-- 提交 --> <view class="btn-area"> <button style="margin: 30rpx auto" type="primary" formType="submit">Submit</button> </view> </form> </view>
TS 代码
Page({ /** * 页面的初始数据 */ data: { form: { nickName: '' } }, /** * 相关方法 */ formSubmit() { console.log(this.data.form) },
BindInput(e: any) { this.setData({ [`${e.currentTarget.dataset.prop}`]: e.detail.value }) }, })
WXSS样式
.form-item { display: flex; justify-content: flex-start; align-items: center; margin: 0px 15px; padding: 0px 30px; border-bottom: 1px solid lightgray; } .form-label { width: 50px; height: 40px; line-height: 40px; }
输出结果
2. 第二种方式:通过 model:value 实现
WXML 代码
<view class="my-page"> <form catchsubmit="formSubmit"> <!-- 昵称 --> <view class="form-item"> <view class="form-label">昵称</view> <view class="form-input"> <input name="nickName" type="text" model:value="{{ form.nickName }}" placeholder="请输入昵称" /> </view> </view> <!-- 简介 --> <view class="form-item"> <view class="form-label">简介</view> <view class="form-input"> <input name="introduce" type="text" model:value="{{ form.introduce }}" placeholder="请输入简介" /> </view> </view> <!-- 提交 --> <view class="btn-area"> <button style="margin: 30rpx auto" type="primary" formType="submit">Submit</button> </view> </form> </view>
TS 代码
Page({ /** * 页面的初始数据 */ data: { form: { nickName: '', introduce: '', } }, /** * 相关方法 */ formSubmit(e: any) { this.setData({ form: e.detail.value }) console.log(this.data.form); }, })
WXSS 代码
.my-page { padding: 30rpx; } .form-item { display: flex; align-items: center; height: 80rpx; line-height: 80rpx; border-bottom: 1rpx solid #eee; } .form-item .form-label { height: 100%; width: 180rpx; text-align: center; } .form-item .form-input { width: calc(100% - 180rpx); } .form-item .form-input input { width: 100%; height: 80rpx; }
输出结果
☘️ 11,内置的api
显示提示
wx.showToast
本地存储
wx.setStorageSync(key,value)
本地取
wx.getStorageSync(key)
wx.request 网络请求
☘️ 12,生命周期
/*生命周期函数--监听页面加载*/ onLoad() {}, /*生命周期函数--监听页面初次渲染完成*/ onReady() {}, /*生命周期函数--监听页面显示*/ onShow() {}, /*生命周期函数--监听页面隐藏*/ onHide() {}, /*生命周期函数--监听页面卸载*/ onUnload() {}, /*页面相关事件处理函数--监听用户下拉动作*/ onPullDownRefresh() {}, /*页面上拉触底事件的处理函数*/ onReachBottom() {}, /* 用户点击右上角分享*/ onShareAppMessage() {}
五,页面切换
☘️ 1,< navigator></ navigator >标签
这是最常见的一种跳转方式,相当于html里的a标签.但需要注意的是 该方法不能跳转tabbar页面.
格式为:
<navigator url="........"></navigator> <navigator url="/pages/event/event">前往event</navigator>
☘️ 2,wx.navigateTo.
通过构造js函数,在函数中调用该接口可实现页面跳转的效果.但该接口同样不能跳转tabbar页面.跳转后左上角有返回小箭头,点击可返回原本页面.
格式为:
//<!**wxml文件**> <view class="select_calculator" bindtap="next_calculator">
//js文件 next_calculator:function () { wx.navigateTo({ url: '/pages/calculator/calculator', }) }
☘️ 3,wx.redirectTo.
关闭当前页面,跳转到应用内的某个页面(不能跳转tabbar页面)。类似于html中的 window.open(‘…’);
跳转后左上角出现返回小箭头,点击后可返回原本页面.
格式为:
<view> <navigator open-type="redirect" url="/pages/event/event">跳转并替换</navigator> </view>
☘️ 4,wx.switchTab.
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面;该方法只能跳转tabbar页面.
post_calculator:function () { wx.switchTab({ url: '/pages/calculator/calculator', }) },
☘️ 5,wx.reLaunch.
关闭所有页面,打开到应用内的某个页面。 跟 wx.redirectTo 一样左上角不会出现返回箭头,但两者却不完全相同;
格式为:
<view> <navigator open-type="reLaunch">重启</navigator> </view>
六,tabBar 全局配置
☘️ 1. tabBar 是移动端应用常见的页面效果, 用于实现多页面 的快速切换 。
小程序中通常将其分为:底部 tabBar、顶部 tabBar
注意:
tabBar中只能配置最少 2 个、最多 5 个 tab 页签
当渲染顶部 tabBar 时,不显示 icon,只显示文本
☘️ 2. tabBar 的 6 个组成部分
① backgroundColor: tabBar 的背景色
② selectedIconPath: 选中时的图片路径
③ borderStyle: tabBar 上边框的颜色
④ iconPath: 未选中时的图片路径
⑤ selectedColor: tab 上的文字选中时的颜色
⑥ color: tab 上文字的默认(未选中)颜色
☘️ 3. tabBar 节点的配置项
☘️ 4. 每个 tab 项的配置选项
☘️ 5,全局配置 - 案例:配置 tabBar
配置 tabBar 选项
① 打开 app.json 配置文件,和 pages、window 平级,新增 tabBar 节点
② tabBar 节点中,新增 list 数组 ,这个数组中存放的,是每个 tab 项的配置对象
③ 在 list 数组中, 新增每一个 tab 项的配置对象 。对象中包含的属性如下: pagePath 指定当前 tab 对应的页面路径 【 必填 】
text 指定当前 tab 上按钮的文字【 必填】
iconPath 指定当前 tab 未选中时候的图片路径【可选】
selectedIconPath 指定当前 tab 被选中后高亮的图片路径【可选】
代码如下:
{ "pages": [ "pages/hone/hone", "pages/Profile/Profile", "pages/experience/experience", "pages/skill/skill", "pages/index/index", "pages/logs/logs" ], "tabBar": { "color": "#777", "selectedColor": "#1cb9ce", "list": [ { "pagePath": "pages/hone/hone", "text": "简历信息", "iconPath": "/pages/img/icon08.png", "selectedIconPath": "/pages/img/icon08.png" }, { "pagePath": "pages/skill/skill", "text": "个人技能", "iconPath": "/pages/img/icon04.png", "selectedIconPath": "/pages/img/icon04.png" }, { "pagePath": "pages/experience/experience", "text": "项目经历", "iconPath": "/pages/img/icon02.png", "selectedIconPath": "/pages/img/icon02.png" }, { "pagePath": "pages/Profile/Profile", "text": "自我评价", "iconPath": "/pages/img/icon06.png", "selectedIconPath": "/pages/img/icon06.png" } ] }, "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle": "black" }, "style": "v2", "sitemapLocation": "sitemap.json" }