微信小程序开发小技巧积累（更新中）

最新推荐文章于 2023-11-10 16:46:12 发布

置顶夜空划过的流星

最新推荐文章于 2023-11-10 16:46:12 发布

阅读量6.4k

点赞数 5

分类专栏：微信&小程序开发文章标签：小程序

本文链接：https://blog.csdn.net/xgx198831/article/details/79131068

版权

微信&小程序开发专栏收录该内容

16 篇文章 2 订阅

订阅专栏

小程序初学开发小技巧笔记（持续更新）

1、轮播组件

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item.photo}}" class="slide-image" width="100%" height="200"  />
      </swiper-item>
    </block>
  </swiper>

2、用if标签控制内容的输出显示

<view class="gmxx" style="font-size:28rpx;width:30%">
    <text wx:if="item.is_show==1">新品</text>
    <text wx:elif="item.is_hot==1">热销</text>
    <text wx:else>推荐</text>
</view>

3、组件弹性布局，常用于一行有多个<view>时，平均分配宽度

 <view style="display:flex; flex-direction:row;  justify-content:space-around;  margin:0rpx; line-height:50rpx; color:#999">
     <view class=""  style="font-size:28rpx; padding-right:70rpx; margin:0rpx;">
            <text>新品55</text>
     </view>
     <view class="" style="font-size:28rpx;">销量555：{{item.shiyong}}</view>
 </view>

4、navigator跳转组件

navigator跳转分为两个状态一种是关闭当前页面一种是不关闭当前页面。用redirect属性指定。

<navigator url="../index/index">点击跳转不关闭当前页面</navigator>
<navigator url="../logs/logs" redirect="true" >点击跳转关闭当前页面</navigator>

使用 navigateTo 页面跳转：

wx.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。

OBJECT参数说明：

示例代码：

wx.navigateTo({

url: 'test?id=1'

})

//test.js

Page({

onLoad: function (option){

console.log(option.query)

}

})

注意：为了不让用户在使用小程序时造成困扰，我们规定页面路径只能是五层，请尽量避免多层级的交互方式。

wx.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

OBJECT参数说明：

示例代码：

wx.redirectTo({

url: 'test?id=1'

})

5、打印输出调试信息

console.log('23432')

6、图片、组建透明度设置

div
{
    opacity:0.5;
}
//图片透明度
<image style="opacity:0.5" src="1.png"></image>
// opacity ：规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）

7、弹出提示框

selectByItemName: function () {
    var that = this;
    if (!that.data.inputKey) {
      wx.showToast({
        title: '请输入关键字',
        icon:'loading',
        duration:2000,
      })
      return ;
    }
// 隐藏消息提示框：

wx.showToast({

title: '加载中' ,

icon: 'loading' ,

duration: 10000

})

// 2s 后关闭提示框

setTimeout( function (){

wx.hideToast()

},2000)

8、轮播图中图片绑定点击事件

//多个轮播图绑定同一事件，通过id或index值区分
1） bindtap="itemClick" id="{{index}}" 绑定的函数实现：
itemClick: function (event) {
    console.log(event)
    var index = event.target.id
   },
2）wx:bindtap="itemClick" data-index="{{index}}" 绑定的函数实现方式：

itemClick: function (event) {
  console.log(event)
  var index =  event.target.dataset.index
},

9、显示模态对话框

wx.showModal({
 title: '提示',
 content: '这是一个模态弹窗',
 success: function(res) {
  if (res.confirm) {
   console.log('用户点击确定')
  }
 }
})

显示模态弹窗，OBJECT参数说明：

10、显示操作菜单 wx.showActionSheet(OBJECT)

wx.showActionSheet({
 itemList: ['A', 'B', 'C'],
 success: function(res) {
  if (!res.cancel) {
   console.log(res.tapIndex)
  }
 }
})

显示操作菜单， OBJECT参数说明：

OBJECT参数说明：

11、动态设置页面当前标题

wx.setNavigationBarTitle(OBJECT)

动态设置当前页面的标题。

wx.setNavigationBarTitle({
 title: '当前页面'
})

12、系统粘帖板的内容操作

1）wx.setClipboardData(OBJECT)，设置系统剪贴板的内容

设置系统剪贴板的内容

OBJECT参数说明：

参数	类型	必填	说明
data	String	是	需要设置的内容
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码：

wx.setClipboardData({
  data: 'data',
  success: function(res) {
    wx.getClipboardData({
      success: function(res) {
        console.log(res.data) // data
      }
    })
  }
})

2）wx.getClipboardData(OBJECT)，获取系统剪贴板的内容

获取系统剪贴板内容

OBJECT参数说明：

参数	类型	必填	说明
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success返回参数说明：

参数	类型	说明
data	String	剪贴板的内容

示例代码：

wx.getClipboardData({
  success: function(res){
    console.log(res.data)
  }
})

13、调用客户端扫码界面

函数：wx.scanCode(OBJECT)，功能：调起客户端扫码界面

Object 参数说明：

参数	类型	必填	说明	最低版本
onlyFromCamera	Boolean	否	是否只能从相机扫码，不允许从相册选择图片	1.2.0
scanType	Array	否	扫码类型，参数类型是数组，二维码是'qrCode'，一维码是'barCode'，DataMatrix是‘datamatrix’，pdf417是‘pdf417’。	1.7.0
success	Function	否	接口调用成功的回调函数，返回内容详见返回参数说明。
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success返回参数说明：

参数	说明
result	所扫码的内容
scanType	所扫码的类型
charSet	所扫码的字符集
path	当所扫的码为当前小程序的合法二维码时，会返回此字段，内容为二维码携带的 path

示例代码：

// 允许从相机和相册扫码
wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})

// 只允许从相机扫码
wx.scanCode({
  onlyFromCamera: true,
  success: (res) => {
    console.log(res)
  }
})

14、小程序拨打电话接口wx.makePhoneCall

OBJECT参数说明：

参数	类型	必填	说明
phoneNumber	String	是	需要拨打的电话号码
success	Function	否	接口调用成功的回调
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码：

wx.makePhoneCall({
  phoneNumber: '1340000' //仅为示例，并非真实的电话号码
})

15、微信小程序尺寸单位rpx和px的关系


px单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.

16、设置view的背景图片是本地图片

<view class="head" style="background-image:url({{info.hybjimg!=''?info.hybjimg:'/images/pics/bj.jpg'}})">
....
</view>

//为了使背景图片自适应宽高，可以做如下设置：

background-repeat:no-repeat;

background-size:100% 100%;

-moz-background-size:100% 100%;

17、设置view水平、垂直居中的方法

//wxml文件
<page>
  <view class="container">
    <view class="btns">
      <button class="btnv">微信授权登录<tton>
      <button class="btnv">账号密码登录<tton>
    <iew>
  <iew>

</page>


// wxss文件
/* pages/login/login.wxss */
page {
  height: 100%;
  background-color: #fff;
}
.container {
  display: flex;
  direction: row;
  align-items: center;
  justify-content: space-around;
}
.btns {
  width: 80%;
  margin: auto;
  display: block;
}
.btnv {
  width: 100%;
  height: 80rpx;
  margin: 15rpx 0;
  font-size: 32rpx;
  line-height: 80rpx;
}

18、wxml文件中wx:for的使用

语法：wx:for="{{value}}" wx:key="{{index}}"
示例：

<view wx:for="items" wx:key="{{index}}">{{item}} {{index}}</view> // 这里的items是data中声明的数组，index：下标，item：循环后的值。对像操作也一样，item加上对应的key值
data: {
    items: ['one', 'two', 'three']
}

19、data私有数据修改

和vue中的data不同的是，直接修改data的数据 不会实时更新
比如：

data: {
    count: 0,
    items: []
},
onLoad: function (){
    var that = this
    that.data.count = 2 // 毫无卵用
    console.log(that.data.count) // 2 说明改是改对了，但是页面没有更新
}

解决办法： setData

onLoad: function(){
    var that = this
    that.setData({
          count: 2 ,  // 左边参数是data中得参数，右边赋值。复杂的赋值比如操作数组之类的，最好定义变量接收后使用
          key: value,
          ...
     })
}

setData对数组元素操作：

let items = that.data.items // 声明一个变量保存data-items的值
items.push/pop/..(数组操作方法)(value) // 对改变量进行数组操作
that.setData({
    items: items // 将该变量赋值给data中的items
})

20、本地数据存储

本地存储： wx.getStorage/wx.setStorage

使用方式:

wx.setStorage({
    key: 'value',
    data: 'value'
})
类似于 setStorage('key', 'value')

wx.getStorage({
    key: 'value', // 与setStorage中的key值对应
    success: (res) => {
          console.log(res.data) // 这里面获取到的便是setStorage中的key值对应的data
     }
})
类似于：getStorage('key')

21、点击事件绑定: bindtap

使用方法：

<button bindtap="functionName"></button>
functionName: fucntion(){
    console.log(2) // 点击按钮触发functionName方法，在js中写对应的方法
}

外层使用wx:for循环，需要在里面再包裹一层，并将点击事件写在那层元素中,重点加上data-name属性。
示例：

<view wx:for="{{ietms}}">
    <view bindtap="clickItem" data-name="item">124</view>
</view>
clickItem: function(e) {
   console.log(e.currentTarget.dataset.name) //能够输出data-name指定的值

22、网络请求 wx.request

https://segmentfault.com/a/1190000014789969 promise 封装

https://www.w3cvip.org/topics/623 封装，鉴权
官方文档
必要准备，微信公众平台->设置-> 开发设置->服务器域名，配置一个request合法域名作为请求接口地址。必须https且经过备案后的地址。
使用:

wx.request({
    url: 'requestURL'，
    data: {},
    method: 'post/get/..other'， // 默认为 get方式
    complete: (res) => {
          console.log(res) // 请求回调，成功失败都返回
     }
})

更多细节查看官方文档，这里只是最基本的写法。

23、form表单提交

使用方法：

<form bindSubmit="functionName">
    <input name="userName" ></input> // 与一般表单写法相同
.....
    <button formType="submit">提交</button>
</form>

// js中的方法

functionName: function (e) {
    console.log(e.detail.value) // 输出对象 {userName: 'value', ....}
}

1.表单提交方法定义在form标签中，在提交按钮上使用对应的formType绑定相应的方法。
2. 输出的e.detail.value中的key对应每个表单元素中的name值

表单提交请求示例：
index.wxml:

<form bindsubmit="formSubmit">
    <view>
          <input name="username" placeholder="请输入用户名" value="张三"></input>
     </view>
    <view>
          <button formType="submit">提交</button>
     </view>
</form>

index.js:

page({
data: {
    listData: {}
},
formSubmit: function (e){
    var that = this
    let params = e.detail.value
    wx.request({
          url: 'myURL',
          data: params,
          method: 'post',
          complete: (res) => {
                 that.setData({
                     istData: res.data.data
                 })
         }
     })
}
})

（持续更新中.....）

夜空划过的流星

关注

5
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
微信小程序开发小技巧积累（更新中）

1、轮播组件&lt;swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"&gt; &lt;block wx:for="{{imgUrls}}"&gt; &lt;swiper-it
复制链接

扫一扫