小程序解析富文和ajax的封装

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介: 解析富文本

- 解析富文本

  1. wxParse

文件结构:

  • wxParse/
    -wxParse.js(必须存在)
    -html2json.js(必须存在)
    -htmlparser.js(必须存在)
    -showdown.js(必须存在)
    -wxDiscode.js(必须存在)
    -wxParse.wxml(必须存在)
    -wxParse.wxss(必须存在)
    -emojis(可选)

    2.引入必要文件
    //在要使用的页面中引入WxParse模块

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

3.将WxParse.css引入在app.wxss中

@import "/wxParse/wxParse.wxss";

4.将富文本绑定给wxParse

格式:WxParse.wxParse(参数1, 参数2, 参数3, 参数4, 参数5);
参数说明:

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

例如:

var article = '<div>我是HTML代码</div>';
var that = this;
WxParse.wxParse('article', 'html', article, that, 5);

5.模版引用

// 引入模板


//这里data中article为bindName

<template is="wxParse" data="{
   {wxParseData:article.nodes}}"/>
``
​

rich-text
//封装数据请求环境地址的统一
//env.js
module.exports={
   
  //开发环境
  dev:{
   
    baseUrl:'http://127.0.0.1:8080'
  },
  //生产环境
  prod:{
   
    baseUrl:'https://api.it120.cc'
  },
  //测试环境
  test:{
   
    baseUrl:'https://api.1909A.com'
  }
}
//业务数据请求方法的统一
//商品列表接口
//详情接口
//加入收藏
//搜索接口
//api.js
const {
    request }=require('./request.js');

//项目中用到的各种业务接口的封装

module.exports={
   

  //商品分类接口
  goodsCate:()=> {
   

    return request('shop/goods/category/all','GET','',true)

  },
  //banner图接口
  getBanner:()=>{
   },
  //商品详情接口
  getDetail:(id)=>{
   

    return request('shop/goods/detail','GET',{
   id:id},true)
  },
  //其他接口....

}


# ajax的封装(ajax:axios,wx.request,xmlHttpRequest,fetch)

//request.js 针对wx.requeste的二次封装
const {
    baseUrl } = require('./env.js').prod
//封装ajax


const vipUrl = 'hjl'
module.exports = {
   
  request: function (url, method = "GET", data = {
   }, isSubDomain = true) {
   
    let fullUrl = `${baseUrl}/${isSubDomain ? vipUrl : ''}/${
     url}`;
    wx.showLoading({
   
      title: '玩命加载中',
    })
    return new Promise((resolve, reject) => {
   
      wx.request({
   
        url: fullUrl,
        method,
        data,
        header: {
   
          'Content-type': 'application/x-www-form-urlencoded'
        },
        success(res) {
   
          // console.log('res::',res)
          if (res.statusCode === 200 && res.data.code === 0) {
   
            resolve(res.data.data)
            wx.hideLoading()
          } else {
   
            wx.showToast({
   
              title: '接口有问题,请检查',
            })
            reject('接口有问题,请检查')
          }
        },
        fail(error) {
   
          wx.showToast({
   
            title: '数据接口有问题',
          })
          reject('数据接口有问题')

        }
      })
    })
  }
}
目录
相关文章
|
6月前
|
前端开发 小程序 JavaScript
微信小程序promise封装
微信小程序promise封装
|
3月前
|
小程序 数据安全/隐私保护
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
在 `src/http` 目录下创建 `request.ts` 文件,并配置 Taro 的网络请求方法 `Taro.request`,支持多种 HTTP 方法并处理数据加密。
117 0
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
|
5月前
|
Python
Python面向对象进阶:深入解析面向对象三要素——封装、继承与多态
Python面向对象进阶:深入解析面向对象三要素——封装、继承与多态
|
4月前
|
小程序 定位技术 开发工具
【微信小程序-原生开发+TDesign】通用功能页封装——地点搜索(含腾讯地图开发key 的申请方法)
【微信小程序-原生开发+TDesign】通用功能页封装——地点搜索(含腾讯地图开发key 的申请方法)
55 0
|
6月前
|
安全 Java
Java语言中的封装技术深入解析
Java语言中的封装技术深入解析
183 1
|
5月前
|
移动开发 小程序 安全
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
|
6月前
|
Java 关系型数据库
Java类的设计与封装深入解析
Java类的设计与封装深入解析
66 0
|
6月前
|
开发框架 小程序 前端开发
微信小程序封装请求
微信小程序封装请求
|
6月前
|
小程序 前端开发 API
深入解析微信小程序全栈开发流程
【4月更文挑战第12天】本文详述了微信小程序全栈开发流程,从需求分析到发布运营。首先,需进行需求分析与规划,明确目标用户和功能。接着,前端开发使用WXML和WXSS构建页面,JavaScript处理逻辑,结合微信API实现交互。后端开发涉及数据库设计、业务逻辑处理、API接口开发及服务器运维。完成后的调试与测试确保质量,最后发布并持续优化。全栈开发涉及多种技能,理解整个流程对创建优质小程序至关重要。
262 1
|
6月前
|
前端开发
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装

推荐镜像

更多