小程序日常问题记录

159 阅读2分钟

#####1、点击事件传参数

 <view class="grid-list" wx:for="{{activityList}}" wx:key="index" data-item='{{item}}' bindtap="activeTap"></view>

点击事件解析

activeTap: function(e) {
    console.log(e)
    let selectItem = e.currentTarget.dataset.item;
}

#####2、页面间传参数

wx.navigateTo({
    url: `../webview/webview?url=${e.currentTarget.dataset.item.url}`
})

接收参数

onLoad: function (options) {
    var url = options.url;
}

#####3、长按二维码保存至本地

//保存图片
  saveImg: function (e) {
    let url = e.currentTarget.dataset.src;
    var _this = this;
    console.log("长按");
    wx.getSetting({
      success: function (res) {
        console.log("res", res);
        wx.authorize({
          scope: 'scope.writePhotosAlbum',
          success: function (res) {
            console.log("授权成功");
            var imgUrl = url;
            wx.downloadFile({ //下载文件资源到本地,客户端直接发起一个 HTTP GET 请求,返回文件的本地临时路径
              url: imgUrl,
              success: function (res) {
                // 下载成功后再保存到本地
                wx.saveImageToPhotosAlbum({
                  filePath: res.tempFilePath, //返回的临时文件路径,下载后的文件会存储到一个临时文件
                  success: function (res) {
                    wx.showToast({
                      title: '成功保存到相册',
                      icon: 'success'
                    })
                  }
                })
              }
            })
          }
        })
      }
    })
  }

#####4、小程序解析html串 首先我们在github上下载wxParse github.com/icindy/wxPa…

image

下载完之后我们需要用到目录下的wxParse文件夹,把他拷贝到我们的项目目录下  

下面是具体的使用步骤

1.在app.wxss全局样式文件中,需要引入wxParse的样式表

@import "/page/wxParse/wxParse.wxss";

2.在需要加载html内容的页面对应的js文件里引入wxParse

var WxParse = require('../../wxParse/wxParse.js');

3.通过调用WxParse.wxParse方法来设置html内容

<pre style="font-style: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; text-indent: 0px; text-transform: none; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-size: 12px; color: rgb(0, 0, 0); font-variant-ligatures: normal; orphans: 2; text-align: left; widows: 2; font-family: &quot;Courier New&quot; !important;">/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选) */</pre>

![复制代码](https://upload-images.jianshu.io/upload_images/1728983-3b1f0f24b5096da0.gif?imageMogr2/auto-orient/strip) 

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: &quot;Courier New&quot; !important; font-size: 12px !important;">Page({
  data: {
  },
  onLoad: function () { var that = this;
    wx.request({
        url: '', 
        method: 'POST',
        data: { 'id':13 },
        header: { 'content-type': 'application/json' },
        success: function(res) { var article = res.data[0].post;
            WxParse.wxParse('article', 'html', article, that,5);
        }
    })
  }
})</pre>

4.在页面中引用模板

<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

#####5、点击大图展示图片

<image src="{{url}}" bindtap='previewImage' data-src='{{url}}' bindlongpress="saveImg"></image>
previewImage: function (e) {
    var current = e.target.dataset.src; //这里获取到的是一张本地的图片
    wx.previewImage({
      current: current, //需要预览的图片链接列表
      urls: [current] //当前显示图片的链接
    })
  }