微信小程序开发

文章目录

微信小程序开发
- 一、微信小程序介绍
- 二、小程序结构目录
- - 1.小程序的文件结构
  - 2.基本项目目录
- 三、配置文件详解
- - 1.全局配置文件
  - 2.页面配置文件
  - 3.sitemap配置
- 四、WXML
- - 1、数据绑定
  - - 1.1.列表循环（类似于v-for指令）
    - 1.2block标签
    - 1.3条件渲染
  - 2.事件绑定
  - - 2.1输入框值改变事件
    - 2.2点击事件
- 五、WXSS
- - 1.尺寸单位
  - - 2.样式导入
    - 3.选择器
    - 4.WXSS使用less
- 六、常见组件
- - 1.view
  - 2.text
  - 3.image
  - 4.swiper，swiper-item
  - 5.navigator
  - 6.rich-text
  - 7.button
  - 8.icon
  - 9.radio
  - 10.checkbox
  - 11.自定义组件
- 七、小程序的生命周期
- - 1.小程序生命周期
  - 2.页面生命周期

一、微信小程序介绍

官方开发文档

注册小程序
获取APPID

下载开发工具

二、小程序结构目录

小程序框架

小程序框架提供了自己的视图描述语言 WXML 和 WXSS ，以及 JavaScript ，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑

1.小程序的文件结构

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

2.基本项目目录

三、配置文件详解

官方文档

1.全局配置文件

pages配置项
- 作用：配置页面信息
- 小技巧：在官方开发者工具中修改pages配置项，新增一个页面，开发者工具会自动为你创建页面所需的四个文件
```
"pages":["pages/index/index",  //这里不需要后缀名，该数组第一个即为应用默认显示页面"pages/logs/logs"
],
```

window配置项

作用:设置小程序的状态栏、导航条、标题、窗口背景色。

"window":{"backgroundTextStyle":"light",  //下拉 loading 的样式，仅支持 dark / light"navigationBarBackgroundColor": "#fff",  //导航栏背景颜色"navigationBarTitleText": "Weixin",  //导航栏标题文字内容"navigationBarTextStyle":"black",  //导航栏标题颜色，仅支持 black / white    "enablePullDownRefresh":true,  //是否开启全局的下拉刷新 默认false"backgroundColor":"#ffffff"  //窗口的背景色
},

tabBar配置项

作用：如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面

"tabBar": {   //小程序下方导航配置"list": [   //tab 的列表，最少 2 个、最多 5 个 tab {"pagePath": "pages/index/index",  //导航跳转到页面路径"text": "首页",  //导航标题"iconPath": "icon/_home.png",  //导航图标（未被选中）"selectedIconPath": "icon/home.png"  //被选中的图标},{"pagePath": "pages/search/search","text": "搜索","iconPath": "icon/_search.png","selectedIconPath": "icon/search.png"}],"color":"#bfa",  //tab 上的文字默认颜色，仅支持十六进制颜色"selectedColor":"#fff", //tab 上的文字选中时的颜色，仅支持十六进制颜色"backgroundColor":"#fff"  //tab 的背景色，仅支持十六进制颜色},

2.页面配置文件

在每个页面中分别配置其独特的样式属性等，具体方法参考上述全局配置及官方文档（xxx/xxx.json）

3.sitemap配置

四、WXML

1、数据绑定

1.1.列表循环（类似于v-for指令）

<view wx:for="{{list}}" vx:for-item="item" vx:for-index="index" vx:key="item.id">{{index}}---{{item.name}}</view>
<!-- 如果不指定vx:for-item="item" vx:for-index="index"，则默认为item和indexvx:key="*this"
-->

1.2block标签

相当于<template></template>

1.3条件渲染

wx:if wx:elif wx:else 相当于v-if/v-else-if/v-else

hidden 相当于 v-show

2.事件绑定

2.1输入框值改变事件

<input type="text" bindinput="test" />

data:{num:0
},
test(e){//与data平级//e.detail.value  获取输入框中的值//为data中的数据赋值this.setData({num:e.detail.value})
}

2.2点击事件

<button bindtap="add" data-addnum="{{3}}">+</button>
<!-- 注意：无法像Vue一样传参，需要使用自定义属性data-xxx -->

add(e){//获取自定义属性 e.currentTarget.dataset.addnumnum:this.data.num+e.currentTarget.dataset.addnum
}

五、WXSS

1.尺寸单位

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

2.样式导入

WXSS支持样式导入
可以与less中的导入混用
使用@import语句可以导入外联样式表，只支持相对路径

/*在.wxss文件中*/
@import "相对路径";

3.选择器

不支持 *

4.WXSS使用less

使用VScode插件 easy less
配置
```
"less.compile":{"outExt":".wxss"
}
```

六、常见组件

1.view

相当于<div></div>
属性：
- hover-class: 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
- hover-stop-propagation: 指定是否阻止本节点的祖先节点出现点击态 (即事件冒泡)

2.text

相当于<span></span>
特别的：里面只能嵌套自身
长按文字可以复制（只有这个标签有这个功能）
可以对空格、回车进行编码
属性：
- user-select ：文本是否可选，该属性会使文本节点显示为 inline-block
- decode ：是否解码

3.image

图片标签，image组件默认宽度320px、高度240px
支持懒加载

属性：

src：图片资源地址
mode：图片裁剪、缩放的模式

合法值	说明
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
top	类似于backgroud-position
…

webp : 默认不解析 webP 格式，只支持网络资源
lazy-load : 图片懒加载，在即将进入一定范围（上下三屏）时才开始加载

4.swiper，swiper-item

轮播图组件
swiper，swiper-item类似于ul和li的关系
swiper无法实现被内容撑开，根据原图比例，手动为其加宽高属性
属性：
- autoplay ：是否自动切换
- interval ：自动切换时间间隔
- circular ：是否采用衔接滑动
- indicator-dots ：是否显示面板指示点
- indicator-color ：指示点颜色
- indicator-active-color ：当前选中的指示点颜色

5.navigator

导航组件，类似超链接标签
块元素
属性：
- url ：当前小程序内的跳转链接
- target ：在哪个目标上发生跳转，默认当前小程序self/miniProgram
- open-type：跳转方式

6.rich-text

相当于v-html的功能
属性：
- nodes：节点列表/HTML String

7.button

属性：

size ：按钮的大小default/mini
type：按钮的样式类型primary/default/warn
plain：按钮是否镂空，背景色透明
disabled：是否禁用

open-type：微信开放能力！！！！！！！！！！！！！

合法值	说明
contact	打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息
share	触发用户转发
getPhoneNumber	获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息
getUserInfo	获取用户信息，可以从bindgetuserinfo回调中获取到用户信息（小程序插件中不能使用）
launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数
openSetting	打开授权设置页
feedback	打开“意见反馈”页面
chooseAvatar	获取用户头像，可以从bindchooseavatar回调中获取到头像信息

8.icon

图标字体
属性：
- type：icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
- size：icon的大小，单位默认为px，2.4.0起支持传入单位(rpx/px)，2.21.3起支持传入其余单位(rem 等)。
- color：icon的颜色，同css的color

9.radio

单选
属性：
- value：radio 标识。当该radio 选中时，radio-group 的 change 事件会携带radio的value
- checked：当前是否选中
- disabled：是否禁用
- color：radio的颜色，同css的color

10.checkbox

同上

11.自定义组件

创建
- 在components/xxx下创wxml,wxss,js,json四个文件
- 添加配置"component":true

使用组件

配置

"usingComponents":{"Test":"../../components/Test/Test"  //到文件夹即可}

使用
```
<Test></Test>
```

七、小程序的生命周期

1.小程序生命周期

//应用第一次启动
onLaunch(){}
//应用被用户看到
onShow(){}
//应用被隐藏
onHide(){}
//应用发送错误时
//可以通过这个回调，在应用发送错误时，收集错误信息，通过异步请求，将错误发送到后台去，便于问题修复，版本更新
onError(err){}
//页面找不到,第一次启动时，找不到入口页面，才会触发
onPageNotFound(){}

2.页面生命周期

onLoad()  //监听页面加载
onShow()  //监听页面显示
onReady() //监听页面初次渲染完成
onHide()  //监听页面隐藏
onUnload  //监听页面卸载
onPullDownRefresh()  //监听用户下拉
onReachBottom()  //监听页面上拉触底
onShareAppMessage()  //监听用户点击转发
onPageScroll()  //监听页面滚动
onResize()  //监听页面尺寸改变,横屏竖屏切换
onTabItemTap()  //当前是tab页时，监听tab点击

基于有Vue基础的微信小程序开发学习笔记相关推荐

微信小程序开发学习笔记一
微信小程序学习笔记(一) 环境使用及创建项目文件目录设置 JS文件环境使用及创建项目环境使用:微信开发者工具一个微信号只能开发一个微信小程序. 在微信小程序开发手册下载最新版本,学习不要bet ...
微信小程序开发学习笔记007--微信小程序项目01
技术交流QQ群:170933152 今天做项目小程序开发必备基础如何独立开发一个项目豆瓣电影需要的基础: HTML+CSS JavaScript 网络先理解需求-->了解项目流程,项目 ...
微信小程序开发学习笔记001--认识微信小程序,第一个微信小程序
第一天,认识微信小程序,第一个微信小程序 1.什么是微信小程序? 是h5网页嘛?不是微信张小龙说: 小程序是一种不需要下载安装即可使用的应用, 它实现了应用"触手可及"的梦想,用 ...
微信小程序开发学习笔记006--微信小程序组件详解02
技术交流QQ群:170933152 案例7:开关选择器案例8:各种图标案例9:页面跳转案例10:多媒体音视频案例11:嵌入地图案例12:画布:在上面可以画柱状图等等. 今天继续讲组件: 登录 ...
微信小程序开发学习笔记004--微信小程序语法结构
今天讲微信小程序的语法结构技术交流QQ群:170933152 数据绑定:把数据声明后显示在页面上渲染:条件渲染,循环渲染模板:某个小需求,模块封装成模板事件:点击一个按钮触发一个事件,发送一个 ...
微信小程序开发学习笔记002--微信小程序框架解密
1.今天内容比较多, 框架解密 • 目录结构 • 配置文件详解 • 逻辑层 • Api简介 ----------------------- 2.打开微信开发工具, 点击添加项目,选择无appid模 ...
微信小程序开发学习笔记(7.15)
scroll-view滚动视图的使用在微信开发者工具中封装好了这个功能. 首先要把几个view标签放入一个盒子,成为行元素.不压缩每一个view使得view溢出界面,这是可以滚动查看. 横向滚动视图 ...
微信小程序开发学习笔记2——安心食疗
一.数据绑定 1.1 渲染层和逻辑层小程序宿主环境我们称微信客户端给小程序所提供的环境为宿主环境.小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能. 小程序开发框架的目标是通过尽可 ...
微信小程序开发学习笔记005--微信小程序组件详解
先来再看看事件冒泡: 看个例子,新建项目库credemo05 case1.wxml <view bindtap="fn1"> outer <view bin ...

基于有Vue基础的微信小程序开发学习笔记