小程序第三方插件-代码封装&&wxParse&&web-view

增强编译

在 1.02.1904282 以及之后版本的开发工具中，增加了增强编译的选项来增强ES6转ES5的能力，启用后会使用新的编译逻辑以及提供额外的选项供开发者使用。

首先在详情中的本地设置里面先设置一下增强编译：

开启以后，就可以使用async和await去获取数据，可以代替通过then来调用接口的方式，显然下面这种方式简化很多代码：

//开启增强编译 使用async和await
onLoad:async function(options){
  const allBanners = await request('http://net-music.penkuoer.com/banner', {})
  const allMovies = await request('https://api-m.mtime.cn/showtime/LocationMovies.api?locationId=290', {})
  this.setData({
    images: allBanners.data.banners,
    movies: allMovies.data.ms
  })
},
//  onLoad: function (options) {
  
//     //通过then进行调用
//     request('http://net-music.penkuoer.com/banner',{})
//       .then(res=>{
//         // console.log(res)
//         this.setData({
//           images:res.data.banners
//         })
//       })
//     request('https://api-m.mtime.cn/showtime/LocationMovies.api?locationId=290',{})
//     .then(res=>{
//       this.setData({
//         movies:res.data.ms
//       })
//     })
//   }
// }

小程序也可以进行版本管理：

点击工具栏的版本管理

依次点击初始化Git仓库，然后选择创建一个文件模板，点击确定

会生成这样一个目录

然后打开git终端，依次进行下面的命令

（1）查看文件提交状态

（2）添加至git仓库

git add .

（3）提交所有文件

$ git commit -m 'init base'

下面我们以获取电影电影详情的例子来对代码进行一个封装以及调用

（1）首先我们为电影列表的每一张图片添加一个a标签，小程序里面就是一个navigator标签、

此时在新建的组件里面进行写入：

<view class="item">
<navigator url="/pages/detail/index?id={{detail.id}}">
  <image class="coverImg" src="{{detail.img}}"></image>
</navigator>
  <text class="title">{{detail.tCn}}</text>
  <text class="desc">{{detail.commonSpecial}}</text>
</view>

（2）展示详情，在详情页detail的index.wxml中写入页面结构

  <text class="title">{{name}}</text>
  <image class="img" src="{{img}}"></image>
  <text class="story">{{story}}</text>
  <video src="{{url}}"></video>

在detail的index.js中获取通过结构赋值获取影片id：

代码封装：先创建一个新的目录api–movie.js,用来发网络请求

const {request} = require('../utils/tools.js')//发起一个网络请求
/**
 * 获取影片详情
 */
function getDetail(id){
  return request('https://ticket-api-m.mtime.cn/movie/detail.api?locationId=290&movieId='+id)
}
module.exports = {
  getDetail:getDetail  //等价于getDeatil
}//注意：此时属性值和属性名一样时，可以省掉一个

备注：utils里面的tools.js文件里面的内容是之前就写好的，这里附上，方便大家学习：

/**
 * 把request请求封装成promise对象
 */
function request(url,data,method='GET'){
  return new Promise((resolve,reject)=>{
    wx.request({
      url,
      data,
      method,
      success:resolve,
      fail:reject
    })
  })
}
module.exports = {
  request
}

——封装完成之后，我们可以在detail里面的index.js文件中进行一个引入及调用

const {getDetail} = require('../../api/movie.js')//引入封装好的获取影片详情的方法

在detail中的index.js文件中的onLoad函数中写入：

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: async function (options) {
    const {id} = options   //获取所点击影片的id
    const movieDetail1 = await getDetail(id)//等待获取详情信息结束，await需跟在promise对象之前
  //通过调用封装好的接口数据信息，定义后给变量movieDetail
  
    this.setData({//调用电影详情接口中的某所需要的数据，设置data值
      name:movieDetail1.data.data.basic.name,  
      story: movieDetail1.data.data.basic.story,
      img: movieDetail1.data.data.basic.img,
      banners: movieDetail1.data.data.basic.stageImg.list,
      url: movieDetail1.data.data.basic.video.hightUrl,
      
    })
}

在detail中的index.js文件中的data中写入：

data: {
    movie:{
      name:'',
      banners:'',
      story:'',
      url:'',
      img:''
    }
  },

然后继续在detail的index.wxml文件中设置详情页面结构：

<view>
<swiper>
<swiper-item wx:for="{{banners}}" wx:key="{{item.imgId}}">
    <image class="swiper-img" src="{{item.imgUrl}}"></image>
  </swiper-item>
</swiper>
  <text class="title">{{name}}</text>
  <image class="img" src="{{img}}"></image>
  <text class="story">{{story}}</text>
  <video src="{{url}}"></video>
</view>

写入节本样式，在detail中的index.wxss写入：

text{
  display: block;
}
.title{
  font-size: 36rpx;
  text-align: center;
}
.story{
  font-size: 32rpx;
  color: #999;
}
.swiper-img{
  width:100%;
}
.img{
  width:80%;
  margin:0 auto;
  display: block;
}
video{
  margin:0 auto;
  display: block;
}

效果实现，点击哪吒传奇电影之后的详情页面：

补充：我们在开发的时候需要显示富文本内容时，使用此插件wxParse

wxParse的使用

在以下网址下载wxParse的压缩包

https://github.com/icindy/wxParse

解压以后，将文件中的以下文件放到开发的微信小程序的根目录下：

放好之后如下：

下面需要两步：

//在使用的View中引入WxParse模块
var WxParse = require('../../wxParse/wxParse.js');

//在使用的Wxss中引入WxParse.css,可以在app.wxss
@import "/wxParse/wxParse.wxss";

然后可以在index.js中写入：

 var article = '<div style="color:red">我是HTML代码<h1>我是一个一级标题</h1></div>';
 //这里采用模板字符串，可以实现对小程序添加富文本内容
  /**
  * WxParse.wxParse(bindName , type, data, target,imagePadding)
  * 1.bindName绑定的数据名(必填)
  * 2.type可以为html或者md(必填)
  * 3.data为传入的具体数据(必填)
  * 4.target为Page对象,一般为this(必填)
  * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
  */
  var that = this;
  WxParse.wxParse('article', 'html', article, that, 5);
},

然后在index.wxml进行调用：

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

此时就可以实现在小程序中插入富文本内容

如何将一个网站页面链接到小程序里面

（1）在首页中添加一个文字链接

<navigator url="/pages/web/index">展示一个页面</navigator>

（2）然后创建一个web文件夹，以及index页面，并在web文件夹中的index.wxml中写入：

<!--pages/web/index.wxml-->
<web-view src="http://m.jd.com"></web-view>//通过src属性链接

此时点击文字链接，就可以访问到京东商城。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/149809.html