小程序开发相关问题整理

本文由清尘发表于2018-04-30 21:40最后修改于2020-01-06属于移动前端分类

快速建立页面:

如果app.json文件下pages数组里的页面路径,指向的是一个不存在的文件,那么MINA框架会自动创建这个页面的4个文件

button按钮去除border边框

微信小程序中的button组件有特定的css,背景可以用“background:none”去掉,但是边框再用“border : none”不能去掉

需要使用:after选择器就可以实现这一功能。

使用 button::after{ border: none; } 来去除边框

小程序setData修改数组某一项的值

比如,要修改that.data.goods[0].price 的值,可以像这样,
这里是一个动态的变量

var price = 'goods['+index+'].price'

 this.setData({
      [price]:'changed data'
    })

小程序点击切换图片

点击图片,替换url为点击后的图片url。其它同级图片更换为原来的未点击的状态图片。

//js

Page({
    data: {
        imgLIst: [
            {
                url: 'noClick1.jpg',
                hoverUrl: `isClick1.jpg`
            },
            {
                url: 'noClick2.jpg',
                hoverUrl: 'isClick2.jpg'
            },
            {
                url: 'noClick3.jpg',
                hoverUrl: 'isClick3.jpg'
            }
        ],
        imgHoverIndex:0
    },

    chooseThis(e){
        this.setData({
            imgHoverIndex: e.currentTarget.dataset.index
        })
    }
})

// wxml

<block wx:for='{{imgLIst}}' wx:key='img'>
    <view class='test' bindtap='chooseThis' data-index='{{index}}'>
        <text>{{imgHoverIndex == index ?item.hoverUrl:item.url}}</text>
        <image src='{{imgHoverIndex == index ?item.hoverUrl:item.url}}'></image>
    </view>
</block>

小程序增加切换class样式

      <view wx:for="{{pdList}}" wx:key="cat_id" class="item_out">
          <view bindtap="ckpditem" data-index="{{index}}" class="pditem {{ckPdindex == index ? 'pditemon':''}} {{item.num == 0 ? 'pdclose':''}}">
          <image lazy-load='true' class="pdimg" mode="widthFix" src="{{item.src}}"></image>
          <text class="pdtag">{{item.tag}}</text>
          <text class="tit">{{item.tit}}</text>
          <text class="close_mask">领光啦</text>
          </view>
      </view>

编译时设置初始化页面及参数

每当保存刷新小程序后,项目都将从首页启动。我们不得不依次点击首页、文章列表,才能进入到文章详情页面以预览文章详情的效果,这相当的麻烦。

小程序在122100版本中增加了编译选项,在此版本中,官方提供了一个“自定义编译”功能,点击添加编译模式,可用于定义小程序的启动页面.

启动页面一栏中将路径设置为post-detail页面的启动路径:
pages/post/post-detail/post-detail
页面自定义参数类似于url中的query参数,设置id=2将可以在页面中通过onLoad函数中的options.id获取到这个值。

TIM截图20181128115618

TIM截图20181128115848

可以通过“&”连接多个页面参数,比如id=2&name=”MR.L”,同时将两个参数传递到post-detail页面中。
有了以上功能,就可以非常方便地调试post-detail页面。

小程序分享出去的详情页面带返回上一页按钮

原理,在你要分享的页面,分享配置时配置你的首页或列表页,并带上对应的参数,在首页 onLoad方法中可以获取options参数判断是否是分享页面,如果是,再跳转到详情页,会带上返回上一页的按钮

示例,详情页分享页面为列表页路径:

  onShareAppMessage: function (res) {
    var id = this.data.postcontent.id,
        title = this.data.postcontent.title.rendered;
        console.log(title)
    if(title){
      return {
        title:title,
        path: '/pages/jx818/jx818?id='+id,
        imageUrl:'https://api.ipsfan.com/jx3qx/src/share2.jpg'
  
      }
    }else{
      return {
        title:'一个没有名字的树洞',
        path: '/pages/jx818/jx818?id='+id
  
      }
    }

  }

列表页判断后跳转:

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var id = options.id;
    if(options.id){
      setTimeout(function(){
        wx.navigateTo({
          url:'/pages/jx818view/jx818view?id='+id
        })
      },100)
    }
  }

列表页判断是否是点击按钮分享和点击右上角分享功能:

  onShareAppMessage: function (res) {
    if(res.from == "button"){
      var id = res.target.dataset.id,
          title = res.target.dataset.title;
      if(title){
        return {
          title:title,
          path: '/pages/jx818/jx818?id='+id,
          imageUrl:'https://api.ipsfan.com/jx3qx/src/share2.jpg'
    
        }
      }else{
        return {
          title:'一个没有名字的树洞',
          path: '/pages/jx818/jx818?id='+id,
          imageUrl:'https://api.ipsfan.com/jx3qx/src/share2.jpg'
    
        }
      }
    }else{
      return {
        title:'剑网三树洞',
        path: '/pages/jx818/jx818',
        imageUrl:'https://api.ipsfan.com/jx3qx/src/share2.jpg'
      }
    }

  }

富文本解析插件 wxParse (可以用于详情页解析HTML代码为小程序代码)

项目地址: https://github.com/icindy/wxParse

wxParse报错解决方法: “Setting data field “content” to undefined is invalid” 错误

WxParse.wxParse() 没有返回值,所以在将他赋值给article_content的时候就会出现这个错误 只要直接调用 WxParse.wxParse() 就行

    wx.request({
      url:apiPath,
      success(res){
        var posttime = 'postcontent.date',
            content_time = _this.delpostdata(res.data.date);
            
        WxParse.wxParse('detiel', 'html',res.data.content.rendered, _this, 5);

        _this.setData({
          postcontent:res.data,
          [posttime]:content_time
        })
        wx.hideLoading()
      }
    })

wxParse处理评论列表内容:

js:


    wx.request({
      url:apiPath,
      success:(res) => {
        console.log(res)
        const comments = res.data;

        if(comments){
          this.setData({
            comments
          })

        comments.map((item,index) => {
          var str = 'comments['+index+'].content.rendered';
          WxParse.wxParse(str, 'html',item.content.rendered, this, 5); 
        })

        }

      }
    }) 

wxml:

    <view class="comment_cnt">
        <template is="wxParse" data="{{wxParseData:comments[index].content.rendered.nodes}}"/>
    </view>

小程序获取视口高度、页面高度、滚动高度:

官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/wx.createSelectorQuery.html

wx.getSystemInfoSync().windowWidth   // 获取当前窗口的宽度
wx.getSystemInfoSync().windowHeight    // 获取当前窗口的高度
wx.getSystemInfoSync().model    // 获取当前采用的设备
wx.getSystemInfoSync().pixelRatio   
wx.getSystemInfoSync().language   // 获取当前所采用的的语言
wx.getSystemInfoSync().version    // 获取当前设备的版本
  onPageScroll: function (e) {
    let _this = this,
        query = wx.createSelectorQuery(),
        phoneHeight = wx.getSystemInfoSync().windowHeight;

      query.select('#viewpage').boundingClientRect(function (res) {
        var docHeight = res.height,
            sc_top = e.scrollTop;
      console.log(docHeight)
      console.log(sc_top + phoneHeight)

    }).exec()
}

动态设置view的宽度

<view style="width:{{progressBarWidth}}" class="top_progress_bar"></view>

小程序版本更新后自动提示更新:

  onLaunch: function () {
    // 展示本地存储能力
    const updateManager = wx.getUpdateManager()

updateManager.onCheckForUpdate(function (res) {
  // 请求完新版本信息的回调
  console.log(res.hasUpdate)
})

updateManager.onUpdateReady(function () {
  wx.showModal({
    title: '更新提示',
    content: '新版本已经准备好,是否重启应用?',
    success(res) {
      if (res.confirm) {
        // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
        updateManager.applyUpdate()
      }
    }
  })
})

updateManager.onUpdateFailed(function () {
  // 新版本下载失败
})


  }

图片防盗链的referer 设置

如果你托管图片的服务器有防盗链处理,那么得将servicewechat.com放入白名单中

小程序iPhone X适配

    wx.getSystemInfo({
      success: (res)=>{
        var reg = /iPhone X/g;
        if (reg.test(res.model)) {
          this.setData({
            isIphoneX: true
          })
        }
      }
    })

wxml里可以单独增加CSS

<view class="test {{isIphoneX ?'add_iphonex':''}}">iphoneX下的CSS</view> 

微信小程序:打开设置(权限)页面

授权失败后弹出窗提示需要授权并跳转到设置页面

  chooseAddress:function(){
    wx.chooseAddress({
      success: (res) => {
        this.setData({
          addressInfo: res
        })
      },
      fail: function(err) {
        console.log(err)
        if(err.errMsg == 'chooseAddress:fail auth deny' || err.errMsg == 'chooseAddress:fail authorize no response'){
          wx.showModal({
            title: '温馨提示',
            content: '该操作需要获取您的授权',
            success(res) {
              if (res.confirm) {
                console.log('用户点击确定')
                wx.openSetting({
                  success(res) {
                    console.log(res.authSetting)
                    // res.authSetting = {
                    //   "scope.userInfo": true,
                    //   "scope.userLocation": true
                    // }
                  }
                })
                
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
          })

        }


      }
    })
  }

微信小程序进入客服会话,带上需要分享页面

效果

微信小程序官方button组件文档

主要用到以下几个属性
send-message-title 分享的标题
send-message-path 分享的路径
send-message-img 就是上图所看到的图片
show-message-card 显示会话内消息卡片(必须为true,不然没法分享)

示例代码:

 <button send-message-title="分享标题" send-message-img="分享的单个图片链接" show-message-card="true" send-message-path="../index/index?id={{id}}" class='details_button' open-type='contact' plain> </button>

小程序长按识别二维码功能

微信官方文档:
image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别

wxml:

   <view class="code_tip" bindtap="getTipCode" data-codesrc="二维码的图片地址">
      点击
  </view>

JS:

  getTipCode:function(e){
    var current = e.currentTarget.dataset.codesrc;
    wx.previewImage({
      current:current,
      urls:[current]
    })
  }

web-view内的网页判断小程序环境

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

wx.miniProgram.getEnv(function(res){
console.log(res.miniprogram)// true
if(res.miniprogram){
    // 执行小程序部分
    wx.miniProgram.navigateTo({url: '/path/index'})
}else{
    // 执行普通网页部分
}
})

微信小程序自定义导航 : 微信小程序自定义导航