微信小程序原生常用语法 1
微信小程序的教程
学习目标
如何创建小程序项目
小程序项目的基本组成结构
小程序页面由几部分组成
小程序中常见的组件如何使用
小程序如何进行协同开发与发布
小程序的宿主环境
小程序标准开发模式
1.申请小程序开发账号
地址:https://mp.weixin.qq.com/
2.安装小程序开发者工具
3.创建和配置小程序项目
小程序项目的基本组成构建
pages 文件夹 用来存放所有小程序的页面 *主要学习
utils 文件夹 用来存放工具性质的模块
app.js 文件 小程序项目的入口文件 *主要学习
app.json文件 小程序项目的全局配置文件 *主要学习
app.wxss文件 小程序项目的全局样式文件
project.config.json文件 项目配置文件
project.prevate.config.json文件
sitemap.json文件 配置小程序及其页面是否允许被微信索引
.eslintrc.js文件 eslint 检测js语法的文件
小程序页面的组成部分
都存放在 pages 目录中,以单独的文件夹存在
每个页面由 4个基本文件组成,它们分别是:
①.js文件 (页面的脚本文件,存放页面的数据、事件处理函数等)
②.json文件 (当前页面的配置文件,配置窗口的外观、表现等)
JSON是一种数据格式,在实际开发中,JSON总是以配置文件的形式出现。小程序项目中也不例外:通过不同的 .json配置文件,可以对小程序项目进行不同级别的配置。
③.wxml文件 (页面的模板结构文件)
④.wxss文件 (当前页面的样式表文件)
app.json 文件
app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、窗口外观、界面表现、底部tab等。
app.json配置内容如下:
{// 用来记录当前小程序所有页面的路径"pages":["pages/index/index","pages/logs/logs"],// 全局定义小程序所有页面的背景色、文字颜色等"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle":"black"},// 全局定义小程序组件所有使用的样式版本"style": "v2",// 用来指明 sitemap.json 的位置"sitemapLocation": "sitemap.json"
}
project.config.json 文件
project.config.json 是 项目配置文件,用来记录我们对小程序开发工具所做的个性化配置
setting 中保存了编译相关的配置
projectname 中保存的是项目名称
appid 中保存的是小程序的账号ID
{"description": "项目配置文件","packOptions": {"ignore": [],"include": []},// 编译相关的配置"setting": {// 关闭 sitemap 的索引提示 添加这个代码 "checkSiteMap":false"checkSiteMap":false,"bundle": false,"userConfirmedBundleSwitch": false,"urlCheck": true,"scopeDataCheck": false,"coverView": true,"es6": true,"postcss": true,"compileHotReLoad": false,"lazyloadPlaceholderEnable": false,"preloadBackgroundData": false,"minified": true,"autoAudits": false,"newFeature": false,"uglifyFileName": false,"uploadWithSourceMap": true,"useIsolateContext": true,"nodeModules": false,"enhance": true,"useMultiFrameRuntime": true,"useApiHook": true,"useApiHostProcess": true,"showShadowRootInWxmlPanel": true,"packNpmManually": false,"enableEngineNative": false,"packNpmRelationList": [],"minifyWXSS": true,"showES6CompileOption": false,"minifyWXML": true,"babelSetting": {"ignore": [],"disablePlugins": [],"outputPath": ""}},"compileType": "miniprogram","libVersion": "2.19.4",// 小程序的账号ID"appid": "wx0684b193e107d6ad",// 项目名称"projectname": "miniprogram-92","condition": {},"editorSetting": {"tabIndent": "insertSpaces","tabSize": 4}
}
sitemap.json 文件
微信现已开放小程序内搜索,效果类似于 PC 网页的 SEO。sitemap.json文件用来配置小程序页面是否允许微信索引。
当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候,小程序的页面会将可能展示在搜索结果中。
{"desc": "关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html","rules": [{// 如果不想被微信小程序索引 就把allow 改为 disallow"action": "allow",// 所有的页面都可以通过 allow 被微信索引"page": "*"}]
}
小程序页面中的.json 配置文件
小程序中的每一个页面,可以使用.json文件来对本页面的窗口外观进行配置,页面中的配置项会覆盖 app.json 的 window 中相同的配置项
{"navigationBarBackgroundColor": "#055511", "navigationBarTitleText": "查看启动日志","usingComponents": {}
}
新建小程序页面
只需要在 app.json -> pages 中新增页面的存放路径,小程序开发者工具即可帮我们自动创建对应的文件
修改项目首页
只需要调整 app.json -> pages 数组中页面路径的前后顺序,即可修改项目的首页。小程序会把排在第一位的页面,当作项目首页进行渲染
WXML
WXML(WeiXin Markup Language) 是小程序框架设计的一套标签语言,用来构建小程序页面的结构,其作用类似于网页开发中的HTML。
与 HTML 的区别
① 标签名称不同
HTML 常用标签( div, span, img, a )
WXML 常用标签( view, text, image, navigator ) 对应上面的HTML标签
② 属性节点不同
<!-- html中的a 标签 属性href -->
<a href="#" > 超链接 </a><!-- WXML中的 navigator标签 属性url 对应 a 标签的href -->
<navigator url="/pages/home/home"></navigator>
③ 提供了类似于 Vue 中的模板语法
1.数据绑定
2.列表渲染
3.条件渲染
WXSS
WXSS(WeiXin Style Sheets) 是一套样式语法,用于描述 WXML 的组件样式,类似于网页开发中的 CSS.
与 css 的区别
① 新增了 rpx 尺寸单位
CSS 中需要手动进行像素单位换算,例如 rem
WXSS 在底层支持新的尺寸单位 rpx, 在不同大小的屏幕上小程序会自动进行换算
② 提供了全局的样式和局部样式
项目根目录中的 app.wxss 会作用于所有小程序页面
局部页面的 .wxss 样式仅对当前页面生效
③ WXSS 仅支持部分 CSS 选择器
.class 和 #id
element
并集选择器、后代选择器
::after 和 ::before 等伪类选择器
小程序中的 .js文件
一个项目仅仅提供界面展示是不够的,在小程序中,我们通过.js 文件来处理用户的操作。例如:响应用户的点击、获取用户的位置等等。
小程序中的JS文件分为三大类,分别是:
① app.js
是整个小程序项目的入口文件,通过调用 App() 函数来启动整个小程序
② 页面的 .js 文件
是页面的入口文件,通过调用 Page() 函数来创建并运行页面
③ 普通的 .js 文件
是普通的功能模块文件,用来封装公共的函数或属性供页面使用
小程序的宿主环境
宿主环境(host environment)指的是程序运行所必须的依赖环境。
Android 系统 和 iOS系统 是两个不同的宿主环境。安卓版的微信 App 是不能在 iOS 环境下运行的,所以,Android 是安卓软件的宿主环境,脱离了宿主环境的软件是没有任何意义的!
小程序宿主环境包含的内容
① 通信模型
② 运行机制
③ 组件
④ API
通信的主体
小程序中通信的主体是渲染层和逻辑层,其中:
① WXML 模板和 WXSS 样式工作在渲染层
② JS 脚本工作在逻辑层
小程序通信模型
小程序中的通信模型分为两部分:
① 渲染层 和 逻辑层 之间的通信
由微信客户端进行转发
② 逻辑层 和 第三方服务器之间的通信
由微信客户端进行转发
小程序启动的过程
① 把小程序的代码包下载到本地
② 解析 app.json 全局配置文件
③ 执行 app.js 小程序入口文件,调用 App() 创建小程序实例
④ 渲染小程序首页
⑤ 小程序启动完成
页面渲染的过程
① 加载解析页面的 .json 配置文件
② 加载页面的 .wxml 模块和 .wxss 样式
③ 执行页面的 .js 文件,调用 Page() 创建页面实例
④ 页面渲染完成
小程序组件
小程序中组件的分类
小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了 9 大类,分别是:
① 视图容器
② 基础内容
③ 表单组件
④ 导航组件
⑤ 媒体组件
⑥ map 地图组件
⑦ canvas 画布组件
⑧ 开放能力
⑨ 无障碍访问
常用的视图容器类组件
① view
普通视图区域
类似于 HTML 中的 div, 是一个块级元素
常用来实现页面的布局效果
② scroll-view
可滚动的视图区域
常用来实现滚动列表效果
③ swiper 和 swiper-item
轮播图容器组件 和 轮播图 item 组件
view组件 的基本使用
<!--pages/list/list.wxml-->
<view class="container1"><view>A</view><view>B</view><view>C</view>
</view>
/* pages/list/list.wxss */
.container1 view{width: 100px;height: 100px;text-align: center;line-height: 100px;
}
.container1 view:nth-child(1){background-color: lightskyblue;
}
.container1 view:nth-child(2){background-color: lightgreen;
}
.container1 view:nth-child(3){background-color: lightpink;
}
.container1 {display: flex;justify-content: space-around;
}
scroll-view 组件的基本使用
scroll-view 纵向滚动 需要在 标签中设置 scroll-y 属性 还需要设置固定高度
<!--pages/list/list.wxml-->
<scroll-view class="container1" scroll-y><view>A</view><view>B</view><view>C</view>
</scroll-view>
/* pages/list/list.wxss */
.container1 view{width: 100px;height: 100px;text-align: center;line-height: 100px;
}
.container1 view:nth-child(1){background-color: lightskyblue;
}
.container1 view:nth-child(2){background-color: lightgreen;
}
.container1 view:nth-child(3){background-color: lightpink;
}
.container1 {border: 1px solid black;width: 100px;height: 120px;
}
swiper 和 swiper-item 组件的基本使用
swiper标签中的 indicator属性 是添加轮播图下的小圆点
swiper标签的常用属性
indicator-dots boolean类型 默认值:false 是否显示面板指示点
indicator-color color类型 默认值:rgba(0,0,0,.3) 指示点颜色
indicator-active-color color类型 默认值:#000000 当前选中的指示点颜色
autoplay boolean类型 默认值:false 是否自动切换
interval number类型 默认值:5000 自动切换时间间隔
circular boolean类型 默认值:false 是否采用衔接滑动
<!--轮播图-->
<swiper class="swiper-container" indicator-dots><swiper-item><view class="item">A</view></swiper-item><swiper-item><view class="item">B</view></swiper-item><swiper-item><view class="item">C</view></swiper-item>
</swiper>
/* pages/list/list.wxss */
.swiper-container {/* 轮播图容器的高度 */height: 150px;
}
.item {height: 100px;line-height: 150px;text-align: center;
}
swiper-item:nth-child(1){background-color: lightskyblue;
}
swiper-item:nth-child(2){background-color: lightgreen;
}
swiper-item:nth-child(3){background-color: lightpink;
}
常用基础类容组件
① text
文本组件
类似于 HTML 中的span 标签,是一个行内元素
② rich-text
富文本组件
支持把 HTML 字符串渲染为 WXML 结构
text 组件的基本使用
只有 text 组件支持 selectable 的长按选中效果
通过 text 组件的 selectable 属性,实现长按选中文本内容的效果:
selectable属性 boolean类型 默认值:false 实现长按选中文本内容的效果
<view>手机号支持长按选中效果<text selectable>138xxxxxxxxx</text>
</view>
rich-text 组件的基本使用
通过 rich-text 组件的 nodes 属性节点,把 HTML 字符串渲染为对应的 UI 结构
<rich-text nodes="<h1 style='color:red;'>这是一个标题</h1>"></rich-text>
其他常用组件
① button
按钮组件
功能比 HTML 中的 button 按钮丰富
通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
② image
图片组件
image 组件默认宽度约 300px、高度约 240px
③ navigator
页面导航组件
类似于 HTML 中的 a 链接
button 按钮的基本使用
type 属性 指定按钮类型 值: primary 主色调(绿色) warn 警告按钮(红色) 默认是黑色
size 属性 设置按钮的大小 值:mini 迷你
plain 属性 设置 按钮是否 镂空 boolean类型 默认值:false
<!-- 默认颜色的按钮 -->
<button>点我</button>
<!-- type="primary" 绿色按钮 size="mini" 最小尺寸的按钮 设置了mini 就不在是独占一行了-->
<button type="primary" size="mini">主色调</button>
<!-- type="warn" 红色按钮 plain 镂空按钮-->
<button type="warn" plain>警告</button>
image 组件的基本使用
image 组件中的 mode 属性用来指定图片的裁剪和缩放模式,常用的 mode 属性值如下:
scaleToFill 默认值,缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
aspectFit 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
aspectFill 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
widthFix 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
heightFix 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变
<!-- 空图片 -->
<image></image>
<!-- 使用 src 指向图片路径 -->
<image src="/images/1.jpg" mode="widthFix"></image>
小程序 API
小程序中的 API 是由宿主环境提供的,通过这些丰富的小程序 API,开发者可以方便的调用微信提供的能力
例如:获取用户信息、本地存储、支付功能等。
小程序 API 的 3 大分类
① 事件监听 API
特点:以 on 开头,用来监听某些事件的触发
举例: wx.onWindowResize(function callback) 监听窗口尺寸变化的事件
② 同步 API
特点1: 以Sync 结尾的 API 都是同步 API
特点2: 同步 API 的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
举例:wx.setStorageSync(‘key’, ‘value’) 向本地存储中写入内容
③ 异步 API
特点:类似于 Jquery 中的 $.ajax(options) 函数,需要通过 success、fail、complete 接收调用的结果
举例:wx.request() 发起网络数据请求,通过 success 回调函数接收数据
数据绑定
数据绑定的基本原则
① 在data 中定义数据
② 在 WXML 中使用数据
在data 中定义页面的数据
在页面对应的 .js 文件中,把数据定义到 data 对象中即可
data: {// 字符串类型的数据info: 'init data',// 数组类型的数据msgList: [{msg: 'hello'},{msg: 'world'}]},
Mustache 语法的格式
把 data 中的数据绑定到页面中渲染,使用 Mustache 语法(双大括号)将变量包起来即可。
<view>{{ 要绑定的数据名称 }}</view>
应用场景:
1.绑定内容
2.绑定属性
3.运算(三元运算、算术运算等)
事件绑定
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。
小程序中常用的事件
类型 | 绑定方式 | 事件描述 |
---|---|---|
tap | bindtap 或 bind:tap | 手指触摸后马上离开,类似于HTML 中的 click 事件 |
input | bindinput 或 bind:input | 文本框的输入事件 |
change | bindchange 或 bind:change | 状态改变时触发 |
事件对象的属性列表
属性 | 类型 | 说明 |
---|---|---|
type | String | 事件类型 |
timeStamp | integer | 页面打开到触发事件所经过的毫秒数 |
target | Object | 触发事件的组件的一些属性值集合 |
currentTarget | Object | 当前组件的一些属性值集合 |
detail | Object | 额外的信息 |
touches | Array | 触摸事件,当前停留在屏幕中的触摸点信息的数组 |
changedTouches | Array | 触摸事件,当前变化的触摸点信息的数组 |
target 和 currentTarget 的区别
target 是触发该事件的源头组件,而 currentTarget 则是当前事件所绑定的组件。
点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层 view 的 tap 事件处理函数。
e.target 指向的是触发事件的源头组件,因此,e.target 是内部的按钮组件
e.currentTarget 指向的是当前正在触发事件的那个组件,因此,e.currentTarget 是当前的 view 组件
bindtap 的语法格式
在小程序中,不存在 HTML 中的 onclick 鼠标点击事件,而是通过 tap 事件来响应用户的触摸行为。
① 通过 bindtap,可以为组件定 tap 触摸事件,语法如下
<button type="primary" bindtap="btnTapHandler">提交</button>
② 在页面的 .js 文件中定义对应的事件处理函数,事件参数通过形参 event(一般简写成 e) 来接收:
Page({btnTapHandler(e){console.log(e)}
})
在事件处理函数中为 data 中的数据赋值
通过调用 this.setData(dataObject) 方法,可以给页面 data 中的数据重新赋值,示例如下
Page({data: {count: 0},// 修改 count 的值changeCount() {this.setData({count: this.data.count + 1})}
})
事件传参
小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。
可以为组件提供 data-* 自定义属性传参,其中 * 代表的是参数的名字,示例代码如下:
<button type="primary" bindtap="btnTapHandler" data-info="{{ 2 }}">事件传参</button>
最终:
info 会被解析为 参数的名字
数值 2 会被解析为 参数的值
在事件处理函数中,通过 event.target.dataset.参数名 即可获取到具体参数的值,示例代码如下:
btnTapHandler(e){// dataset 是一个对象,包含了所有通过 data-* 传递过来的参数项console.log(e.target.dataset)// 通过 dataset 可以访问到具体参数的值console.log(e.target.dataset.info)
}
bindinput 的语法格式
在小程序中,通过 input 事件来响应文本框的输入事件,语法格式如下:
① 通过 bindinput,可以为文本框绑定输入事件:
<input bindinput="inputHandler"></input>
e.detail.value 接收 input框内输入的值
e.detail.cursor 接收 input框内输入的值的总长度
e.detail.keyCode 接收 input框内 当前输入的值的 keyCode 码
实现文本框和 data 之间的数据同步
首先给input框添加 value=“{{ msg }}” 的动态属性
<input bindinput="inputHandler" value="{{msg}}"></input>
Page({data: {msg: ''},inputHandler(e){this.setDate({msg: e.detail.value})}
})
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="{{ type === 1 }}"><view>home</view><view>to</view><view>from</view>
</block>
<block wx:elif="{{ type === 2 }}"><view>a</view><view>b</view><view>c</view>
</block>
<block wx:else><view>1</view><view>2</view><view>3</view>
</block>
注意:< block > 并不是一个组件,它只是一个包裹性质的容器,不会在页面中做任何渲染。
hidden 条件渲染
在小程序中,直接使用 hidden=“{{ condition }}” 也能控制元素的显示与隐藏:
<view hidden="{{ type !== 1 }}">当条件为true,将隐藏这个view,否则显示</view>
wx:if 与 hidden 的对比
① 运行方式不同
wx:if 以动态创建和移除元素的方式,控制元素的展示与隐藏
hidden 以切换样式的方式 (display: none/block;),控制元素的显示与隐藏
② 使用建议
频繁切换时,建议使用 hidden
控制条件复杂时,建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换
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="itemName"> 索引是:{{idx}} 当前项是:{{itemName}}</view>
wx:key 的使用
类似于 Vue 列表渲染中的 :key,小程序在实现列表渲染时,也建议为渲染出来的列表项目指定唯一的 key 值,从而提高渲染的效率,示例代码如下:
<view wx:for="{{ array }}" wx:key="id"> 索引是:{{index}} 当前项是:{{item.name}}</view>
wxss 模板样式
WXSS 与 CSS 的关系
WXSS 具有 CSS 大部分特性,同时,WXSS 还对 CSS 进行了扩充以及修改,以适应微信小程序的开发。
与 CSS 相比,WXSS 扩展的特性有:
rpx 尺寸单位
@import 样式导入
rpx 尺寸单位
rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位。
rpx 的实现原理:
rpx 的实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx 把所有设备的屏幕,在宽度上 等分为 750份 (即:当前屏幕的总宽度为750rpx)。
在较小的设备上,1rpx 所代表的宽度较小
在较大的设备上,1rpx 所代表的宽度较大
小程序在不同设备上运行的时候,会自动把 rpx 的样式 单位换算成对应的像素单位来渲染,从而实现屏幕适配。
rpx 与 px 之间的单位换算
在 iphone6上,屏幕宽度为375px,共有 750 个物理像素,等分为 750 rpx。则:750rpx = 375px = 750 物理像素
1rpx = 0.5px = 1 物理像素
官方建议:开发微信小程序时,设计师可以用 iphone6 作为 视觉稿的标准。
WXSS 样式导入
使用WXSS 提供的 @import 语法,可以导入外联的样式表。
@import 的语法格式
@import 后跟需要导入的外联样式表的相对路径,用; 表示语句结束。示例如下:
@import "/common/common.wxss";
WXSS 全局样式
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。
WXSS 局部样式
在页面的 .wxss 文件中定义的样式为 局部样式,只作用于当前页面。
注意:
① 当局部样式和全局样式冲突时,根据就近原则,局部样式会覆盖全局样式
② 当局部样式的权重大于 或 等于 全局样式的权重时,才会覆盖全局样式。
全局配置
全局配置文件及常用的配置项
小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下:
① pages
记录当前小程序所有页面的存放路径
② window
全局设置小程序窗口的外观
③ tabBar
设置小程序底部的 tabBar 效果
④ style
是否启用新版的组件样式
window窗口的组成部分
navigationBar 导航栏区域
Background 背景区域 默认不可见,下拉才显示
页面的主体区域 用来显示 wxml 中的布局
window节点常用的配置项
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
navigationBarTitleText | String | 字符串 | 导航栏标题文字内容 |
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色,如 #000000 |
navigationBarTextStyle | String | white | 导航栏标题颜色,仅支持black/white |
backgroundTextStyle | String | dark | 下拉 loading 的样式,仅支持 dark/ light |
enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新 |
onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距离页面底部距离,单位为px |
backgroundColor | HexColor | #ffffff | 窗口的背景色 |
tabBar
tabBar 是移动端应用常见的页面效果,用于实现多页面得到快速切换。小程序中通常将其分为:
底部 tabBar
顶部 tabBar
注意:
tabBar 中只能配置 最少2个、最多5个tab页签
当渲染顶部 tabBar 时,不显示 icon,只显示文本
backgroundColor: tabBar 的背景颜色
selectedIconPath: 选中时的图片路径
borderStyle: tabBar 上边框的颜色
iconPath: 未选中时的图片路径
selectedColor: tab 上的文字选中时的颜色
color: tab 上文字的默认(未选中)颜色
tabBar 节点的配置项
在window 同级下 设置 tabBar
属性 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
position | String | 否 | bottom | tabBar 的位置,仅支持 bottom/top |
borderStyle | String | 否 | black | tabBar 上边框的颜色,仅支持 black/white |
color | HexColor | 否 | tab 上文字的默认(未选中)颜色 | |
selectedColor | HexColor | 否 | tab 上的文字选中时的颜色 | |
backgroundColor | HexColor | 否 | tabBar 的背景色 | |
list | Array | 是 | tab 页签的列表,最少2个、最多5个tab |
每一个 tab 项的配置选项
写在 tabBar 的 list 里面 用数组包行类的形式增加
属性 | 类型 | 必填 | 描述 |
---|---|---|---|
pagePath | String | 是 | 页面路径,页面必须在pages 中预先定义 |
text | String | 是 | tab 上显示的文字 |
iconPath | String | 否 | 未选中时的图片路径; 当 position 为 top时,不显示 icon |
selectedIconPath | String | 否 | 选中时的图标路径; 当 position 为top 时,不显示 icon |
页面配置文件的作用
小程序中,每个页面都有自己的 .json 配置文件,用来对当前页面的窗口外观、页面效果等进行配置。
页面配置中常用的配置项
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 | 当前页面导航栏背景颜色,如#000000 |
navigationBarTextStyle | String | white | 当前页面导航栏标题颜色,仅支持 black/white |
navigationBarTitleText | String | 当前页面导航栏标题文字内容 | |
backgroundColor | HexColor | #ffffff | 当前页面窗口的背景色 |
backgroundTextStyle | String | dark | 当前页面下拉 loading 的样式,仅支持 dark/light |
enablePullDownRefresh | Boolean | false | 是否为当前页面开启下拉刷新的效果 |
onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为px |
网络数据请求 get和post请求
出于安全性方面的考虑,小程序官方对数据接口的请求做出了如下两个限制:
① 只能请求 HTTPS 类型的接口
② 必须将接口的域名添加到信任列表中
添加域名接口的配置步骤
登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名
注意:
① 域名只支持 https 协议
② 域名不能使用 IP 地址或 localhost
③ 域名必须经过 ICP 备案
④ 服务器域名一个月内最多可申请 5 次修改(所谓的49次 是假的)
发起 GET 请求
调用微信小程序提供的 wx.request() 方法,可以发起 GET 数据请求,示例代码如下:
wx.request({// 请求的接口地址,必须基于 https 协议url: 'https://www.https://api-ugo-web.itheima.net/api/get',method: 'GET', // 请求的方式data: {name: 'zs',age: 22},success: (res) => {// 请求成功之后的回调函数console.log(res)}
})
发起 POST 请求
调用微信小程序提供的 wx.request() 方法,可以发起 POST 数据请求,示例代码如下:
wx.request({// 请求的接口地址,必须基于 https 协议url: 'https://api-ugo-web.itheima.net/api/public/v1/users/wxlogin',method: 'POST', // 请求的方式data: {encryptedData: 'a',rawData: 'b',iv: 'c',signature: 'd',code: 'e'},success: (res) => {// 请求成功之后的回调函数console.log(res)}
})
微信小程序原生常用语法 1相关推荐
- 微信小程序原生开发功能合集一:微信小程序开发介绍
一.专栏介绍 本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...
- 微信小程序原生开发 记录
遇到类似 ref 交互的 情况 所需写法 // wxml<wux-calendar id="wux-calendar" /> // js Page({data: {}, ...
- 【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
开始前,请先完成首页的开发,详见 [微信小程序-原生开发]实用教程05-首页(含自定义调试模式.插入图片.图文排版.底部留白.添加本地图片) https://blog.csdn.net/weixin_ ...
- 微信小程序原生开发集成IM服务出现无法找到模块“tim-wx-sdk”的声明文件问题解决
微信小程序原生开发集成IM服务出现无法找到模块"tim-wx-sdk"的声明文件问题解决: 通过npm命令安装配置: 在终端进入到小程序项目根目录执行:npm install 未初 ...
- 微信小程序原生接入腾讯云im(单聊,列表,聊天界面,自定义消息,自动回复)
微信小程序原生接入腾讯云im(单聊,列表,聊天界面,自定义消息,自动回复) 发送图片语音消息传送→ 文章目录 1.项目需求 2.参考文档 3.效果图 4.初始化 集成SDK 5.登录 6.会话列表 7 ...
- 微信小程序原生上传图片封装
资源参考 组件免费下载地址 概述 微信小程序原生上传图片功能封装,具体使用根据个人情况而定. 组件自定义属性与方法描述 isShow:布尔值,默认为true true:不显示上传图标 false:显示 ...
- 【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
可在系列教程的基础上继续开发,也可以单独使用 [微信小程序-原生开发]系列教程 效果预览 代码实现 点击触发生成海报 在活动详情页,指定点击某图标/按钮,触发跳转到生成海报的页面 pages\comp ...
- 微信小程序 原生开发 实现弹窗遮罩层 并且在遮罩层内使用scroll-view实现滚动内容(包括图片)
微信小程序 原生开发 实现弹窗遮罩层 并且在遮罩层内可以滚动内容(包括图片) 效果图 这里的遮罩层内容由两张图片构成 底图+内部内容 实现代码 wxml 使用云开发的存储,自己开发的时候换掉src即可 ...
- 微信可以识别哪些HTML语言,微信小程序一些常用标签与HTML的对应关系
参考地址: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/ 微信小程序中的常用标签: view(视图容器). ...
最新文章
- jieba分词的使用
- Linux进程实践(4) --wait避免僵尸进程
- 微软 Mozilla高管评Safari Windows版
- 快速查找无序数组中的第K大数?
- linux提升网络实时性,通过调整Linux内核参数提升网络性能
- Linux配置Nginx与PHP-FPM出现[error] 80143#0: *1 connect() failed (111: Connection refused) while connectin
- Eclipse修改web项目的jdk编译版本
- 车道线检测的学习笔记
- UE4之cmd调用函数
- 【java.lang.UnsupportedClassVersionError】问题的解决方法
- maven安装和eclipse集成
- 教你使用Wine在Linux上运行Windows软件
- BAT[阿里、百度、腾讯]等互联网公司数据结构面试题(一) python分析实现
- 屏幕镜像显示无法连接服务器,Ios屏幕镜像连不上怎么办?
- 【Atomikos】分布式事务简单示例
- Refused to execute script from 'http://localhost:8080/login' because its MIME type ('text/html') is
- Win11 U盘驱动异常怎么调整为正常?
- Web前端 vs Web后端 区别是什么
- 解决mac终端放大字体重启又变小了
- (UTF-8)ASP汉字转拼音函数(附Access数据库)