微信小程序开发的基本用法

1、数组或对象的遍历

1.1、数组遍历

wx:for=”{{数组或对象}}” wx:for-item=”循环项的名称” wx:for-index=”循环项的索引” wx:key=”唯一的值”用来标识数据的唯一性。
微信小程序的数组遍历的循环项的的名称和索引自动默认是item和index，所以在单层循环时不用特地声明；然而在嵌套数组时要进行声明，并定义不同的循环项。

1.2、对象遍历

对象的遍历为了与数组的遍历进行区别，

  wx：for-item=“value”wx:for-index=”key”

2、条件渲染

2.1、wx:if

用法：wx:if(wx:if…….wx:elif…….wx:else……) wx:if=”{{布尔值或变量}}”主要是将dom元素移除或添加

2.2 、hidden

用法：hidden=”{{布尔值或变量}}”，主要是设置dom元素的display属性

3、小程序的事件绑定

3.1、bindinput

用法：bindinput=”方法名”，这个方法是在js文件中和data同级的，如果要实现数据绑定，则在方法中要使用setData,如下所示，num是data中的数据

handle(e){console.log(e)this.setData({num:e.detail.value})},
})

3.2、bindTap

如果要实现简单的点击操作，则要借用自定义属性,wxml中如下

<button bindtap="handleOne" data-number = '{{1}}'>+</button>
<button bindtap="handleOne" data-number = '{{-1}}'>-</button>

js文件中如下

handleOne(e){console.log(e)// const number = Number(e.currentTarget.dataset.number)//如果data-number中的数据没有被{{}}包括，则这里需要Number函数将其转换成数字类型的const number = e.currentTarget.dataset.numberthis.setData({num:this.data.num + number})
}

4、rpx

为了更好的兼容各类机型的手机，微信小程序引入了rpx，所以在微信小程序中我们要将px经过换算，转换成rpx。假设设计稿宽page
1px = 750rpx/page //这里其实是算出了这个比率
转换之后的宽 = 宽 * 759rpx/page //用像素的宽乘以比率
但在实际操作中不能直接写，要借用calc这个属性，且运算符两边不能有空格。如下所示

width:calc(750rpx*100/375)

5、样式导入

使用@import导入外联样式表，且只支持相对路径。通常是针对一些公共样式。
具体写法是在page同级创建style文件夹，在文件夹下创建wxss文件，之后在需要的wxss文件引入。做法如下

@import "../../style/common.wxss";

6、选择器

微信小程序的选择器不支持通配符*。原生的微信小程序是不支持less，所以要在vscode上安装插件easy less，然后在vscode设置中写入

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

less中不支持calc，所以在less文件中使用calc，要像如下写法,运算符号两边是要加空格的

height: ~'calc(100vh - 90rpx)';

7、常见组件

7.1、 view

代替以前的div标签

7.2、 text

文本标签，类似之前的span标签。
只能嵌套text
可以实现长按文本复制（只有这个标签有这个功能，当标签加上selectable属性时，具备此功能）
可对空格、回车进行解码（标签加上decode属性）

7.3、 image

src：图片加载路径
它有一个默认宽高320*240
mode：决定图片内容如何与图片标签宽高进行适配
- scaleToFill：默认值，不保持纵横比，直接拉伸
- aspectFit:保持纵横比，且长边完全显示，进行缩放。（一般做轮播图的时候使用）
- aspectFill:保持纵横比，且使短边完全显示。
- widthFix:宽度不变（即宽度指定后），高度自适应
  …其他
小程序的图片是直接支持懒加载的，直接在标签上加上lazy-load属性就可以了

7.4 、 swiper轮播组件

轮播图外层容器swiper，轮播项swipter-item
swiper标签存在默认值：宽100%，高150px。无法实现由内容撑开。
为了使页面美观，我们要通过计算得出swiper的高。swiper的宽/swiper的高 = 图片的宽/图片的高

7.4.1、常见属性

autoplay：swiper标签的属性，自动轮播
interval：swiper标签属性，定时轮播，默认值是5000
circular：siper，循环轮播
indicator-dots:指示点导航,指示器、分页器
indicator-color：指示器的颜色。
indicator-active-color：指示器激活时的颜色

7.5 、navigator

块级元素，是自动换行，可以添加高度和宽度

常见属性

  url:要跳转的页面路径，相对路径或绝对路径target：是跳转当前小程序内还是别的小程序。默认值是self，其他小程序是miniProgramopen-type：打开方式navigate：默认值，保留当前页面，跳转到小程序内其他页面，但不能跳转到tabbar页面redirect：关闭当前页面，跳转到小程序内其他页面，但不能跳转到tabbar页面switchTab：跳转到tabbar页面，并关闭非tabbar页面reLaunch:关闭所有页面，跳转到小程序内其他页面......

7.6、rich-text富文本标签

nodes属性接收字符串或对象数组，字符串是data中的html代码，它可以进行解析

7 .7、 button

7.7.1、外观属性

size：按钮尺寸
- default：默认值
- mini：小按钮
type：按钮颜色
- primary：绿色
- default：灰色
- warn：红色
plain：按钮是否镂空，颜色透明（布尔类型）
loading：是否等待（布尔类型）

7.7.2、开发能力

open-type值如下
- contact：打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息,需要微信小程序的后台配置。只能通过真机调试看到效果
- share：触发用户转发，转发当前小程序到微信朋友中，不能分享到朋友圈
- getPhoneNumber：获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息
  - 1、绑定一个事件bindgetphonenumber
  - 2、在回调函数中，通过参数获取信息
  - 3、获取到的信息是已经加密过的。需要用户自己搭建小程序的后台服务器，在服务器中进行解析，然后再返回小程序中
- getUserInfo：获取用户信息，可以从bindgetuserinfo回调中获取到用户信息
  - 1、使用方法和getPhoneNumber类似
  - 2、获取的信息是可以直接看到的，不存在加密字段的
- launchApp：打开APP，可以通过app-parameter属性设定向APP传的参数具体说明
- openSetting：打开授权设置页
  - 1、授权页面中，只会出现用户曾经点击过的权限
- feedback：打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容。只能通过真机调试看到效果

7.8、 icon

type:icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download,search, clear
size:icon的大小
color:icon的颜色，同css的color

7.9、 radio

1、必须与radio-group结合使用
2、value是所选中的值
3、需要给radio-group绑定事件，来获取选中的值，通过bindchange绑定
4、可以在radio加上color属性，变换radio的选中颜色
用法如下：

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

7.10、 checkbox

1、用法与radio类似
用法如下：

 <checkbox-group bindchange="checkChange"><checkbox wx:for="{{list}}" wx:key="id" value="{{item.value}}">{{item.name}}</checkbox></checkbox-group><view>您选择是：{{checkList}}</view>

8、自定义组件

1、创建组件，在page同级创建自定义组件
2、在需要的页面的json文件中声明组件，在wxml文件中引入

"usingComponents": {"Tabs":"../../component/Tabs/Tabs"}

3、父传子
- 父组件
```
<Tabs list="{{list}}"></Tabs>
```
- 子组件
  - 先在js文件中，然后就可以直接使用list了，如果要修改传值的内容，则要通过派发事件到父组件进行处理
```
      properties: {list:{type:Array,//传值的类型value:''//默认值}},
```

4、子传父

this.triggerEvent("父组件自定义事件名称"，要传递的参数)

子组件

handle(e){const {index} = e.currentTarget.datasetthis.triggerEvent("itemChange",index)}

父组件wxml文件

<Tabs list="{{list}}" binditemChange="itemChange"></Tabs>

9、小程序的生命周期

9.1 应用生命周期

1、onLaunch：应用第一次启动会触发的事件，主要用于获取用户信息
2、onShow：应用被用户看到，对应用的数据或页面效果重置
3、onHide：应用被隐藏，暂停或消除定时器
4、onError：应用代码发生错误，就会触发。触发后，收集用户信息，通过异步请求，将错误信息发送后台，针对错误信息，更新应用
5、onPageNotFound：页面不存在时，触发

9.2 页面生命周期

1、onLoad：监听页面加载。发送一些异步请求，初始化页面数据
2、onShow：页面显示。
3、onReady：页面渲染完毕
4、onHide：页面隐藏
5、onUnLoad：页面卸载触发。关闭当前页面时触发
6、onPullDownRefresh：下拉刷新触发。用于刷新数据或页面效果(wx.stopPullDownRefresh()关闭下拉刷新窗口)
7、onReachBottom：上拉触底触发。上拉加载下一页数据
8、onShareAppMessage:用户点击右上角分享时触发
9、onPageScroll：页面滚动就触发。
10、onResize:页面尺寸变化时触发，横竖屏切换时触发
11、onTabItemTap：当前是tabbar页面且点击当前tab item时触发

10、小程序的第三方框架

1、腾讯的wepy 类似vue
2、美团:mpvue 类似vue
3、京东：taro 类似 react
4、滴滴：chameleon
5、uni-app 类似 vue
6、原生框架 MINA

11、接口请求数据

wx.var reqTask = wx.request({url: '', // 异步请求的地址data: {}, //要给后台发送什么数据，需要的时候加上，不需要可以删除header: {'content-type':'application/json'}, //请求头，是有默认值的method: 'GET',  //请求的方法，默认的，除了GET外，还有POST、PUT、DELETEdataType: 'json',  //你想要的返回值的类型，也有默认值responseType: 'text', //返回文本的类型success: (result)=>{ //成功的回调函数},fail: ()=>{}, //失败的回调函数complete: ()=>{} //无论成功还是失败都会调用的回调函数});},

12、wx中比较常用的自带的api

wx.stopPullDownRefresh():关闭下拉刷新的窗口
wx.showToast({title:"",…}):提示工具，相当于alert、confirm等
wx.showLoading({title:“加载中”，mask:true//是否显示蒙版})开启，wx.hideLoading()关闭加载中的显示
wx.previewImage（{…}）预览图片
wx.chooseAddress():获取收货地址
wx.getSetting({…})获取用户权限
wx.openStting({…})打开用户权限

13、css技巧

实现省略号

display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

微信小程序开发的基本用法相关推荐

微信小程序开发系列五：微信小程序中如何响应用户输入事件
微信小程序开发系列教程微信小程序开发系列一:微信小程序的申请和开发环境的搭建微信小程序开发系列二:微信小程序的视图设计微信小程序开发系列三:微信小程序的调试方法微信小程序开发系列四:微信小程序 ...
微信小程序开发03-这是一个组件
编写组件基本结构接上文:微信小程序开发02-小程序基本介绍我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...
微信小程token_微信小程序开发之登录换取token
本文将带你了解微信小程序开发之登录换取token,希望本文对大家学微信有所帮助前言:这次主要是介绍些业务逻辑,技术点倒是没有多少.不过在开发中,优秀的编程思路同样是非常值得学习的. 最近小程序可以说 ...
微信小程序开发学习5（自定义组件）
微信小程序开发学习5(自定义组件) 1.学习目标能够知道如何自定义小程序组件能够知道小程序组件中behaviors的作用能够知道如何安装和配置vant-weapp组件库能够知道如何使用MobX ...
微信小程序wxml如何判断字符串中汉语某字符_微信小程序开发经典案例解析“嗨兔儿”...
嗨兔儿是微信公众号嗨日语歌(hitaici)助手,主要为用户提供,关键词检索,帮助手册等,为外语学习者提供一个便捷的操作方式,能够开心工作,开心生活. 开发过程及注意事项分享视频. 1. 微信小程序开 ...
从零开始学前端第十七讲--微信小程序开发入门
微信小程序开发入门主讲人介绍沁修,葡萄藤技术总监项目经验丰富,擅长H5移动项目开发. 专注技术选型.底层开发.最佳代码实践规范总结直播录屏版 https://v.qq.com/x/page/n ...
web前端-微信小程序开发学习
web前端-微信小程序开发学习 1. 小程序的概述 2. 小程序的项目结构 2.1 小程序项目结构分析 2.2 WXML模版 2.3 小程序的宿主环境 3. 组件 3.1 视图容器类组件 3.2 常用 ...
微信小程序开发实战（9）：单行输入和多行输入组件
-----------支持作者请转发本文----------- 1. 单行输入组件(input) input组件用于录入单行文本,尽管input的基本功能是文本录入,但该组件的属性还是比较多的,也比 ...
七天学习微信小程序开发（一）—— 学习笔记
文章目录前言目标第一天 -- 前端配置和编写微信开发微信小程序的代码结构常用标签(wxml) 常用样式(wxss) 界面布局的技术任务第二天 -- 深度学习微信前端编写(一) 程序底部 ...

微信小程序开发的基本用法

微信小程序开发的基本用法

1、数组或对象的遍历

1.1、数组遍历

1.2、对象遍历

2、条件渲染

2.1、wx:if

2.2 、hidden

3、小程序的事件绑定

3.1、bindinput

3.2、bindTap

4、rpx

5、样式导入

6、选择器

7、常见组件

7.1、 view

7.2、 text

7.3、 image

7.4 、 swiper轮播组件

7.4.1、常见属性

7.5 、navigator

7.6、rich-text富文本标签

7 .7、 button

7.7.1、外观属性

7.7.2、开发能力

7.8、 icon

7.9、 radio

7.10、 checkbox

8、自定义组件

9、小程序的生命周期

9.1 应用生命周期

9.2 页面生命周期

10、小程序的第三方框架

11、接口请求数据

12、wx中比较常用的自带的api

13、css技巧

微信小程序开发的基本用法相关推荐

最新文章

热门文章