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

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

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.number
  this.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，其他小程序是miniProgram
    open-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.dataset
          this.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、DELETE
     dataType: '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;