微信小程序

最新推荐文章于 2023-07-31 19:14:49 发布

置顶王竹根

最新推荐文章于 2023-07-31 19:14:49 发布

阅读量1.3k

点赞数

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

本文链接：https://blog.csdn.net/dianziagen/article/details/80613462

版权

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

23 篇文章 0 订阅

订阅专栏

wxs使用

1 WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。

2 使用例子（注意：直接在小程序js上调用getDate是报错）

// 日期格式化
function dateFormat(value)
{
  var date = getDate(value);
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();

  return [year, month, day].join('.');
}

【问题记录】控制台解析preview和response数据不一致→解决JS处理后台返回的Long型数据精度丢失

问题描述：

后端返回数据preview和response不一致

（翻译成专业术语就是：JS处理后台返回的Long型数据精度丢失）

问题分析：

JS在处理返回数据类型是Long的时候，精度会丢失一部分！！！

问题原因：

JS内置有32位整数，而number类型的安全整数是53位。如果超过53位，则精度会丢失。

正如现在后台传来一个64位的Long型整数，因此超过了53位，所以后台返回的值和前台获取的值会不一样。

问题复现：

问题解决：

找后端同学去转string吧！具体怎么转后端看着办 ~

注：后端可以给前端传一个long类型的数据，但是long类型的数据不能太long，不然js转换乏力。。。

wx:if赋值出现空格识别成true

wx:if='{{ index == -1 }}'

wx:if='{{ index == -1 }} ' 对应true

普通情况：

wx:if={{1}} 代表为true

wx:if={{0}} 代表为false

保存图片到本地

1.保存到相册

2.保存到相册，微信返回错误，提示权限拒绝.。采用保存本地文件

saveImage(){
        wx.showLoading({
            title: '',
        });
        var self = this;
        //  保存之前先download一下, 把返回的tempFilePath临时文件路径给wx.saveImageToPhotosAlbum的filePath参数
        wx.downloadFile({
            // url: self.data.qrCodeImg,
            // url: self.data.images + '/pickup/ready-pick-order.png',
            url: 'https://www.baidu.com/s?wd=%E4%BB%8A%E6%97%A5%E6%96%B0%E9%B2%9C%E4%BA%8B&tn=SE_Pclogo_6ysd4c7a&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pc',
            success: function (res) {
                //saveImageToPhotosAlbum:fail auth deny保存错误
                // wx.saveImageToPhotosAlbum({
                //     filePath: res.tempFilePath,
                //     success(result) {
                //         wx.showToast({
                //             title: '保存成功',
                //             icon: 'success'
                //         })
                //     },
                //     fail(res){
                //         console.warn('saveImageToPhotosAlbum>>>fail=');
                //         console.warn(res);
                //     },
                // });

                //保存文件
                wx.saveFile({
                    tempFilePath: res.tempFilePath,
                    success(result) {
                        wx.showToast({
                            title: '保存成功',
                            icon: 'success'
                        })
                    },
                    fail(res) {
                        console.warn('saveFile>>>fail=');
                        console.warn(res);
                    },
                });
            },
            fail(res) {
                console.warn('fail' + res);
            },
            complete(res) {
                wx.hideLoading();
            }
        });
    },

解决微信小程序中Date.parse()获取时间戳IOS不兼容的问题(IOS为NaN的问题)

下面用正则替换2017-01-01日期格式为2017/01/01后问题解决(代码如下)

var mydata = '2017-01-01 11:00:00';
mydata=data.replace(/-/g, '/');
console.log("返回时间：" + mydata);
var time = Date.parse(new Date(mydata)) / 1000;
。
原文链接：解决微信小程序中Date.parse()获取时间戳IOS不兼容的问题(IOS为NaN的问题)_摘取天上星-CSDN博客

微信表情编码

    emoji(){
        // 查询表情，哭的编码： U + 1f602 => \u1f602 => \U0001f602
        //查询网站：http://tools.jb51.net/transcoding/decode_encode_tool  \U0001f602==》 \uD83D\uDE02
        var emoji1 ='\u{1f602}';
        console.log(emoji1);
        var emoji1 ='\uD83D\uDE02';
        console.log(emoji1);
    },

navigationStyle-导航栏样式

custom 自定义导航栏，只保留右上角胶囊按钮-版本要求：微信客户端 7.0.0

 "navigationStyle": "custom"

<!--pages/e/e.wxml-->
<view class="navigator_bar"></view>

/* pages/e/e.wxss */
.navigator_bar{
    background: linear-gradient(red,blue);
    height: 150rpx;
}

参考：微信小程序自定义头部导航栏 navigationStyle - 简书

使用async出现regeneratorRuntime is not defined错误

新版本的小程序支持async / await。勾选下面选项后重新编译程序即可

vertical-align:top排版影响

使用前：

使用后

<view class="bot-tabbar">
        <view>
            <view class="tabbar-item ">
                <image ></image>
                <text>热卖榜</text>
            </view>
            <view class="tabbar-item ">
                <image ></image>
                <text>热卖榜</text>
            </view>
        </view>
    </view>


.bot-tabbar {
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 999;
}

.bot-tabbar > view {
    display: flex;
    bottom: 0;
    height: 92rpx;
    background-color: #fff;
}

.tabbar-item {
    width: 50%;
    height: 88rpx;
    padding: 20rpx;
    line-height: 48rpx;
    border: 1rpx solid #de2810;
}

.tabbar-item image {
    width: 48rpx;
    height: 48rpx;
    margin-right: 8rpx;
    vertical-align: top;
    background: green;
}

.tabbar-item text {
    background: blue;
}

行内块元素，image有下边距

1、img下方空白问题，产生原因：

行内元素，inline-block元素的默认对齐是基于baseline的

如果我们再加入一个字符，就会更清楚。

解决：设置垂直（上下）对齐方式 vertical-align:top

    <view class="item">
        <image class="img_item"></image>
        <image class="img_item"></image>
    </view>

样式

.item{
    background: blue;
}
.img_item{
    display: inline-flex;
    vertical-align: top;
    width: 60rpx;
    height: 60rpx;
    margin-right: 10rpx;
    background: red;
}

行内块元素排列，换行后有上下间隔

解决：设置垂直（上下）对齐方式 vertical-align:top

wxml：

<view>
    <view class="item">
    </view>
    <view class="item">
    </view>
    <view class="item">
    </view>
    <view class="item">
    </view>
    <view class="item">
    </view>
</view>

wxss

.item{
    background: pink;
    border: 1rpx solid orange;
    height: 80rpx;
    width: 180rpx;
    display: inline-block;
    vertical-align: top;
}

新能力解读：页面间通信接口

在 2019 年 7 月 2 日的小程序基础库版本更新 v2.7.3 中，小程序新增了一个页面间通讯的接口，帮助我们的小程序完成不同页面间数据同步的功能

如果你需要从首页向详情页传递数据，则可以这样操作。A 向 B 传递数据

wx.navigateTo({
  url: 'b?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

B 向 A 传递数据。在 A 中的跳转时，加入 events 的定义，定义你自己的函数，以及对应的处理函数。

//test.js
Page({
  onLoad: function(option){
    console.log(option.query)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})

跳转到底部指定view的位置

思路：获取滚动条高度,该元素固定在顶部

onPageScroll:function(e){ // 获取滚动条当前位置
    console.log(e)
},
goTop: function (e) {  // 一键回到顶部
 if (wx.pageScrollTo) {
    wx.pageScrollTo({
      scrollTop: 0
    })
  } else {
    wx.showModal({
      title: '提示',
      content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
    })
  }
}

<view class='tab-con' id="tab-con">
    <view class="tab {{tabFixed ? 'tab-fixed':''}}">
      <view>二月</view>
      <view>三月</view>
      <view>四月</view>
    </view>
  </view>

Page({
  data: {
    tabScrollTop: 0,
    tabFixed: false
  },
    onReady:function(){
    var that = this;
    var query = wx.createSelectorQuery()
    query.select('#tab-con').boundingClientRect(function (res) {
      that.setData({
        tabScrollTop: res.top
      })
    }).exec()
  },
  onPageScroll: function (e) { // 获取滚动条当前位置
      if (e.scrollTop > this.data.tabScrollTop) {
        this.setData({
          tabFixed: true
        })
      }else{
        this.setData({
          tabFixed: false
        })
      }
  },
})

获取当前页面的路由(url)

 	let pages = getCurrentPages();
    let currPage = null;
    // console.log(pages) 的到一个数组
    if (pages.length) {
      // 获取当前页面的前以页面的对象
      currPage = pages[pages.length - 2];
    }
    // 获取当前页面的前一页面的路由
    let route = currPage.route
    console.log(route)

获取当前页面前一页面的Url

// 获取当前页面的对象（上边所获得的数组中最后一项就是当前页面的对象）
currPage = pages[pages.length - 1];

退出小程序

微信小程序官方并没有提供退出的api。但是提供了navigator这个组件

  <navigator open-type="exit" target="miniProgram">关闭按钮</navigator>

onReady生命周期

做ui界面的操作

input隐藏属性bindchange

文字改变就触发

scroll-view调用bindscrolltolower

必须包含子控件view才会触发。

<scroll-view class='container' scroll-y="true" scroll-x="false" bindscrolltolower="onScrollLower">
<view class='view-item'></view>
</scroll-view>

快速创建页面文件

快速创建一个页面的四个文件，直接在app.json中的pages写：目录/文件名

"pages":[
 "pages/calendar/calendar",
],

pages/calendar/calendar

然后会自动生成文件：

currentTarget和target

点击图片组件image的时候，是触发事件的源组件，对应target。

而事件绑定的组件是swiper，是事件捕获的组件，对应currentTarget

//wxml
<view>
    <swiper catchtap="onSwiperTap" vertical="{{false}}" indicator-dots="true" autoplay="true" interval="5000">
        <swiper-item>
            <image id="7" src="/images/wx.png" data-postId="3"></image>
        </swiper-item>
</view>

onPostTap: function (event) {
    var postId = event.currentTarget.dataset.postid;
    // console.log("on post id is" + postId);
    wx.navigateTo({
      url: "post-detail/post-detail?id=" + postId
    })
  },
onSwiperTap: function (event) {
    // target 和currentTarget
    // target指的是当前点击的组件 和currentTarget 指的是事件捕获的组件
    // target这里指的是image，而currentTarget指的是swiper
    var postId = event.target.dataset.postid;
    wx.navigateTo({
      url: "post-detail/post-detail?id=" + postId
    })
  }

wxss

 swiper{
     width:100%;
     height:600rpx;
 }
 /*less sass*/
 swiper image{
     width:100%;
     height:600rpx;
 }

日志栏-AppData

查看运行时的数据，data

data-postid自定义数据

事件 | 微信开放文档

data-element-type ，最终会呈现为 event.currentTarget.dataset.elementType

为何选用iphone6做设计图

使用iphone6的物理分辨率来做设计图
在iphone6下750px，1px=1rpx

微信小程序支持sass

可以是sass样式编辑

数据绑定-onLoad+setData

绑定数据使用this.setData({key:value})，支持异步绑定
在onLoad里面调用，因为在onLoad才会开始数据绑定的操作。

bindTap和catchTap-冒泡事件

catch自己消耗了点击事件，捕获了点击事件。

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

如在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

小程序模板中的data里面的...item是什么意思


<template is="mytemp" data="{{...person}}"></template>

微信小程序页面跳转方法总结

微信小程序页面跳转方法总结 - 狂奔的蜗牛1031 - 博客园

微信小程序请求豆瓣api踩坑

微信小程序请求豆瓣api的时候，会报一个403(Forbidden)的错误，原因是小程序把豆瓣公开的api给禁掉了。所以我们需要使用代理。

github提供了配置好的服务器，可以免费使用，但希望不要滥用

参考：https://github.com/zce/douban-api-proxy

接口地址：https://douban.uieee.com （支持 HTTP / HTTPS）接口文档：由于是直接转发官方的接口，所以完全跟官方的接口相同，文档参考官方即可：https://developers.douban.com/wiki/?title=api_v2

例如：（使用举例）

豆瓣地址：https://api.douban.com/v2/movie/new_movies

接口地址：https://douban.uieee.comv2/movie/new_movies

。。。

王竹根

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录