06月22, 2018

整理一些微信小程序开发的问题

一、小程序开发中涉及到适配iphone X的情况,主要解决思路: 1.获取设备型号:

cont app = getApp();
wx.getSystemInfo({
    success: function(res) {
      //model中包含着设备信息
      console.log(res.model)
      var model = res.model
      if (model.search('iPhone X') != -1){
           app.globalData.isIpx = true;
       }else{
          app.globalData.isIpx = false;
       }
    }
})

2.根据不同的设备,设置不同的css样式,例如:

xx.js
  data: {
   pBottom: "",
   pClass: ''
  },
  //在这里只需要判断是不是iphone X,然后设置下padding-bottom:即可
  onLoad: function (options) {
    let isPhone = app.globalData.isIpx;
    if(isPhone){
      this.setData({
        pBottom: "68rpx",
        pClass: 'ipx'
      })
    }
}
xx.wxml
<view class='contentView {{pClass}}' style="padding-bottom:{{pBottom}}">
***
</view>
xx.wxss
.contentView{
  width: 100%;
  background-color: #ffffff;
}
.contentView.ipx{
  background-color: #3d97f2;
}

二、微信小程序解析html

1.下载wxParse,github地址:https://github.com/icindy/wxParse; 2.把下载文件里的wxParse目录复制到小程序项目下,目录可自定义,示例为wxParse; 3.具体使用: 1)全局引用 在app.wxss文件中引入wxParse的样式:

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

2)在需要解析html内容的页面对应的js文件里引入wxParse:

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

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

WxParse.wxParse(bindName , type, data, target,imagePadding)
1.bindName绑定的数据名(必填)
2.type可以为html或者md(必填)
3.data为传入的具体数据(必填)
4.target为Page对象,一般为this(必填)
5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)

4) 在解析的文件对应的js文件里面写入:

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);
           }
       })
    }
})

5)在解析的文件的wxml文件里引入:

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

本文链接:https://baboben.com/post/miniprogram.html