微信小程序

1.结构目录

• 小程序框架提供了自己的视图层描述语言WXML和WXSS，以及JavaScript，并在视图层与逻辑层间提供了数据传输和事件系统

1）小程序文件结构和传统web对比

结构	传统web	微信小程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	JavaScript	JavaScript
配置	无	JSON

从表格可看出，传统web是三层结构，微信小程序是四层结构，多了一层配置.json

2）基本项目目录

---

2.配置文件

• 一个小程序应用程序会包括最基本的两种配置文件。一种是全局的 app.json 和 页面自己的 page.json

1）全局配置app.json

• app.json是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。
• 普通快速启动项目里面的app.json配置

{"pages": ["pages/index/index","pages/logs/logs",],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "weChat","navigationBarTextStyle": "black"}
}

字段含义：

1.pages：用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

2.window：定义小程序所有页面的顶部背景颜色，文字颜色等。

3.完整的配置信息请参考 [app.json配置]

（1）pages字段

• 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

• 无扩展名：“pages/index/index”

• 在开发工具中，直接添加语句"pages/demo01/demo01"，保存后即可直接生成相应文件

• 详细参考

（2）window字段

• 定义小程序所有页面的顶部背景颜色，文字颜色等。

• navigationBar：导航栏

• “navigationBarTextStyle”：仅能为 black 或 white

• “enablePullDownRefresh”:true ==> 下拉刷新

• “backgroundTextStyle”: light / dark ==>下拉loading的样式

• 详细参考 [window]

（3）tabBar字段

• 底部 tab 栏的表现，最少要包括两项 list

  "tabBar": {"list": [{"pagePath": "pagePath","text": "text","iconPath": "iconPath","selectedIconPath": "selectedIconPath"}]}

1.pagepath：页面路径，即点击后跳转的也面。一定是存在于 pages 字段中

2.text：标题

3.iconPath：未选中图标路径。文件夹与pages同级

4.selectedIconPath：已选中的图标路径。文件夹与pages同级

• 颜色使用十六进制

2）页面配置page.json

这里的page.json用来表示页面目录下的page.json这类和小程序页面相关的配置

页面的配置只能设置app.json中部分window配置项的内容，页面中配置项会覆盖app.json的window中的相同配置项

属性	类型	默认值	描述
navigationBarBackground	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
disableScroll	Boolean	false	设置为true则页面整体不能上下滚动；只在页面配置中有效，无法在app.json中设置该项

3）sitemap配置

小程序根目录下的 sitemap.json文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个JSON对象，如果没有sitemap.json，则默认为所有页面都允许被索引。

详情参考 [sitemap.json]

---

3.模板语法

WXML(WeiXin Markup Language) 是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

• text：相当于web中的span标签，行内元素，不会换行
• view：相当于web的div标签，块级元素，会换行
• checkbox：相当于复选框

1）数据绑定

（1）普通写法

<view> {{msg}} </view>

Page({data: {msg:"hello mina",num:100000,isGirl:true,person:{name:"小红",age:17,height:162,weight:52}}
})

（2）组件属性

<view id="item-{{id}}"></view>

Page([data:{id:0}
])

（3）bool类型

• 字符串和花括号之间一定不要存在空格，否则会导致识别失败
• 错误示范：

2）运算

（1）三元运算

<view>{{ 10%2 === 0 ? '偶数' : '奇数'}}</view>

（2）算术运算

<view> {{1+1}}</view>

（3）逻辑判断

<view wx:if="{{length>5}}"> </view>

（4）字符串运算

<view>{{"hello"+"how are u"}}</view>

3）列表渲染

（1）wx:for

wx:for="{{数组或者对象}}"  wx:for-item="循环项的名称" wx:for-index="循环项的索引"

项的变量名默认为 item，wx:for-item 可以指定数组当前元素的变量名

下标变量名默认为 index，wx:for-index 可以指定数组当前下标的变量名

• wx:key=“唯一的值” 用来提高数组渲染的性能，其绑定的值有如下选择

①String类型，表示循环项中的唯一属性，如

list:[{id:0,name:"苹果"},{id:1,name:"香蕉"}]
wx:key="id"

②保留字 *this ，它的意思是item本身， *this 代表的必须是唯一的字符串和数组。

list:[1,2,3,4,5]
wx:key="*this"

• 注意：
  • 当出现数组的嵌套循环时，以下绑定的名称不要重名：(wx:for-item=“item” wx:for-index=“index”)
  • 默认情况下不写(wx:for-item=“item” wx:for-index=“index”)，小程序也会显示循环项的名称 和索引的名称 item和index
  • 只有一层循环时，(wx:for-item=“item” wx:for-index=“index”)可以省略
• 对象循环

wx:for="{{对象}}"  wx:for-item="对象的值" wx:for-index="对象的属性"

循环对象时，最好把item和index的名称修改为：(wx:for-item=“value” wx:for-index=“key”)

（2）block

渲染一个包含多节点的结构块block最终不会变成真正的dom元素

<block wx:for="{{[1,2,3]}}" wx:key="*this"><view>{{index}}:</view><view>{{item}}</view>
</block>

4）条件渲染

（1）wx:if

在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：

<view><view>条件渲染</view><view wx:if="{{true}}">显示</view><view wx:if="{{false}}">隐藏</view><view wx:if="{{false}}">1</view><view wx:elif="{{false}}">2</view><view wx:else>3</view>
</view>

（2）hidden

①直接在标签上加入属性 hidden

<view hidden>hidden1</view>

②hidden="{{condition}}"

<view hidden="{{true}}">hidden2</view>

• 注意：

  1.当标签不是频繁的切换显示，优先使用 wx:if：直接把标签从页面结构移除

  2.当标签频繁切换显示时，优先使用hidden：通过添加样式的方式来切换显示

  3.hidden不要与样式display一起使用

---

4.小程序事件的绑定

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

• 需要给input标签绑定input事件，绑定关键字bindinput
• 如何获取输入框的值？通过事件源对象来获取：e.detail.value
• 把输入框的值赋值到data中：

this.setData({num:e.detail.value})

• 加入点击事件

  ①bindtap

  ②无法在小程序中的事件直接传参

  ③通过自定义属性的方式来传递参数

  ④事件源中获取自定义属性

1）wxml

<input type="text" bindinput="handleInput"/>
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>{{num}}</view>

2）page

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

3）特别注意

1.绑定事件时不能带参数，不能带括号 以下为错误写法

<input bindinput="handleInput(100)" />

2.事件传值通过标签自定义属性的方式和value

---

5.样式WXSS

WXSS(WeiXin Style Sheets) 是一套样式语言，用于描述WXML的组件样式。

与CSS相比，WXSS扩展的特性有：

​ 1.响应式长度单位rpx

​ 2.样式导入

1）尺寸单位

rpx(responsive pixel)：可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素

• 建议：开发小程序时设计师可用iPhone6作为视觉稿的标准。

• 使用步骤：

  ①确定设计稿宽度pageWidth

  ②计算比例 750rpx=pageWidth px ，即 1px=750rpx/pageWidth。公式：width: calc(750rpx * width / page )

  ③在less文件中，只要把设计稿中的px => 750/pageWidth rpx 即可

2）样式导入

wxss直接支持样式导入功能，也可以和less中的导入混用。

使用**@import语句就可以导入外联样式表，只支持相对路径**

@import "../../styles/common.css"

3）选择器

小程序不支持通配符 * 因此以下代码无效

*{margin:0;padding:0;box-sizing:border-box;
}

目前支持的选择器有：

选择器	样例	样例描述
.class	.intro	选择所有拥有class="intro"的组件
#id	#firstname	选择拥有id="firsetname"的组件
element	view	选择所有view组件
element,element	view,checkbox	选择所有文档的view组件和所有的checkbox组件
nth-child(n)	view:nth-child(n)	选择某个索引的标签
::after	view::after	在view组件后边插入内容
::before	view::before	在view组件前边插入内容

4）小程序中使用less

原生小程序不支持less，其他基于小程序的框架大体都支持，如wepy,mpvue,taro等。但仅仅因为一个less功能而去引入一个框架，肯定是不可取的。因此可以用以下方式来实现。

1.编辑器是vscode
2.安装插件 easy less

3.在vscode的设置中加入如下配置

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

4.在要编写样式的地方，新建less文件，如index.less。然后正常编辑即可。

• 在vscode中新建less文件保存后，会自动生成wxss文件。

---

6.常见组件

1）view

代替原来的div标签

<view hover-class="h-class"></view>

2）text

1.文本标签

2.只能嵌套text

3.长按文字可以复制（只有该标签有这个功能）

4.可以对空格回车进行编码

属性名	类型	默认值	说明
user-select	Boolean	false	文本是否可选
decode	Boolean	false	是否解码

<text user-select="{{true}}" encode="{{false}}">小&nbsp;程&nbsp;序</text>

3）image

1.图片标签，image组件默认宽度320px、高度240px

2.支持懒加载

属性名	类型	默认值	说明
src	String		图片资源地址
mode	String	‘scaleToFill’	图片裁剪、缩放的模式
lazy-load	Boolean	false	图片懒加载

• mode有效值：13种模式，4种为缩放，9种为裁剪
• lazy-load会自己判断，当图片出现在视口上下三屏的高度之内时，自己开始加载图片

4）swiper

轮播图外层容器 swiper，每一个轮播项为 swiper-item

• swiper存在默认样式，width=100%，height无法实现由内容撑开
• image也存在默认的宽度和高度。eg：520 * 280

swiper{width: 100%;height: calc(100vw * 280 / 520);
}
image{width:100%;
}

由代码可知，height=100vw * image高度 / image宽度

5）navigator

导航组件，类似超链接标签

属性名	类型	默认值	说明
target	String	self	在哪个目标上发生跳转，默认当前小程序，可选值self/miniProgram
url	String		当前小程序内的跳转链接
open-type	String	navigate	跳转方式

6）rich-text

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

• nodes属性来实现：

  ①接收标签字符串

  ②接收对象数组

<rich-text nodes="{{html}}"></rich-text>

Page({data: {// html:''html:[{//div标签，name属性来指定name:"div",//标签上的属性 class styleattrs:{class:"my_div",style:"color:red;"},//子节点 children 要接收的数据类型和nodes第二种渲染方式的数据类型一致children:[{name:"p",attrs:{},children:[{type:"text",text:"hello"}]}]}]},
})

7）button

<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}">default
</button>

size的合法值

值	说明
default	默认大小
mini	小尺寸

type的合法值

值	说明
primary	绿色
default	白色
warn	红色

form-type的合法值

值	说明
submit	提交表单
reset	重置表单

open-type的合法值

• contact:需要在微信小程序的后台配置

• share:只能转发给微信朋友，不可以分享到朋友圈

• getPhoneNumber:结合一个事件来使用，不是企业的小程序账号，没有权限来获取用户的手机号码

  ①绑定一个事件bindgetphonenumber

  ②在事件的回调函数中，通过参数来获取信息

  ③获取到的信息，已经加密过。需要用户自己搭建小程序的后台服务器，在后台服务器中进行解析手机号码，返回小程序中即可见。

• getUserInfo:使用方法类似获取用户的手机号码。或直接获取，不存在加密的字段。

• openSetting:授权页面中只会出现用户曾经点击过的权限

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>

8）icon

属性	类型	默认值	必填	说明
type	String		是	icon的类型，有效值：success,success_no_circle,info,warn,waiting,cancele,download,search,clear
size	number/String	23	否	icon的大小
color	String		否	icon的颜色，同css的color

9）radio

• radio标签必须和父元素radio-group来使用
• value选中的单选框的值要显示，则需要给radio-group绑定change事件
• 可以通过color属性修改颜色

<radio-group bindchange="handleChange"><radio color="red" value="male">男</radio><radio value="female">女</radio>
</radio-group><view>您选中的是:{{gender}}</view>

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

10）checkbox

• checkbox标签必须和父元素checkbox-group一起使用

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

Page({data: {list:[{id:0,name:"												


											
【笔记】微信小程序基础相关推荐
	

						
微信小程序基础学习笔记Day01
		
学习目标:微信小程序基础Day01 今日目标: 能够知道如何创建小程序项目 能够清楚小程序项目的基本组成结构 能够知道小程序页面由几部分组成 能够知道小程序中常见的组件如何使用 能够知道小程序如何进行 ...
		
						
微信小程序基础学习笔记Day02
		
学习目标:微信小程序基础Day02 今日目标: 能够使用 WXML 模板语法渲染页面结构 能够使用 WXSS 样式美化页面结构 能够使用 app.json 对小程序进行全局性配置 能够使用 page. ...
		
						
更改微信小程序的基础版本库；更改uni-app小程序基础库；更改用户的微信小程序基础库最低版本；设置用户的微信小程序版本库；
		
需求场景:微信小程序不少API都有最低版本支持,为了避免不必要的麻烦,我们可以根据需要给小程序设置基础库最低版本,这样若用户使用的基础库版本低于设置的最低版本要求,则无法正常使用小程序,并提示更新微信 ...
		
						
《微信小程序-基础篇》初识微信小程序
		
大家好,好久不见了,前段时间各种原因分享不稳定,后面一段时间内参与了主站的原力计划,请麻烦各位支持一下,万分感谢- 本系列将从零开始介绍微信小程序的开发,介绍完基础以后会实际同步开发一个微信小程序的项 ...
		
						
微信小程序基础（全家福01）
		
微信小程序基础 目标 能够知道如何创建小程序项目 能够清除小程序项目的基本组成结构 能够知道小程序页面有几个部分组成 能够知道小程序中常见的组件如何使用 能够知道小程序如何进行协同开发和发布 讲解目录 ...
		
						
微信小程序基础库的问题
		
微信小程序基础库的问题 很多刚开始开发小程序的开发者经常会遇到在开发者工具的模拟器里面可以正常使用小程序的某个API,但是在预览(真机测试)时打开调试发现使用的API报错,但是开发工具里面的基础库是支 ...
		
						
微信小程序--基础内容（详解）（一）
		
一.常用标签 1.view 标签 view 标签是一个块级元素,类似于 div(小程序里面没有div标签),里面可以放任何内容或者插值表达式,如下所示: <view>这是view标签< ...
		
						
微信小程序 基础语法
		
微信小程序 基础语法 官网:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/ .wxml文件中 列表渲染 <view  ...
		
						
视频教程-2020最新微信小程序基础+实战精讲视频-微信开发
		
2020最新微信小程序基础+实战精讲视频 负责过多个软件项目的研发.设计和管理工作,拥有项目管理师认证.项目监理师中级认证.出版过的图书有<微信小程序开发图解案例教程><Axure  ...
		
						
小程序用户头像昵称获取规则调整公告及微信小程序基础库的问题
		
更新时间:2022年11月9日 由于 PC/macOS 平台「头像昵称填写能力」存在兼容性问题,对于来自低于2.27.1版本的访问,小程序通过 wx.getUserProfile 接口将正常返回用户头 ...
		
		

					
最新文章
	

						
结构化方法与面向对象方法之比较
		
						
AOI检测基本原理与设备构成
		
						
沁恒RISC-V MCU 为全国大学生智能汽车竞赛加速
		
						
各种资源思科、gns3……
		
						
ASP.NET Core使用功能开关控制路由访问
		
						
Linux Shell中有三种引号的用法
		
						
基于modelsim的十个Verilog入门试验程序（2）（JK触发器+环形计数器）—程序+测试代码+波形+结果分析
		
						
mysql 字符集支持情况
		
						
python处理遥感数据（NVDI计算、辐射校正）
		
						
【302】C# TreeView 控件使用说明
		
						
nbu备份nas文件服务器,NBU网络备份大全之远程配置备份策略
		
						
基于51单片机的交通灯控制设计
		
						
DSkin学习之DSkin.Forms
		
						
Windows系统如何删除远程桌面连接记录
		
						
十本经典教材带你入门Python编程
		
						
assert：python断言报错语句
		
						
【移动安全高级篇】————2、浅谈Android软件安全自动化审计
		
						
mysql存储过程转义字符_mysql存储过程转义字符
		
						
用java实现一个简单的网络聊天室
		
						
使用多种方法在Word方框中打对勾√和叉叉×
		
		
	

热门文章
	

									
Committer identity unknown *** Please tell me who you are...
			
						
Jenkins详细邮件配置
			
						
提问的艺术：如何通过提示词让 ChatGPT 更准确地理解你的问题？
			
						
Directional Adversarial Training for Recommender Systems
			
						
我的世界java版_我的世界Java版1.16.5
			
						
文件压缩支付加密方式
			
						
GIF出处是哪，如何快速截取GIF表情包
			
						
【好记性不如烂笔头】记一次奇怪的“找不到符号”问题
			
						
python股票价格预测_python用线性回归预测股票价格
			
						
Linux（三）进程，vim权限，网络