微信小程序

微信小程序文档地址:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

一. 文件结构

1.1 pages

每个页面都有四个文件
- *.js 对应web的js
- *.json 配置文件对应每个页面的样式
- *.wxml 对应web的html页面
- *.wxss 对应web的css样式

1.2 utils

第三方工具的js,可以删除

1.3 icon

存放图片阿里巴巴开源图标地址 https://www.iconfont.cn/home/index

1.4 app.js

项目的全局入口文件

1.5 app.json

全局配置文件

pages为页面集合,第一个为首页,写完路径会自动创建对应目录

"pages":[
  "pages/demo1/demo1",//第一个为首页
  "pages/index/index",
  "pages/demo2/demo2",
  "pages/demo3/demo3",
  "pages/logs/logs"
],

window设置小程序外观样式

 "window":{
    "backgroundTextStyle":"dark",//下拉刷新图标颜色 dark/light
    "navigationBarBackgroundColor": "#0094ff",//顶部颜色
    "navigationBarTitleText": "我的第一个小程序",//应用标题
    "navigationBarTextStyle":"white",//字体颜色 只能黑(black)白
    "enablePullDownRefresh": true,//开启下拉刷新
    "backgroundColor": "yellow"//刷新下拉背景颜色
  },

tabBar 导航栏

"tabBar": {
    "list": [
      {
      "pagePath": "pages/index/index",//页面路径
      "text": "恋爱历程",//导航栏名称
      "iconPath": "icon/a1.png",//未选中图片样式
      "selectedIconPath": "icon/a.png"//选中图片样式
    },
    {//list最少两个,最多五个
      "pagePath": "pages/demo1/demo1",
      "text": "婚礼倒计时",
      "iconPath": "icon/b1.png",
      "selectedIconPath": "icon/b.png"
    }
  ],
  "color": "#0094ff",//设置导航栏默认字体颜色
  "selectedColor": "#ff3454",//设置导航栏选中字体颜色
  "backgroundColor": "yellow",//导航栏背景颜色
  "position": "bottom"//仅支持bottom下/top上 上面时无图标
  },

1.6 app.wxss

全局样式文件

1.7 sitemap.json

微信索引配置文件

1.8 project.config.json

项目的配置文件如appid

二 . 基础语法

2.1 模板语法

普通写法

<text>{{msg}}</text> //默认不换行,类似span 行内元素
<view>{{num}}</view> //默认换行,类似div 块级元素
<view>{{person.age}}</view>

Page({
  data: {
    msg:"hello",
    num:123,
    isChecked:false,
    person:{
      age:23,
      name:"zhaoyongbin",
      height:1.74
    }
  }
})

组件属性

 <view data-id="{{id}}">自定义属性</view>

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

复选框

<checkbox checked="{{isChecked}}"></checkbox> //checked选中状态

Page({
  data: {
    isChecked:false
  }
})

2.2 基本运算

加减乘除三元运算

<view>{{1+1}}</view>
<view>{{'1'+'1'}}</view> //字符串拼接
<view>{{10%2===0 ? '偶数': '奇数'}}</view> //三元运算符

2.3 列表渲染

wx:for

<view 
wx:for="{{list}}"  //循环数组或对象
wx:for-item="item" //循环项 默认为item可以省略
wx:for-index="index"  //循环索引 默认为index可以省略
wx:key="id"> //key用唯一值,可以提高列表的渲染性能
索引{{index}} 值{{item.name}}
</view>
<!--当循环为对象时 index是KEY item是VALUE-->

Page({
  data: {
    list:[{id:0,name:"小红"},{id:2,name:"小明"}]
  },
})

wx:if

标签不频繁切换显示使用wx:if (直接移除)

频繁切换显示使用hidden (切换显示样式)

<view> 
<view wx:if="{{false}}">1</view> 
<view wx:elif="{{false}}">2</view>
<view wx:else>3</view>
</view>

<!--通过hidden属性控制隐藏显示-->
<view hidden="{{true}}">不显示</view>
<view hidden="{{false}}">显示</view>

2.4 事件绑定

双向绑定 input输入框 bindinput绑定函数
```
<input type="text" bindinput="handleInput"/>
```

data: {
  num:0
},
handleInput(e){
    console.log(e) //打印日志
   this.setData({num:e.detail.value}) //e.detail.value获取值
},

点击事件 button按钮 bindtap点击事件

<button bindtap="handletap" data-a="{{1}}">+</button>
<button  bindtap="handletap" data-a="{{-1}}">-</button>

data: {
  num:0
},
handletap(e){
  const a = e.currentTarget.dataset.a;
  this.setData({
    num:this.data.num +a
  })
},

三. WXSS样式

3.1 概述

小程序中不需要主动引入样式,只需要名称一致即可自动引入

3.2 rpx属性

px值为固定大小,rpx为比例大小

view{
  width: 20rpx;
  height: 20rpx;
  font-size: 20rpx;
  background-color: aqua;
}

page px = 750rpx

1px = 750rpx/page

100px = 750rpx*100/page

calc()自动计算px 750和rpx之间不能留空格
```
width:calc(750rpx*100/375)
```

3.3 样式导入

创建文件 styles/commom.wxss

view{
  color: #000;
  font-size: 10px;
}

引入标签
```
@import "../../styles/commom.wxss"
```

3.4 选择器

不能使用*通配符可以把每种类型加上用,分隔
.class 类选择器选择所有有class="*"的组件
id id选择器选择拥有id="*"的组件
vive 选择所有vive组件其他同理

3.5 less

/*定义less变量*/
@color:yellow;

text{
  /*引用less变量*/
  color: @color;
}

四. 常见组件

4.1 text

user-select属性,可以长按复制

decode 对文本内容进行解码例如

<text user-select decode>hahah&nbsp;321</text>

4.2 vive

hover-class 按下改变样式

<view hover-class="h-class">点我试试</view>

.h-class{
  color:blue;
}

4.3 image

图床地址https://imgurl.org/home/multiple,也可以自己使用阿里云存储或七牛云等进行照片上传

图片默认宽高为320*240

<image src="https://s3.bmp.ovh/imgs/2021/09/609872e84027d025.jpg"/>

mode属性值
- 默认scaleToFill 默认选项,不保持默认比例,使图标完全填充
- aspectFit 保持宽高比确保图片长边显示出来页面轮播图常用
- aspectFill 保持纵横比,只保证图片的短边能完全显示出来
- widthFix 宽定好后,高度自动响应
- lazy-load 懒加载图片完全出现在视口才会加载

4.4 swiper 轮播图

外层容器swiper 轮播项 swiper-item
默认样式 width100% height150px
等比计算方式
- 先找出原图像素尺寸
- swiper宽度/swiper高度 = 原图宽度/高度,所以 /swiper高度=swiper宽度*原图高度/原图宽度
```
swiper{
  width: 100%;
  height: calc(100vw*800/800);
}
```
swiper常用属性
- autoplay 自动轮播
- interval="3000" 间隔毫秒
- circular 衔接轮播
- indicator-dots 显示分页器
- indicator-color="#0094ff" 显示未选中的颜色
- indicator-active-color="#ff0094" 显示选中的颜色

<swiper autoplay interval="3000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094">
<swiper-item><image mode="widthFix" lazy-load src="https://s3.bmp.ovh/imgs/2021/09/609872e84027d025.jpg"/></swiper-item>
<swiper-item><image mode="widthFix" lazy-load src="https://s3.bmp.ovh/imgs/2021/09/609872e84027d025.jpg"/></swiper-item>
</swiper>

4.5 navigation 导航标签

url 跳转路径绝对路径或相对路径
target 默认在自己的小程序跳转 self/miniProgram(其他小程序页面)
open-type 跳转方式
- navigate 默认值保留当前页（不能跳转到tabbar页面）
- redirect 关闭当前页（不能跳转到tabbar页面）
- switchTab 跳转到tabbar页面，并关闭所有其他非tabbar页面
- reLaunch 关闭所有页面，打开到应用内的某个页面
- navigateBack 关闭当前页面，返回上级或多级页面，可通过getCurrentPages（）获取当前页面栈
- exit 退出小程序（target="miniProgram"时生效退出别人小程序）

<navigator url="/pages/logs/logs">跳转页面</navigator>

4.6 rich-textfu富文本标签

nodes属性可以接收标签字符串或接收对象数组
```
<rich-text nodes="{{htmlSting}}"></rich-text>
```

4.7 button 按钮

外观属性
- size属性控制按钮大小 default默认大小 mini小尺寸
- type属性按钮颜色 default默认灰色 primary绿色 warn红色
- plain 按钮是否镂空(背景透明)
- loading 等待图标
```
<button size="mini" type="primary" loading>默认按钮</button>
```

open-type属性

<button open-type="contact">联系客服</button><!--联系客服-->
<button open-type="share">分享到好友或群</button><!--分享小程序-->
<button open-type="getPhoneNumber">获取手机号</button><!--获取当前用户手机号(需要企业账号)-->
<button open-type="getUserInfo" bindgetuserinfo="getUserinfo">获取信息</button><!--获取当前用户个人信息-->
<button open-type="launchApp">直接打开app</button><!--在小程序中直接打开app-->
<button open-type="openSetting">授权</button><!--打开小程序中的内置授权页面-->
<button open-type="feedback">问题反馈</button><!--打开问题反馈页面-->

getUserinfo(e){
  console.log(e)
},

4.8 icon 图标

<icon type="success" size="23" color="red"></icon>

4.9radio 单选框

bindchange绑定事件

<radio-group bindchange="handleChange">
<radio value="meal" color="red">男</radio>
<radio value="female">女</radio>
</radio-group>
<view>{{gender}}</view>

data: {
   geder:"null"
},
handleChange(e){
   console.log(e)
   let gender = e.detail.value;//let局部变量
   this.setData({
     gender:gender  //可以只写gender
   })
 },

4.10 checkbox复选框

checkbox复选框

<view>
<checkbox-group bindchange="handleChangebox">
<checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
{{item.name}}
</checkbox>
</checkbox-group>
</view>
{{shuiguo}}

data: {
  shuiguo:"",
  list:[
    {id:0,
    name:"苹果",
    value:"apple"},
    {id:1,
    name:"葡萄",
    value:"grape"},
    {id:2,
    name:"香蕉",
    value:"bananer"},
  ]
},
handleChangebox(e){
  let shuiguo = e.detail.value;
  this.setData({
    shuiguo:shuiguo
  })
},

4.11 背景音乐组件

音乐外链生成地址https://music.xf1433.com/

const a = wx.getBackgroundAudioManager()

a.title = "A Thousand Years"
a.epname = "A Thousand Years"
a.singer = "Christina Perri"
a.src= "http://m10.music.126.net/20210904000056/b18190501ce292a2d9cbe3ee812a91c5/ymusic/460e/7699/9bfc/294e81ebd86bf11243ee37756755a92f.mp3"

微信小程序

微信小程序

一. 文件结构

1.1 pages

1.2 utils

1.3 icon

1.4 app.js

1.5 app.json

1.6 app.wxss

1.7 sitemap.json

1.8 project.config.json

二 . 基础语法

2.1 模板语法

2.2 基本运算

2.3 列表渲染

2.4 事件绑定

三. WXSS样式

3.1 概述

3.2 rpx属性

3.3 样式导入

3.4 选择器

id id选择器 选择拥有id="*"的 组件

3.5 less

四. 常见组件

4.1 text

4.2 vive

4.3 image

4.4 swiper 轮播图

4.5 navigation 导航标签

4.6 rich-textfu富文本标签

4.7 button 按钮

4.8 icon 图标

4.9radio 单选框

4.10 checkbox复选框

4.11 背景音乐组件

评论 (0)

id id选择器选择拥有id="*"的组件