个人中心 | 微信开放社区

微信小程序开发实践笔记（三）引用外部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

4收藏0评论1152浏览

如何实现小程序的强制更新

大家都知道小程序提交审核发布以后是不会马上更新版本的，用户需要下次使用才会更新到新的版本，这就是冷更新。那么如果要做到及时生效怎么办呢？这时候就要做处理了，将下面的代码添加到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

22收藏5评论5179浏览

借助小程序云开发实现小程序支付功能（含源码）

我们在做小程序支付相关的开发时，总会遇到这些难题。小程序调用微信支付时，必须要有自己的服务器，有自己的备案域名，有自己的后台开发。这就导致我们做小程序支付时的成本很大。本节就来教大家如何使用小程序云开发实现小程序支付功能的开发。不用搭建自己的服务器，不用有自己的备案域名。只需要简简单单的使用小程序云开发。老规矩先看效果图： [图片] 本节知识点 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

40收藏17评论15429浏览

富文本编辑器封装

为了方便大家便捷的使用小程序的富文本编辑器,封装了编辑器,可以直接可以等同于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

19收藏18评论8168浏览

GitHub帐号

选择需要上架的开放服务

案例类型