- 微信小程序开发实践笔记(三) 引用外部js
一、我为什么会需要引用外部js? 构建轮播图模块的动态部分 any require(string path) 引入模块。返回模块通过 module.exports 或 exports 暴露的接口。 参数 名称 类型 说明 path string 需要引入模块文件相对于当前文件的相对路径,或npm模块名,或npm模块路径。不支持绝对路径 示例代码 [代码]// common.js function sayHello(name) { console.log(`Hello ${name} !`) } function sayGoodbye(name) { console.log(`Goodbye ${name} !`) } module.exports.sayHello = sayHello exports.sayGoodbye = sayGoodbye var common = require('common.js') Page({ helloMINA: function() { common.sayHello('MINA') }, goodbyeMINA: function() { common.sayGoodbye('MINA') } }) [代码] 转载 from 微信开发者文档 点击访问官方文档
2019-05-31 - 如何实现小程序的强制更新
大家都知道小程序提交审核发布以后是不会马上更新版本的,用户需要下次使用才会更新到新的版本,这就是冷更新。 那么如果要做到及时生效怎么办呢?这时候就要做处理了,将下面的代码添加到app.js,提交审核,发布就会生效了 [代码]onLaunch: [代码][代码]function[代码] [代码](options) {[代码] [代码] [代码][代码]this[代码][代码].autoUpdate()[代码] [代码] [代码][代码]},[代码] [代码] [代码][代码]autoUpdate: [代码][代码]function[代码] [代码]() {[代码] [代码] [代码][代码]var[代码] [代码]self = [代码][代码]this[代码] [代码] [代码][代码]// 获取小程序更新机制兼容[代码] [代码] [代码][代码]if[代码] [代码](wx.canIUse([代码][代码]'getUpdateManager'[代码][代码])) {[代码] [代码] [代码][代码]const updateManager = wx.getUpdateManager()[代码] [代码] [代码][代码]//1. 检查小程序是否有新版本发布[代码] [代码] [代码][代码]updateManager.onCheckForUpdate([代码][代码]function[代码] [代码](res) {[代码] [代码] [代码][代码]// 请求完新版本信息的回调[代码] [代码] [代码][代码]if[代码] [代码](res.hasUpdate) {[代码] [代码] [代码][代码]//检测到新版本,需要更新,给出提示[代码] [代码] [代码][代码]wx.showModal({[代码] [代码] [代码][代码]title: [代码][代码]'更新提示'[代码][代码],[代码] [代码] [代码][代码]content: [代码][代码]'检测到新版本,是否下载新版本并重启小程序?'[代码][代码],[代码] [代码] [代码][代码]success: [代码][代码]function[代码] [代码](res) {[代码] [代码] [代码][代码]if[代码] [代码](res.confirm) {[代码] [代码] [代码][代码]//2. 用户确定下载更新小程序,小程序下载及更新静默进行[代码] [代码] [代码][代码]self.downLoadAndUpdate(updateManager)[代码] [代码] [代码][代码]} [代码][代码]else[代码] [代码]if[代码] [代码](res.cancel) {[代码] [代码] [代码][代码]//用户点击取消按钮的处理,如果需要强制更新,则给出二次弹窗,如果不需要,则这里的代码都可以删掉了[代码] [代码] [代码][代码]wx.showModal({[代码] [代码] [代码][代码]title: [代码][代码]'温馨提示'[代码][代码],[代码] [代码] [代码][代码]content: [代码][代码]'本次版本更新涉及到新的功能添加,旧版本可能无法正常访问哦'[代码][代码],[代码] [代码] [代码][代码]showCancel: [代码][代码]false[代码][代码],[代码][代码]//隐藏取消按钮[代码] [代码] [代码][代码]confirmText: [代码][代码]"确定更新"[代码][代码],[代码][代码]//只保留确定更新按钮[代码] [代码] [代码][代码]success: [代码][代码]function[代码] [代码](res) {[代码] [代码] [代码][代码]if[代码] [代码](res.confirm) {[代码] [代码] [代码][代码]//下载新版本,并重新应用[代码] [代码] [代码][代码]self.downLoadAndUpdate(updateManager)[代码] [代码] [代码][代码]}[代码] [代码] [代码][代码]}[代码] [代码] [代码][代码]})[代码] [代码] [代码][代码]}[代码] [代码] [代码][代码]}[代码] [代码] [代码][代码]})[代码] [代码] [代码][代码]}[代码] [代码] [代码][代码]})[代码] [代码] [代码][代码]} [代码][代码]else[代码] [代码]{[代码] [代码] [代码][代码]// 如果希望用户在最新版本的客户端上体验您的小程序,可以这样子提示[代码] [代码] [代码][代码]wx.showModal({[代码] [代码] [代码][代码]title: [代码][代码]'提示'[代码][代码],[代码] [代码] [代码][代码]content: [代码][代码]'当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'[代码] [代码] [代码][代码]})[代码] [代码] [代码][代码]}[代码] [代码] [代码][代码]},[代码] [代码] [代码][代码]/**[代码] [代码] [代码][代码]* 下载小程序新版本并重启应用[代码] [代码] [代码][代码]*/[代码] [代码] [代码][代码]downLoadAndUpdate: [代码][代码]function[代码] [代码](updateManager) {[代码] [代码] [代码][代码]var[代码] [代码]self = [代码][代码]this[代码] [代码] [代码][代码]wx.showLoading();[代码] [代码] [代码][代码]//静默下载更新小程序新版本[代码] [代码] [代码][代码]updateManager.onUpdateReady([代码][代码]function[代码] [代码]() {[代码] [代码] [代码][代码]wx.hideLoading()[代码] [代码] [代码][代码]//新的版本已经下载好,调用 applyUpdate 应用新版本并重启[代码] [代码] [代码][代码]updateManager.applyUpdate()[代码] [代码] [代码][代码]})[代码] [代码] [代码][代码]updateManager.onUpdateFailed([代码][代码]function[代码] [代码]() {[代码] [代码] [代码][代码]// 新的版本下载失败[代码] [代码] [代码][代码]wx.showModal({[代码] [代码] [代码][代码]title: [代码][代码]'已经有新版本了哟'[代码][代码],[代码] [代码] [代码][代码]content: [代码][代码]'新版本已经上线啦,请您删除当前小程序,重新搜索打开哟'[代码][代码],[代码] [代码] [代码][代码]})[代码] [代码] [代码][代码]})[代码] [代码] [代码][代码]},[代码]
2019-06-07 - 借助小程序云开发实现小程序支付功能(含源码)
我们在做小程序支付相关的开发时,总会遇到这些难题。小程序调用微信支付时,必须要有自己的服务器,有自己的备案域名,有自己的后台开发。这就导致我们做小程序支付时的成本很大。本节就来教大家如何使用小程序云开发实现小程序支付功能的开发。不用搭建自己的服务器,不用有自己的备案域名。只需要简简单单的使用小程序云开发。 老规矩先看效果图: [图片] 本节知识点 1,云开发的部署和使用 2,支付相关的云函数开发 3,商品列表 4,订单列表 5,微信支付与支付成功回调 支付成功给用户发送推送消息的功能会在后面讲解。 下面就来教大家如何借助云开发使用小程序支付功能。 支付所需要用到的配置信息 1,小程序appid 2,云开发环境id 3,微信商户号 4,商户密匙 一,准备工作 1,已经申请小程序,获取小程序 AppID 和 Secret 在小程序管理后台中,【设置】 →【开发设置】 下可以获取微信小程序 AppID 和 Secret。 [图片] 2,微信支付商户号,获取商户号和商户密钥在微信支付商户管理平台中,【账户中心】→【商户信息】 下可以获取微信支付商户号。 [图片] 在【账户中心】 ‒> 【API安全】 下可以设置商户密钥。 [图片] 这里特殊说明下,个人小程序是没有办法使用微信支付的。所以如果想使用微信支付功能,必须是非个人账号(当然个人可以办个体户工商执照来注册非个人小程序账号) 3,微信开发者 IDE https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 4,开通小程序云开发功能:https://edu.csdn.net/course/play/9604/204526 二,商品列表的实现 效果图如下,由于本节重点是支付的实现,所以这里只简单贴出关键代码。 [图片] wxml布局如下: [代码]<view class="container"> <view class="good-item" wx:for="{{goods}}" wx:key="*this" ontap="getDetail" data-goodid="{{item._id}}"> <view class="good-image"> <image src="{{pic}}"></image> </view> <view class="good-detail"> <view class="title">商品: {{item.name}}</view> <view class="content">价格: {{item.price / 100}} 元 </view> <button class="button" type="primary" bindtap="makeOrder" data-goodid="{{item._id}}" >下单</button> </view> </view> </view> [代码] 我们所需要做的就是借助云开发获取云数据库里的商品信息,然后展示到商品列表,关于云开发获取商品列表并展示本节不做讲解(感兴趣的同学可以翻看我的历史博客,有写过的) 也有视频讲解: https://edu.csdn.net/course/detail/9604 [图片] 三,支付云函数的创建 首先看下我们支付云函数都包含那些内容 [图片] 简单先讲解下每个的用处 config下的index.js是做支付配置用的,主要配置支付相关的账号信息 lib是用的第三方的支付库,这里不做讲解。 重点讲解的是云函数入口 index.js 下面就来教大家如何去配置 1,配置config下的index.js, 这一步所需要做的就是把小程序appid,云开发环境ID,商户id,商户密匙。填进去。 [图片] 2,配置入口云函数 [图片] 详细代码如下,代码里注释很清除了,这里不再做单独讲解: [代码]const cloud = require('wx-server-sdk') cloud.init() const app = require('tcb-admin-node'); const pay = require('./lib/pay'); const { mpAppId, KEY } = require('./config/index'); const { WXPayConstants, WXPayUtil } = require('wx-js-utils'); const Res = require('./lib/res'); const ip = require('ip'); /** * * @param {obj} event * @param {string} event.type 功能类型 * @param {} userInfo.openId 用户的openid */ exports.main = async function(event, context) { const { type, data, userInfo } = event; const wxContext = cloud.getWXContext() const openid = userInfo.openId; app.init(); const db = app.database(); const goodCollection = db.collection('goods'); const orderCollection = db.collection('order'); // 订单文档的status 0 未支付 1 已支付 2 已关闭 switch (type) { // [在此处放置 unifiedorder 的相关代码] case 'unifiedorder': { // 查询该商品 ID 是否存在于数据库中,并将数据提取出来 const goodId = data.goodId let goods = await goodCollection.doc(goodId).get(); if (!goods.data.length) { return new Res({ code: 1, message: '找不到商品' }); } // 在云函数中提取数据,包括名称、价格才更合理安全, // 因为从端里传过来的商品数据都是不可靠的 let good = goods.data[0]; // 拼凑微信支付统一下单的参数 const curTime = Date.now(); const tradeNo = `${goodId}-${curTime}`; const body = good.name; const spbill_create_ip = ip.address() || '127.0.0.1'; // 云函数暂不支付 http 触发器,因此这里回调 notify_url 可以先随便填。 const notify_url = 'http://www.qq.com'; //'127.0.0.1'; const total_fee = good.price; const time_stamp = '' + Math.ceil(Date.now() / 1000); const out_trade_no = `${tradeNo}`; const sign_type = WXPayConstants.SIGN_TYPE_MD5; let orderParam = { body, spbill_create_ip, notify_url, out_trade_no, total_fee, openid, trade_type: 'JSAPI', timeStamp: time_stamp, }; // 调用 wx-js-utils 中的统一下单方法 const { return_code, ...restData } = await pay.unifiedOrder(orderParam); let order_id = null; if (return_code === 'SUCCESS' && restData.result_code === 'SUCCESS') { const { prepay_id, nonce_str } = restData; // 微信小程序支付要单独进地签名,并返回给小程序端 const sign = WXPayUtil.generateSignature({ appId: mpAppId, nonceStr: nonce_str, package: `prepay_id=${prepay_id}`, signType: 'MD5', timeStamp: time_stamp }, KEY); let orderData = { out_trade_no, time_stamp, nonce_str, sign, sign_type, body, total_fee, prepay_id, sign, status: 0, // 订单文档的status 0 未支付 1 已支付 2 已关闭 _openid: openid, }; let order = await orderCollection.add(orderData); order_id = order.id; } return new Res({ code: return_code === 'SUCCESS' ? 0 : 1, data: { out_trade_no, time_stamp, order_id, ...restData } }); } // [在此处放置 payorder 的相关代码] case 'payorder': { // 从端里出来相关的订单相信 const { out_trade_no, prepay_id, body, total_fee } = data; // 到微信支付侧查询是否存在该订单,并查询订单状态,看看是否已经支付成功了。 const { return_code, ...restData } = await pay.orderQuery({ out_trade_no }); // 若订单存在并支付成功,则开始处理支付 if (restData.trade_state === 'SUCCESS') { let result = await orderCollection .where({ out_trade_no }) .update({ status: 1, trade_state: restData.trade_state, trade_state_desc: restData.trade_state_desc }); let curDate = new Date(); let time = `${curDate.getFullYear()}-${curDate.getMonth() + 1}-${curDate.getDate()} ${curDate.getHours()}:${curDate.getMinutes()}:${curDate.getSeconds()}`; } return new Res({ code: return_code === 'SUCCESS' ? 0 : 1, data: restData }); } case 'orderquery': { const { transaction_id, out_trade_no } = data; // 查询订单 const { data: dbData } = await orderCollection .where({ out_trade_no }) .get(); const { return_code, ...restData } = await pay.orderQuery({ transaction_id, out_trade_no }); return new Res({ code: return_code === 'SUCCESS' ? 0 : 1, data: { ...restData, ...dbData[0] } }); } case 'closeorder': { // 关闭订单 const { out_trade_no } = data; const { return_code, ...restData } = await pay.closeOrder({ out_trade_no }); if (return_code === 'SUCCESS' && restData.result_code === 'SUCCESS') { await orderCollection .where({ out_trade_no }) .update({ status: 2, trade_state: 'CLOSED', trade_state_desc: '订单已关闭' }); } return new Res({ code: return_code === 'SUCCESS' ? 0 : 1, data: restData }); } } } [代码] 其实我们支付的关键功能都在上面这些代码里面了。 [图片] 再来看下,支付的相关流程截图 [图片] 上图就涉及到了我们的订单列表,支付状态,支付成功后的回调。 今天就先讲到这里,后面会继续给大家讲解支付的其他功能。比如支付成功后的消息推送,也是可以借助云开发实现的。 由于源码里涉及到一些私密信息,这里就不单独贴出源码下载链接了,大家感兴趣的话,可以私信我,或者在底部留言。单独找我要源码也行(微信2501902696) 视频讲解地址:https://edu.csdn.net/course/detail/24770
2019-06-11 - 富文本编辑器封装
为了方便大家便捷的使用小程序的富文本编辑器,封装了编辑器,可以直接可以等同于templete引用,引用界面只需要2行代码 效果如图: [图片] 使用说明: 1、在需要使用富文本模板页面的WXML文件中添加如下代码: <import src="/editor/editor"/> <template is=‘editor’ data=’{{formats:editor_formats}}’/> 2、在需要使用富文本模板页面的WXSS文件中添加如下代码: @import “/editor/editor.wxss” 3、在需要使用富文本模板页面的js文件中添加如下代码: [代码] var editorjs = require('../../utils/editor.js') //实例化富文本 onEditorReady() { var that = this wx.createSelectorQuery().select('#editor').context(function (res) { that.editorCtx = res.context }).exec() }, //引用editor方法 editorjs:function(e){ editorjs.editorfunction(e) }, //富文本样式改变后,向WXML传值,改变按钮选中状态方法 onStatusChange(e) { this.setData({editor_formats: e.detail}) }, //设置富文本内容方法 setEditor:function(e){ this.setData({ editorhtml:e.detail.html }) [代码] //富文本最终得到的HMTL数据为:this.data.html }, 以下为具体代码: 代码目录位置如图: [图片] (注释:editor.js文件必须放到utils文件夹下,不然手机运行时报错) edite.wxml: <template name=“editor”> <view class=‘editor_bg’> <view class=‘editor_buttonbg’> <view class=“iconfont icon-zitijiacu editor_button {{formats.bold ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“bold”></view> <view class=“iconfont icon-zitixieti editor_button {{formats.italic ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“italic”></view> <view class=“iconfont icon-zitixiahuaxian editor_button {{formats.underline ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“underline”></view> <view class=“iconfont icon-zitishanchuxian editor_button {{formats.strike ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“strike”></view> <view class=“iconfont icon-zuoduiqi editor_button {{formats.align==‘left’ ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“align” data-value=“left”></view> <view class=“iconfont icon-juzhongduiqi editor_button {{formats.align==‘center’ ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“align” data-value=“center”></view> <view class=“iconfont icon-youduiqi editor_button {{formats.align==‘right’ ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“align” data-value=“right”></view> <view class=“iconfont icon-zuoyouduiqi editor_button {{formats.align==‘justify’ ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“align” data-value=“justify”></view> <view class=“iconfont icon-line-height editor_button {{formats.lineHeight ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“lineHeight” data-value=“2”></view> <view class=“iconfont icon-Character-Spacing editor_button {{formats.letterSpacing ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“letterSpacing” data-value=“2em”></view> <view class=“iconfont icon-722bianjiqi_duanqianju editor_button {{formats.marginTop ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“marginTop” data-value=“20px”></view> <view class=“iconfont icon-723bianjiqi_duanhouju editor_button {{formats.marginBottom ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“marginBottom” data-value=“20px”></view> <view class=“iconfont icon-clearedformat editor_button” bindtap=‘editorjs’ data-bind=“removeFormat”></view> <view class=“iconfont icon-fontsize editor_button {{formats.fontSize===‘24px’ ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“fontSize” data-value=“24px”></view> <view class=“iconfont icon-font editor_button {{formats.fontFamily ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“fontFamily” data-value=“Pacifico”></view> <view class=“iconfont icon-text_color editor_button {{formats.color===’#0000ff’ ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“color” data-value="#0000ff"></view> <view class=“iconfont icon-fontbgcolor editor_button {{formats.backgroundColor===’#00ff00’ ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“backgroundColor” data-value="#00ff00"></view> <view class=“iconfont icon-date editor_button” bindtap=‘editorjs’ data-bind=“insertDate”></view> <view class=“iconfont icon–checklist editor_button” bindtap=‘editorjs’ data-bind=“format” data-name=“list” data-value=“check”></view> <view class=“iconfont icon-youxupailie editor_button {{formats.list===‘ordered’ ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“list” data-value=“ordered”></view> <view class=“iconfont icon-wuxupailie editor_button {{formats.list===‘bullet’ ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“list” data-value=“bullet”></view> <view class=“iconfont icon-undo editor_button” bindtap=‘editorjs’ data-bind=“undo”></view> <view class=“iconfont icon-redo editor_button” bindtap=‘editorjs’ data-bind=“redo”></view> <view class=“iconfont icon-outdent editor_button” bindtap=‘editorjs’ data-bind=“format” data-name=“indent” data-value="-1"></view> <view class=“iconfont icon-indent editor_button” bindtap=‘editorjs’ data-bind=“format” data-name=“indent” data-value="+1"></view> <view class=“iconfont icon-fengexian editor_button” bindtap=‘editorjs’ data-bind=“insertDivider”></view> <view class=“iconfont icon-charutupian editor_button” bindtap=‘editorjs’ data-bind=“insertImage”></view> <view class=“iconfont icon-format-header-1 editor_button {{formats.header=1 ? ‘editor_button_active’ : ‘’}}" bindtap=‘editorjs’ data-bind=“format” data-name=“header” data-value="{{1}}"></view> <view class="iconfont icon-zitixiabiao editor_button {{formats.script=‘sub’ ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“script” data-value=“sub”></view> <view class=“iconfont icon-zitishangbiao editor_button {{formats.script===‘super’ ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“script” data-value=“super”></view> <view class=“iconfont icon-shanchu editor_button” bindtap=‘editorjs’ data-bind=“clear”></view> <view class=“iconfont icon-direction-rtl editor_button {{formats.direction===‘rtl’ ? ‘editor_button_active’ : ‘’}}” bindtap=‘editorjs’ data-bind=“format” data-name=“direction” data-value=“rtl”></view> </view> <editor id=“editor” class=‘editor_area’ placeholder=“开始输入…” showImgSize showImgToolbar showImgResize bindstatuschange=“onStatusChange” bindready=“onEditorReady” bindinput=‘setEditor’> </editor> </view> </template> editor.js文件: //引用editor方法,外部唯一暴露接口 function editorfunction(e) { wx.loadFontFace({ family: ‘Pacifico’, source: ‘url(“https://sungd.github.io/Pacifico.ttf”)’, }) //获取当前工作路径,that变量等同于页面本身的this var pages = getCurrentPages(); var that = pages[pages.length - 1] var e = e.currentTarget.dataset //改变文本样式方法 if (e.bind == ‘format’) { if (!e.name) return that.editorCtx.format(e.name, e.value) } //删除字体样式方法 if (e.bind == ‘removeFormat’) { that.editorCtx.removeFormat() } //快速插入日期方法 if (e.bind == ‘insertDate’) { var date = new Date() var formatDate = [代码]${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日[代码] that.editorCtx.insertText({ text: formatDate }) } //撤销操作方法 if (e.bind == ‘undo’) { that.editorCtx.undo() } //恢复操作方法 if (e.bind == ‘redo’) { that.editorCtx.redo() } //添加分割线方法 if (e.bind == ‘insertDivider’) { that.editorCtx.insertDivider() } //清除内容方法 if (e.bind == ‘clear’) { that.editorCtx.clear() } //插入图片方法 if (e.bind == ‘insertImage’) { wx.chooseImage({ count: 1, sizeType: [‘compressed’], // 可以指定是原图还是压缩图,默认二者都有 sourceType: [‘album’, ‘camera’], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { wx.showLoading({ title: ‘加载中’, mask: true }) wx.uploadFile({ url: getApp().globalData.url + ‘activity/uploadimg’,//里填写自己的图片上传方法地址 header: {// 设置请求的 header ’content-type’: ‘multipart/form-data’ }, filePath: res.tempFilePaths[0], name: ‘img’, success(res) { wx.hideLoading() var data = JSON.parse(res.data) if (data.code == 1) { that.editorCtx.insertImage({ src: data.data, data: { id: ‘abcd’, role: ‘god’ }, }) } else { wx.showToast({ title: data.data, icon: ‘none’ }) } } }) } }) } } module.exports = { editorfunction: editorfunction,//引用editor方法,外部唯一暴露接口 } editor.wxss文件: /* 整体区域 / button::after{ border: none; } .editor_bg{ padding: 0 10rpx; width: 730rpx; background-color: #fff; font-size: 30rpx; margin-top:10rpx; } / 编辑按钮区域 / .editor_buttonbg{ display: flex; flex-wrap: wrap; width: 100%; margin-bottom: 50rpx; padding-left:18rpx; } / 富文本输入区域 / .editor_area{ background-color: white; width: 100%; box-shadow: 2rpx 2rpx 2rpx 2rpx #eee inset; padding: 0 10rpx; border-radius: 8rpx; min-height: 300rpx; height: auto; } / 按钮 / .editor_button{ width: 60rpx; height: 60rpx; line-height: 60rpx; text-align: center; background-color: white; margin-right: 18rpx; margin-bottom: 30rpx; box-shadow: 2rpx 2rpx 2rpx #999; border-radius: 8rpx; } / 已选中按钮 / .editor_button_active{ color: #06c; box-shadow: 2rpx 2rpx 2rpx #999 inset; } / 引用按钮 / .iconfont { font-family: “iconfont” !important; font-size: 36rpx; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } / 字体加粗图标 / .icon-zitijiacu:before { content: “\ec8a”; } / 字体斜体图标 / .icon-zitixieti:before { content: “\ec8f”; } / 字体下划线按钮图标 / .icon-zitixiahuaxian:before { content: “\ec8e”; } / 字体左对齐按钮图标 / .icon-zuoduiqi:before { content: “\ec91”; } / 字体居中对齐按钮图标 / .icon-juzhongduiqi:before { content: “\ec84”; } / 字体右对齐按钮图标 / .icon-youduiqi:before { content: “\ec87”; } / 字体左右对齐按钮图标 / .icon-zuoyouduiqi:before { content: “\ec94”; } / 文字2倍行距按钮图标 / .icon-line-height:before { content: “\e7f8”; } / 加大文字间距按钮 / .icon-Character-Spacing:before { content: “\e964”; } / 上边距加大20px / .icon-722bianjiqi_duanqianju:before { content: “\e660”; } / 上边距加大20px / .icon-723bianjiqi_duanhouju:before { content: “\e65f”; } / 删除文字样式 / .icon-clearedformat:before { content: “\e67e”; } / 更改字体大小 / .icon-fontsize:before { content: “\e6fd”; } / 更改字体按钮 / .icon-font:before { content: “\e684”; } / 更改字体背景 / .icon-text_color:before { content: “\e72c”; } / 更改字体颜色 / .icon-fontbgcolor:before { content: “\e678”; } / 快速添加日期方法 / .icon-date:before { content: “\e63e”; } / 添加选择框方法 / .icon–checklist:before { content: “\e664”; } / 添加有序排列图标方法 / .icon-youxupailie:before { content: “\ec86”; } / 添加无序排列图标方法 / .icon-wuxupailie:before { content: “\ec83”; } / 撤销方法 / .icon-undo:before { content: “\e633”; } / 恢复方法 / .icon-redo:before { content: “\e627”; } / 左缩进方法 / .icon-outdent:before { content: “\e6e8”; } / 右缩进方法 / .icon-indent:before { content: “\eb28”; } / 添加分割线方法 / .icon-fengexian:before { content: “\ec7f”; } / 添加图片方法 / .icon-charutupian:before { content: “\ec82”; } / 设置标题1方法 / .icon-format-header-1:before { content: “\e860”; } / 设置标题2方法 / .icon-format-header-2:before { content: “\e75c”; } / 设置标题3方法 / .icon-format-header-3:before { content: “\e75d”; } / 设置标题4方法 / .icon-format-header-4:before { content: “\e863”; } / 设置标题5方法 / .icon-format-header-5:before { content: “\e864”; } / 设置标题6方法 / .icon-format-header-6:before { content: “\e865”; } / 设置文字下角标方法 / .icon-zitixiabiao:before { content: “\ec93”; } / 设置文字上角标方法 / .icon-zitishangbiao:before { content: “\ec8c”; } / 清除内容方法 / .icon-shanchu:before { content: “\ec7b”; } / 设置文字右对齐方法 / .icon-direction-rtl:before { content: “\e66e”; } .icon-clearup:before { content: “\e64d”; } .icon-preview:before { content: “\e631”; } .icon-baocun:before { content: “\ec09”; } .icon-quanping:before { content: “\ec13”; } .icon-direction-ltr:before { content: “\e66d”; } .icon-selectall:before { content: “\e62b”; } .icon-fuzhi:before { content: “\ec7a”; } .icon-bianjisekuai:before { content: “\ec7c”; } .icon-dianzan:before { content: “\ec80”; } .icon-charulianjie:before { content: “\ec81”; } .icon-yinyong:before { content: “\ec85”; } .icon-zitidaima:before { content: “\ec88”; } .icon-xiaolian:before { content: “\ec89”; } .icon-zitishanchuxian:before { content: “\ec8b”; } .icon-zitibiaoti:before { content: “\ec8d”; } .icon-zitiyanse:before { content: “\ec90”; } .icon-zitiyulan:before { content: “\ec92”; } .icon-duigoux:before { content: “\ec9e”; } .icon-guanbi:before { content: “\eca0”; } .icon-shengyin_shiti:before { content: “\eca5”; } / 引用字体 / @font-face {font-family: “iconfont”; src: url(’//at.alicdn.com/t/font_945958_zfsfjju1dim.eot?t=1547618146468’); / IE9 / src: url(’//at.alicdn.com/t/font_945958_zfsfjju1dim.eot?t=1547618146468#iefix’) format(‘embedded-opentype’), / IE6-IE8 / url(‘data:application/x-font-woff2;charset=utf-8;base64,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’) format(‘woff2’), url(’//at.alicdn.com/t/font_945958_zfsfjju1dim.woff?t=1547618146468’) format(‘woff’), url(’//at.alicdn.com/t/font_945958_zfsfjju1dim.ttf?t=1547618146468’) format(‘truetype’), / chrome, firefox, opera, Safari, Android, iOS 4.2+ / url(’//at.alicdn.com/t/font_945958_zfsfjju1dim.svg?t=1547618146468#iconfont’) format(‘svg’); / iOS 4.1- */ } 以上为全部代码,很方便使用,不懂得可以私信我 (顺便吐槽以下,社区发布文章的编辑器真难用…)
2021-04-15