https://developers.weixin.qq.com/s/agUBgEmm7Cad 附上一张截图 [图片] ## 框架目录   assets  资源文件目录   components 框架自带组件   pages  页面目录   plugin 扩展组件目录      --js 扩展js组件      --pages 组件页面      --组件文件夹   themes  框架样式       --base.wxss 主题配置      --generic.wxss 公共引用   utils   框架主体      --main.js  框架主程序 需要在 app.js 引用  import './utils/main.js'      --config.js  配置文件       --httpconfig.js 公共请求配置      --reader.js 分页读取器  wx.Reader('请求api',take)      --util.js 辅助类 通过 global 直接调用      --wx.js wx.扩展类  wx.post 请求 wx.upload 上传  wx.link 跳转       --extend  框架扩展目录   ## 为什么UI组件那么少？    1：时间少    2：设计图与UI框架差距太大，所以更是一种累赘    3：没有3 ##完全开源，代码不压缩，就是注释实在懒得写

[代码]<template>[代码][代码]  [代码][代码]<div class=[代码][代码]"cp-image"[代码] [代码]:style=[代码][代码]"_boxStyle"[代码][代码]>[代码][代码]    [代码][代码]<img[代码][代码]      [代码][代码]class=[代码][代码]"image-main"[代码][代码]      [代码][代码]:src=[代码][代码]"_src"[代码][代码]      [代码][代码]:mode=[代码][代码]"mode"[代码][代码]      [代码][代码]:style=[代码][代码]"_boxStyle"[代码][代码]      [代码][代码]:lazy-load=[代码][代码]"lazy"[代码][代码]      [代码][代码]@click=[代码][代码]"handleClick"[代码][代码]      [代码][代码]@load=[代码][代码]"handleLoad"[代码][代码]      [代码][代码]@error=[代码][代码]"handleError"[代码][代码]    [代码][代码]/>[代码][代码]    [代码][代码]<div class=[代码][代码]"loading"[代码] [代码]v-[代码][代码]if[代码][代码]=[代码][代码]"loading"[代码][代码]>[代码][代码]      [代码][代码]<img src=[代码][代码]"/static/images/base/common/image_loading.png"[代码] [代码]class=[代码][代码]"img-loading"[代码] [代码]mode=[代码][代码]"aspectFit"[代码] [代码]/>[代码][代码]    [代码][代码]</div>[代码][代码]    [代码][代码]<div class=[代码][代码]"error"[代码] [代码]v-[代码][代码]if[代码][代码]=[代码][代码]"error"[代码][代码]>[代码][代码]      [代码][代码]<img src=[代码][代码]"/static/images/base/common/image_error.png"[代码] [代码]class=[代码][代码]"img-error"[代码] [代码]mode=[代码][代码]"aspectFit"[代码] [代码]/>[代码][代码]    [代码][代码]</div>[代码][代码]  [代码][代码]</div>[代码][代码]</template>[代码] [代码]<script>[代码][代码]export [代码][代码]default[代码] [代码]{[代码][代码]  [代码][代码]props: {[代码][代码]    [代码][代码]src: {[代码][代码]      [代码][代码]type: String,[代码][代码]      [代码][代码]required: [代码][代码]true[代码][代码]    [代码][代码]},[代码][代码]    [代码][代码]mode: {[代码][代码]      [代码][代码]type: String,[代码][代码]      [代码][代码]default[代码][代码]: [代码][代码]'aspectFill'[代码][代码]    [代码][代码]},[代码][代码]    [代码][代码]width: {[代码][代码]      [代码][代码]type: Number[代码][代码]    [代码][代码]},[代码][代码]    [代码][代码]height: {[代码][代码]      [代码][代码]type: Number[代码][代码]    [代码][代码]},[代码][代码]    [代码][代码]radius: {[代码][代码]      [代码][代码]type: Number[代码][代码]    [代码][代码]},[代码][代码]    [代码][代码]lazy: {[代码][代码]      [代码][代码]type: Boolean,[代码][代码]      [代码][代码]default[代码][代码]: [代码][代码]false[代码][代码]    [代码][代码]}[代码][代码]  [代码][代码]},[代码][代码]  [代码][代码]computed: {[代码] [代码]// 此方法是为了服务端压缩图片，只有我的项目里需要[代码] [代码]    [代码][代码]_src: [代码][代码]function[代码][代码]() {[代码][代码]      [代码][代码]let _src[代码][代码]      [代码][代码]let src = [代码][代码]this[代码][代码].src[代码][代码]      [代码][代码]// 微信临时图片和已处理图片，不处理[代码][代码]      [代码][代码]if[代码] [代码](!src || src.indexOf([代码][代码]'tmp/'[代码][代码]) > -1 || src.indexOf([代码][代码]'ashx'[代码][代码]) > -1 || src.indexOf([代码][代码]'tmp_'[代码][代码]) > -1) {[代码][代码]        [代码][代码]return[代码] [代码]src[代码][代码]      [代码][代码]}[代码][代码]      [代码][代码]let dpr = [代码][代码]this[代码][代码]._sv.Base.getSystemInfo().pixelRatio[代码][代码]      [代码][代码]let args = [代码][代码]'?format=jpg&mode=high&stretch=uniform&compress=60'[代码][代码]      [代码][代码]if[代码] [代码]([代码][代码]this[代码][代码].width) {[代码][代码]        [代码][代码]args += `&width=${Math.round(dpr * [代码][代码]this[代码][代码].width)}`[代码][代码]      [代码][代码]} [代码][代码]else[代码] [代码]{[代码][代码]        [代码][代码]args += `&width=0`[代码][代码]      [代码][代码]}[代码][代码]      [代码][代码]if[代码] [代码]([代码][代码]this[代码][代码].height) {[代码][代码]        [代码][代码]args += `&height=${Math.round(dpr * [代码][代码]this[代码][代码].height)}`[代码][代码]      [代码][代码]} [代码][代码]else[代码] [代码]{[代码][代码]        [代码][代码]args += `&height=0`[代码][代码]      [代码][代码]}[代码][代码]      [代码][代码]if[代码] [代码](!src) {[代码][代码]        [代码][代码]_src = [代码][代码]''[代码][代码]      [代码][代码]} [代码][代码]else[代码] [代码]if[代码] [代码](src.indexOf([代码][代码]'?'[代码][代码]) > -1) {[代码][代码]        [代码][代码]_src = src.split([代码][代码]'?'[代码][代码][0]) + args[代码][代码]      [代码][代码]} [代码][代码]else[代码] [代码]{[代码][代码]        [代码][代码]_src = src + args[代码][代码]      [代码][代码]}[代码][代码]      [代码][代码]return[代码] [代码]_src[代码][代码]    [代码][代码]},[代码] [代码]// 计算盒子和图片的样式[代码] [代码]    [代码][代码]_boxStyle: [代码][代码]function[代码][代码]() {[代码][代码]      [代码][代码]let styles = {}[代码][代码]      [代码][代码]if[代码] [代码]([代码][代码]this[代码][代码].width) {[代码][代码]        [代码][代码]styles.width = [代码][代码]this[代码][代码].width * 2 + [代码][代码]'rpx'[代码][代码]      [代码][代码]}[代码][代码]      [代码][代码]if[代码] [代码]([代码][代码]this[代码][代码].height) {[代码][代码]        [代码][代码]styles.height = [代码][代码]this[代码][代码].height * 2 + [代码][代码]'rpx'[代码][代码]      [代码][代码]}[代码][代码]      [代码][代码]if[代码] [代码]([代码][代码]this[代码][代码].radius) {[代码][代码]        [代码][代码]styles.borderRadius = [代码][代码]this[代码][代码].radius * 2 + [代码][代码]'rpx'[代码][代码]      [代码][代码]}[代码][代码]      [代码][代码]return[代码] [代码]this[代码][代码]._util.Base.styleObj2String(styles)[代码][代码]    [代码][代码]}[代码][代码]  [代码][代码]},[代码][代码]  [代码][代码]data() {[代码][代码]    [代码][代码]return[代码] [代码]{[代码] [代码]// 关键，loading需要先置为true[代码] [代码]      [代码][代码]loading: [代码][代码]true[代码][代码],[代码][代码]      [代码][代码]error: [代码][代码]false[代码][代码]    [代码][代码]}[代码][代码]  [代码][代码]},[代码][代码]  [代码][代码]onLoad() {[代码][代码]    [代码][代码]if[代码] [代码](![代码][代码]this[代码][代码].lazy) {[代码][代码]      [代码][代码]this[代码][代码].loading = [代码][代码]true[代码][代码]    [代码][代码]}[代码][代码]  [代码][代码]},[代码][代码]  [代码][代码]methods: {[代码][代码]    [代码][代码]handleClick(e) {[代码][代码]      [代码][代码]this[代码][代码].$emit([代码][代码]'click'[代码][代码], e)[代码][代码]    [代码][代码]},[代码] [代码]    [代码][代码]handleLoad(e) {[代码][代码]      [代码][代码]this[代码][代码].loading = [代码][代码]false[代码][代码]      [代码][代码]this[代码][代码].error = [代码][代码]false[代码][代码]    [代码][代码]},[代码] [代码]    [代码][代码]handleError() {[代码][代码]      [代码][代码]this[代码][代码].loading = [代码][代码]false[代码][代码]      [代码][代码]this[代码][代码].error = [代码][代码]true[代码][代码]    [代码][代码]}[代码][代码]  [代码][代码]}[代码][代码]}[代码][代码]</script>[代码] [代码]<style lang=[代码][代码]'scss'[代码] [代码]scoped>[代码][代码].cp-image {[代码][代码]  [代码][代码]position: relative;[代码][代码]  [代码][代码]display: inline-block;[代码][代码]  [代码][代码]overflow: hidden;[代码][代码]}[代码][代码].loading,[代码][代码].error {[代码][代码]  [代码][代码]@include center();[代码][代码]  [代码][代码]position: absolute;[代码][代码]  [代码][代码]top: 0;[代码][代码]  [代码][代码]left: 0;[代码][代码]  [代码][代码]width: 100%;[代码][代码]  [代码][代码]height: 100%;[代码][代码]  [代码][代码]background: $color-bg-base;[代码][代码]  [代码][代码].img-loading,[代码][代码]  [代码][代码].img-error {[代码][代码]    [代码][代码]height: 32%;[代码][代码]  [代码][代码]}[代码][代码]}[代码][代码]</style>[代码] // mpvue的页面内使用 import image from 'components/project/image components: { 'cp-image': image } <cp-image :src="src" :width="90" :height="60" :radius="4"></cp-image>