Skip to content

U
uni-app

梦里逆天 / uni-app
与 Fork 源项目一致

Fork自 DCloud / uni-app

通知 22
Star 0
Fork 0
U
uni-app

体验新版 GitCode，发现更多精彩内容 >>

提交 6f52113e 编写于 作者: H hulinNeil
浏览文件
操作

增加echart示例、图片剪切示例、可滑动九宫格示例、修改部分文字描述、优化列表到详情示例的打开速度

上级 b7c2b800
隐藏空白更改
内联 并排
Showing with 1407 addition and 53 deletion
examples/hello-uniapp/App.vue
浏览文件 @ 6f52113e
......@@ -75,7 +75,6 @@
font-size: 32px;
font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
}
.page-head {
padding: 60px 50px 80px;
text-align: center;
......@@ -265,5 +264,4 @@
background-color: #F1F1F1;
color: #353535;
}
</style>
examples/hello-uniapp/components/echarts/echarts.simple.min.js 0 → 100644
浏览文件 @ 6f52113e
因为 它太大了无法显示 source diff 。你可以改为 查看blob。
examples/hello-uniapp/components/mpvue-echarts/src/echarts.vue 0 → 100644
浏览文件 @ 6f52113e
<template>
<canvas
v-if="canvasId"
class="ec-canvas"
:id="canvasId"
:canvasId="canvasId"
@touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd"
@error="error">
</canvas>
</template>
<script>
import WxCanvas from './wx-canvas';
export default {
props: {
echarts: {
required: true,
type: Object,
default() {
return null;
},
},
onInit: {
required: true,
type: Function,
default: null,
},
canvasId: {
type: String,
default: 'ec-canvas',
},
lazyLoad: {
type: Boolean,
default: false,
},
disableTouch: {
type: Boolean,
default: false,
},
throttleTouch: {
type: Boolean,
default: false,
},
},
onReady() {
if (!this.echarts) {
console.warn('组件需绑定 echarts 变量，例：<ec-canvas id="mychart-dom-bar" '
+ 'canvas-id="mychart-bar" :echarts="echarts"></ec-canvas>');
return;
}
if (!this.lazyLoad) this.init();
},
methods: {
init() {
const version = wx.version.version.split('.').map(n => parseInt(n, 10));
const isValid = version[0] > 1 || (version[0] === 1 && version[1] > 9)
|| (version[0] === 1 && version[1] === 9 && version[2] >= 91);
if (!isValid) {
console.error('微信基础库版本过低，需大于等于 1.9.91。'
+ '参见：https://github.com/ecomfe/echarts-for-weixin'
+ '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82');
return;
}
if (!this.onInit) {
console.warn('请传入 onInit 函数进行初始化');
return;
}
const { canvasId } = this;
this.ctx = wx.createCanvasContext(canvasId);
const canvas = new WxCanvas(this.ctx, canvasId);
this.echarts.setCanvasCreator(() => canvas);
const query = wx.createSelectorQuery();
query.select(`#${canvasId}`).boundingClientRect((res) => {
if (!res) {
setTimeout(() => this.init(), 50);
return;
}
this.chart = this.onInit(canvas, res.width, res.height);
}).exec();
},
canvasToTempFilePath(opt) {
const { canvasId } = this;
this.ctx.draw(true, () => {
wx.canvasToTempFilePath({
canvasId,
...opt,
});
});
},
touchStart(e) {
const { disableTouch, chart } = this;
if (disableTouch || !chart || !e.mp.touches.length) return;
const touch = e.mp.touches[0];
chart._zr.handler.dispatch('mousedown', {
zrX: touch.x,
zrY: touch.y,
});
chart._zr.handler.dispatch('mousemove', {
zrX: touch.x,
zrY: touch.y,
});
},
touchMove(e) {
const {
disableTouch, throttleTouch, chart, lastMoveTime,
} = this;
if (disableTouch || !chart || !e.mp.touches.length) return;
if (throttleTouch) {
const currMoveTime = Date.now();
if (currMoveTime - lastMoveTime < 240) return;
this.lastMoveTime = currMoveTime;
}
const touch = e.mp.touches[0];
chart._zr.handler.dispatch('mousemove', {
zrX: touch.x,
zrY: touch.y,
});
},
touchEnd(e) {
const { disableTouch, chart } = this;
if (disableTouch || !chart) return;
const touch = e.mp.changedTouches ? e.mp.changedTouches[0] : {};
chart._zr.handler.dispatch('mouseup', {
zrX: touch.x,
zrY: touch.y,
});
chart._zr.handler.dispatch('click', {
zrX: touch.x,
zrY: touch.y,
});
},
},
};
</script>
<style scoped>
.ec-canvas {
width: 100%;
height: 100%;
}
</style>
examples/hello-uniapp/components/mpvue-echarts/src/wx-canvas.js 0 → 100644
浏览文件 @ 6f52113e
export default class WxCanvas {
constructor(ctx, canvasId) {
this.ctx = ctx;
this.canvasId = canvasId;
this.chart = null;
WxCanvas.initStyle(ctx);
this.initEvent();
}
getContext(contextType) {
return contextType === '2d' ? this.ctx : null;
}
setChart(chart) {
this.chart = chart;
}
attachEvent() {
// noop
}
detachEvent() {
// noop
}
static initStyle(ctx) {
const styles = ['fillStyle', 'strokeStyle', 'globalAlpha',
'textAlign', 'textBaseAlign', 'shadow', 'lineWidth',
'lineCap', 'lineJoin', 'lineDash', 'miterLimit', 'fontSize'];
styles.forEach((style) => {
Object.defineProperty(ctx, style, {
set: (value) => {
if ((style !== 'fillStyle' && style !== 'strokeStyle')
|| (value !== 'none' && value !== null)
) {
ctx[`set${style.charAt(0).toUpperCase()}${style.slice(1)}`](value);
}
},
});
});
ctx.createRadialGradient = () => ctx.createCircularGradient(arguments);
}
initEvent() {
this.event = {};
const eventNames = [{
wxName: 'touchStart',
ecName: 'mousedown',
}, {
wxName: 'touchMove',
ecName: 'mousemove',
}, {
wxName: 'touchEnd',
ecName: 'mouseup',
}, {
wxName: 'touchEnd',
ecName: 'click',
}];
eventNames.forEach((name) => {
this.event[name.wxName] = (e) => {
const touch = e.mp.touches[0];
this.chart._zr.handler.dispatch(name.ecName, {
zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
zrY: name.wxName === 'tap' ? touch.clientY : touch.y,
});
};
});
}
}
examples/hello-uniapp/components/page-foot.vue 0 → 100644
浏览文件 @ 6f52113e
<template name="page-foot">
<view class="page-share-title">
<text>感谢{{name}}提供本示例，</text>
<text class="submit" @tap="submit">我也提交</text>
</view>
</template>
<script>
export default {
name: "page-foot",
props: {
name: {
type: String,
default: ""
}
},
methods: {
submit() {
uni.showModal({
content:"hello uni-app开源地址为https://github.com/dcloudio/uni-app/tree/master/examples，请在这个开源项目上贡献你的代码",
showCancel:false
})
}
}
}
</script>
<style>
.page-share-title {
text-align: center;
font-size: 30px;
color: #BEBEBE;
margin: 20px 0;
}
.submit {
border-bottom: 1px solid #BEBEBE;
}
</style>
examples/hello-uniapp/pages.json
浏览文件 @ 6f52113e
{
"pages": [ //pages数组中第一项表示应用启动页
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/component/component",
"style": {
"navigationBarTitleText": "组件",
"app-plus":{
"titleNView":{
"titleText":"组件",
"buttons":[{
"text":"\ue534",
"fontSrc":"_www/static/uni.ttf",
"fontSrc":"/static/uni.ttf",
"fontSize":"22px",
"color":"#999999"
}]
......@@ -22,10 +21,9 @@
"navigationBarTitleText": "接口",
"app-plus":{
"titleNView":{
"titleText":"接口",
"buttons":[{
"text":"\ue534",
"fontSrc":"_www/static/uni.ttf",
"fontSrc":"/static/uni.ttf",
"fontSize":"22px",
"color":"#999999"
}]
......@@ -38,10 +36,9 @@
"navigationBarTitleText": "模版",
"app-plus":{
"titleNView":{
"titleText":"模版",
"buttons":[{
"text":"\ue534",
"fontSrc":"_www/static/uni.ttf",
"fontSrc":"/static/uni.ttf",
"fontSize":"22px",
"color":"#999999"
}]
......@@ -113,6 +110,11 @@
"style": {
"navigationBarTitleText": "picker"
}
}, {
"path": "pages/component/picker-view/picker-view",
"style": {
"navigationBarTitleText": "picker-view"
}
}, {
"path": "pages/component/radio/radio",
"style": {
......@@ -214,15 +216,20 @@
"navigationBarTitleText": "设置界面标题"
}
}, {
"path": "pages/API/navigation-bar-loading/navigation-bar-loading",
"path": "pages/API/show-loading/show-loading",
"style": {
"navigationBarTitleText": "标题栏加载动画"
"navigationBarTitleText": "加载提示框"
}
}, {
"path": "pages/API/navigator/navigator",
"style": {
"navigationBarTitleText": "页面跳转"
}
}, {
"path": "pages/API/navigator/new-page/new-page",
"style": {
"navigationBarTitleText": "新页面"
}
}, {
"path": "pages/API/pull-down-refresh/pull-down-refresh",
"style": {
......@@ -399,6 +406,11 @@
"style": {
"navigationBarTitleText": "九宫格"
}
}, {
"path": "pages/template/grid-pagination/grid-pagination",
"style": {
"navigationBarTitleText": "左右拖动分页9宫格"
}
}, {
"path": "pages/template/drag-right/drag-right",
"style": {
......@@ -482,6 +494,16 @@
"style": {
"navigationBarTitleText": "二维码生成"
}
}, {
"path": "pages/template/crop/crop",
"style": {
"navigationBarTitleText": "图片裁剪"
}
}, {
"path": "pages/template/echart/echart",
"style": {
"navigationBarTitleText": "echart图表"
}
}, {
"path": "platforms/app-plus/about/about",
"style": {
......@@ -491,7 +513,7 @@
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "演示",
"navigationBarTitleText": "Hello uniapp",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
......@@ -514,7 +536,7 @@
"pagePath": "pages/template/template",
"iconPath": "static/template.png",
"selectedIconPath": "static/templateHL.png",
"text": "模版"
"text": "模板"
}]
}
}
examples/hello-uniapp/pages/API/API.vue
浏览文件 @ 6f52113e
......@@ -33,9 +33,6 @@
pages: [{
name: '设置界面标题',
url: 'set-navigation-bar-title'
}, {
name: '标题栏加载动画',
url: 'navigation-bar-loading'
}, {
name: '页面跳转',
url: 'navigator'
......@@ -54,6 +51,9 @@
}, {
name: '显示模态弹窗',
url: 'modal'
}, {
name: '显示加载提示框',
url: 'show-loading'
}, {
name: '显示消息提示框',
url: 'toast'
......
examples/hello-uniapp/pages/API/file/file.vue
浏览文件 @ 6f52113e
......@@ -23,7 +23,7 @@
<button @tap="clear">删除文件</button>
</view>
<view class="btn-area">
<button @tap="openDocument">打开文件</button>
<button @tap="openDocument">打开pdf文件</button>
</view>
</view>
</view>
......
examples/hello-uniapp/pages/API/navigator/new-page/new-page.vue 0 → 100644
浏览文件 @ 6f52113e
<template>
<view class="root">
<page-head :title="title"></page-head>
<view class="page-body">
{{data}}
</view>
</view>
</template>
<script>
import pageHead from '../../../../components/page-head.vue'
export default {
data() {
return {
title: '新页面',
data:""
}
},
onLoad(e){
if(e.data){
this.data = e.data;
}
},
components: {
pageHead
}
}
</script>
<style>
page{
display: flex;
min-height: 100%;
}
.root{
display: flex;
flex: 1;
flex-direction: column;
}
.page-body{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
</style>
\ No newline at end of file
examples/hello-uniapp/pages/API/show-loading/show-loading.vue 0 → 100644
浏览文件 @ 6f52113e
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="btn-area">
<button class="btn-load" @tap="showLoading">显示 loading 提示框</button>
<button @tap="hideLoading">隐藏 loading 提示框</button>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
title: 'loading'
}
},
methods: {
showLoading: function () {
uni.showLoading()
},
hideLoading: function () {
uni.hideLoading()
}
},
components: {
pageHead
}
}
</script>
<style>
.btn-load {
background-color: #007aff;
color: #ffffff;
}
</style>
examples/hello-uniapp/pages/component/picker-view/picker-view.vue 0 → 100644
浏览文件 @ 6f52113e
<template>
<view>
<page-head :title="title"></page-head>
<view class="title">日期：{{year}}年{{month}}月{{day}}日</view>
<picker-view indicator-style="height: 50px;" :value="value" @change="bindChange">
<picker-view-column>
<view class="item" v-for="item in years">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="item in months">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="item in days">{{item}}日</view>
</picker-view-column>
</picker-view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data: function () {
const date = new Date()
const years = []
const months = []
const days = []
for (let i = 1990; i <= date.getFullYear(); i++) {
years.push(i)
}
for (let i = 1; i <= 12; i++) {
months.push(i)
}
for (let i = 1; i <= 31; i++) {
days.push(i)
}
return {
title: 'picker-view',
years: years,
year: date.getFullYear(),
months: months,
month: 2,
days: days,
day: 2,
value: [9999, 1, 1]
}
},
methods: {
bindChange: function (e) {
const val = e.detail.value
this.year = this.years[val[0]]
this.month = this.months[val[1]]
this.day = this.days[val[2]]
}
},
components: {
pageHead
}
}
</script>
<style>
.title {
padding: 0 50px;
}
picker-view {
width: 100%;
height: 600px;
margin-top: 50px;
}
.item {
line-height: 100px;
text-align: center;
}
</style>
examples/hello-uniapp/pages/template/crop/crop.vue 0 → 100644
浏览文件 @ 6f52113e
<template>
<view class="container">
<view class="page-body uni-content-info">
<view class='cropper-content'>
<view v-if="isShowImg" class="uni-corpper" :style="'width:'+cropperInitW+'px;height:'+cropperInitH+'px;background:#000'">
<view class="uni-corpper-content" :style="'width:'+cropperW+'px;height:'+cropperH+'px;left:'+cropperL+'px;top:'+cropperT+'px'">
<image :src="imageSrc" :style="'width:'+cropperW+'px;height:'+cropperH+'px'"></image>
<view class="uni-corpper-crop-box" @touchstart.stop="contentStartMove" @touchmove.stop="contentMoveing" @touchend.stop="contentTouchEnd"
:style="'left:'+cutL+'px;top:'+cutT+'px;right:'+cutR+'px;bottom:'+cutB+'px'">
<view class="uni-cropper-view-box">
<view class="uni-cropper-dashed-h"></view>
<view class="uni-cropper-dashed-v"></view>
<view class="uni-cropper-line-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
<view class="uni-cropper-line-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
<view class="uni-cropper-line-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
<view class="uni-cropper-line-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-tr" data-drag="topTight"></view>
<view class="uni-cropper-point point-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-rb" data-drag="rightBottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove" @touchend.stop="dragEnd"></view>
<view class="uni-cropper-point point-bl" data-drag="bottomLeft"></view>
<view class="uni-cropper-point point-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-lt" data-drag="leftTop"></view>
</view>
</view>
</view>
</view>
</view>
<view class='cropper-config'>
<button type="primary reverse" @click="getImage" style='margin-top: 30px;'> 选择图片 </button>
<button type="warn" @click="getImageInfo" style='margin-top: 30px;'> 点击生成图片 </button>
</view>
<canvas canvas-id="myCanvas" :style="'position:absolute;border: 1px solid red; width:'+imageW+'px;height:'+imageH+'px;top:-9999px;left:-9999px;'"></canvas>
</view>
<page-foot :name="name"></page-foot>
</view>
</template>
<script>
import pageFoot from '../../../components/page-foot.vue';
let sysInfo = uni.getSystemInfoSync();
let SCREEN_WIDTH = sysInfo.screenWidth
let PAGE_X, // 手按下的x位置
PAGE_Y, // 手按下y的位置
PR = sysInfo.pixelRatio, // dpi
T_PAGE_X, // 手移动的时候x的位置
T_PAGE_Y, // 手移动的时候Y的位置
CUT_L, // 初始化拖拽元素的left值
CUT_T, // 初始化拖拽元素的top值
CUT_R, // 初始化拖拽元素的
CUT_B, // 初始化拖拽元素的
CUT_W, // 初始化拖拽元素的宽度
CUT_H, // 初始化拖拽元素的高度
IMG_RATIO, // 图片比例
IMG_REAL_W, // 图片实际的宽度
IMG_REAL_H, // 图片实际的高度
DRAFG_MOVE_RATIO = 1, //移动时候的比例,
INIT_DRAG_POSITION = 100, // 初始化屏幕宽度和裁剪区域的宽度之差，用于设置初始化裁剪的宽度
DRAW_IMAGE_W = sysInfo.screenWidth // 设置生成的图片宽度
export default {
/**
* 页面的初始数据
*/
data() {
return {
name:'杨大宝',
imageSrc: 'http://www.bing.com/az/hprichbg/rb/BulgariaPerseids_ZH-CN11638911564_1920x1080.jpg',
isShowImg: false,
// 初始化的宽高
cropperInitW: SCREEN_WIDTH,
cropperInitH: SCREEN_WIDTH,
// 动态的宽高
cropperW: SCREEN_WIDTH,
cropperH: SCREEN_WIDTH,
// 动态的left top值
cropperL: 0,
cropperT: 0,
transL: 0,
transT: 0,
// 图片缩放值
scaleP: 0,
imageW: 0,
imageH: 0,
// 裁剪框 宽高
cutL: 0,
cutT: 0,
cutB: SCREEN_WIDTH,
cutR: '100%',
qualityWidth: DRAW_IMAGE_W,
innerAspectRadio: DRAFG_MOVE_RATIO
}
},
components: {
pageFoot
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {},
/**
* 生命周期函数--监听页面初次渲染完成
*/
mounted: function () {
this.loadImage();
},
methods: {
setData: function (obj) {
let that = this;
Object.keys(obj).forEach(function (key) {
that.$set(that.$data, key, obj[key])
});
},
getImage: function () {
var _this = this
uni.chooseImage({
success: function (res) {
_this.setData({
imageSrc: res.tempFilePaths[0],
})
_this.loadImage();
},
})
},
loadImage: function () {
var _this = this
uni.showLoading({
title: '图片加载中...',
})
uni.getImageInfo({
src: _this.imageSrc,
success: function success(res) {
IMG_RATIO = res.width / res.height
if (IMG_RATIO >= 1) {
IMG_REAL_W = SCREEN_WIDTH
IMG_REAL_H = SCREEN_WIDTH / IMG_RATIO
} else {
IMG_REAL_W = SCREEN_WIDTH * IMG_RATIO
IMG_REAL_H = SCREEN_WIDTH
}
let minRange = IMG_REAL_W > IMG_REAL_H ? IMG_REAL_W : IMG_REAL_H
INIT_DRAG_POSITION = minRange > INIT_DRAG_POSITION ? INIT_DRAG_POSITION : minRange
// 根据图片的宽高显示不同的效果 保证图片可以正常显示
if (IMG_RATIO >= 1) {
let cutT = Math.ceil((SCREEN_WIDTH / IMG_RATIO - (SCREEN_WIDTH / IMG_RATIO - INIT_DRAG_POSITION)) / 2);
let cutB = cutT;
let cutL = Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH + INIT_DRAG_POSITION) / 2);
let cutR = cutL;
_this.setData({
cropperW: SCREEN_WIDTH,
cropperH: SCREEN_WIDTH / IMG_RATIO,
// 初始化left right
cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2),
cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO) / 2),
cutL: cutL,
cutT: cutT,
cutR: cutR,
cutB: cutB,
// 图片缩放值
imageW: IMG_REAL_W,
imageH: IMG_REAL_H,
scaleP: IMG_REAL_W / SCREEN_WIDTH,
qualityWidth: DRAW_IMAGE_W,
innerAspectRadio: IMG_RATIO
})
} else {
let cutL = Math.ceil((SCREEN_WIDTH * IMG_RATIO - (SCREEN_WIDTH * IMG_RATIO)) / 2);
let cutR = cutL;
let cutT = Math.ceil((SCREEN_WIDTH - INIT_DRAG_POSITION) / 2);
let cutB = cutT;
_this.setData({
cropperW: SCREEN_WIDTH * IMG_RATIO,
cropperH: SCREEN_WIDTH,
// 初始化left right
cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO) / 2),
cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2),
cutL: cutL,
cutT: cutT,
cutR: cutR,
cutB: cutB,
// 图片缩放值
imageW: IMG_REAL_W,
imageH: IMG_REAL_H,
scaleP: IMG_REAL_W / SCREEN_WIDTH,
qualityWidth: DRAW_IMAGE_W,
innerAspectRadio: IMG_RATIO
})
}
_this.setData({
isShowImg: true
})
uni.hideLoading()
}
})
},
// 拖动时候触发的touchStart事件
contentStartMove(e) {
PAGE_X = e.touches[0].pageX
PAGE_Y = e.touches[0].pageY
},
// 拖动时候触发的touchMove事件
contentMoveing(e) {
var _this = this
var dragLengthX = (PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
var dragLengthY = (PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
// 左移
if (dragLengthX > 0) {
if (this.cutL - dragLengthX < 0) dragLengthX = this.cutL
} else {
if (this.cutR + dragLengthX < 0) dragLengthX = -this.cutR
}
if (dragLengthY > 0) {
if (this.cutT - dragLengthY < 0) dragLengthY = this.cutT
} else {
if (this.cutB + dragLengthY < 0) dragLengthY = -this.cutB
}
this.setData({
cutL: this.cutL - dragLengthX,
cutT: this.cutT - dragLengthY,
cutR: this.cutR + dragLengthX,
cutB: this.cutB + dragLengthY
})
PAGE_X = e.touches[0].pageX
PAGE_Y = e.touches[0].pageY
},
contentTouchEnd() {
},
// 获取图片
getImageInfo() {
var _this = this;
uni.showLoading({
title: '图片生成中...',
});
// 将图片写入画布
const ctx = uni.createCanvasContext('myCanvas');
ctx.drawImage(_this.imageSrc, 0, 0, IMG_REAL_W, IMG_REAL_H);
ctx.draw(true, () => {
// 获取画布要裁剪的位置和宽度 均为百分比 * 画布中图片的宽度 保证了在微信小程序中裁剪的图片模糊 位置不对的问题 canvasT = (_this.cutT / _this.cropperH) * (_this.imageH / pixelRatio)
var canvasW = ((_this.cropperW - _this.cutL - _this.cutR) / _this.cropperW) * IMG_REAL_W;
var canvasH = ((_this.cropperH - _this.cutT - _this.cutB) / _this.cropperH) * IMG_REAL_H;
var canvasL = (_this.cutL / _this.cropperW) * IMG_REAL_W;
var canvasT = (_this.cutT / _this.cropperH) * IMG_REAL_H;
uni.canvasToTempFilePath({
x: canvasL,
y: canvasT,
width: canvasW,
height: canvasH,
destWidth: canvasW,
destHeight: canvasH,
quality: 0.5,
canvasId: 'myCanvas',
success: function (res) {
uni.hideLoading()
// 成功获得地址的地方
uni.previewImage({
current: '', // 当前显示图片的http链接
urls: [res.tempFilePath] // 需要预览的图片http链接列表
})
}
});
});
},
// 设置大小的时候触发的touchStart事件
dragStart(e) {
T_PAGE_X = e.touches[0].pageX
T_PAGE_Y = e.touches[0].pageY
CUT_L = this.cutL
CUT_R = this.cutR
CUT_B = this.cutB
CUT_T = this.cutT
},
// 设置大小的时候触发的touchMove事件
dragMove(e) {
var _this = this
var dragType = e.target.dataset.drag
switch (dragType) {
case 'right':
var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
if (CUT_R + dragLength < 0) dragLength = -CUT_R
this.setData({
cutR: CUT_R + dragLength
})
break;
case 'left':
var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
if (CUT_L - dragLength < 0) dragLength = CUT_L
if ((CUT_L - dragLength) > (this.cropperW - this.cutR)) dragLength = CUT_L - (this.cropperW - this.cutR)
this.setData({
cutL: CUT_L - dragLength
})
break;
case 'top':
var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
if (CUT_T - dragLength < 0) dragLength = CUT_T
if ((CUT_T - dragLength) > (this.cropperH - this.cutB)) dragLength = CUT_T - (this.cropperH - this.cutB)
this.setData({
cutT: CUT_T - dragLength
})
break;
case 'bottom':
var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
if (CUT_B + dragLength < 0) dragLength = -CUT_B
this.setData({
cutB: CUT_B + dragLength
})
break;
case 'rightBottom':
var dragLengthX = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
var dragLengthY = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
if (CUT_B + dragLengthY < 0) dragLengthY = -CUT_B
if (CUT_R + dragLengthX < 0) dragLengthX = -CUT_R
let cutB = CUT_B + dragLengthY;
let cutR = CUT_R + dragLengthX;
this.setData({
cutB: cutB,
cutR: cutR
})
break;
default:
break;
}
}
}
}
</script>
<style>
/* pages/uni-cropper/index.wxss */
.uni-content-info {
/* position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
align-items: center;
flex-direction: column; */
}
.cropper-config {
padding: 20px 40px;
}
.cropper-content {
min-height: 750px;
width: 100%;
}
.uni-corpper {
position: relative;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
box-sizing: border-box;
}
.uni-corpper-content {
position: relative;
}
.uni-corpper-content image {
display: block;
width: 100%;
min-width: 0 !important;
max-width: none !important;
height: 100%;
min-height: 0 !important;
max-height: none !important;
image-orientation: 0deg !important;
margin: 0 auto;
}
/* 移动图片效果 */
.uni-cropper-drag-box {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: move;
background: rgba(0, 0, 0, 0.6);
z-index: 1;
}
/* 内部的信息 */
.uni-corpper-crop-box {
position: absolute;
background: rgba(255, 255, 255, 0.3);
z-index: 2;
}
.uni-corpper-crop-box .uni-cropper-view-box {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: visible;
outline: 1px solid #69f;
outline-color: rgba(102, 153, 255, .75)
}
/* 横向虚线 */
.uni-cropper-dashed-h {
position: absolute;
top: 33.33333333%;
left: 0;
width: 100%;
height: 33.33333333%;
border-top: 1px dashed rgba(255, 255, 255, 0.5);
border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
}
/* 纵向虚线 */
.uni-cropper-dashed-v {
position: absolute;
left: 33.33333333%;
top: 0;
width: 33.33333333%;
height: 100%;
border-left: 1px dashed rgba(255, 255, 255, 0.5);
border-right: 1px dashed rgba(255, 255, 255, 0.5);
}
/* 四个方向的线 为了之后的拖动事件*/
.uni-cropper-line-t {
position: absolute;
display: block;
width: 100%;
background-color: #69f;
top: 0;
left: 0;
height: 1px;
opacity: 0.1;
cursor: n-resize;
}
.uni-cropper-line-t::before {
content: '';
position: absolute;
top: 50%;
right: 0px;
width: 100%;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
bottom: 0;
height: 41px;
background: transparent;
z-index: 11;
}
.uni-cropper-line-r {
position: absolute;
display: block;
background-color: #69f;
top: 0;
right: 0px;
width: 1px;
opacity: 0.1;
height: 100%;
cursor: e-resize;
}
.uni-cropper-line-r::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 41px;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
bottom: 0;
height: 100%;
background: transparent;
z-index: 11;
}
.uni-cropper-line-b {
position: absolute;
display: block;
width: 100%;
background-color: #69f;
bottom: 0;
left: 0;
height: 1px;
opacity: 0.1;
cursor: s-resize;
}
.uni-cropper-line-b::before {
content: '';
position: absolute;
top: 50%;
right: 0px;
width: 100%;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
bottom: 0;
height: 41px;
background: transparent;
z-index: 11;
}
.uni-cropper-line-l {
position: absolute;
display: block;
background-color: #69f;
top: 0;
left: 0;
width: 1px;
opacity: 0.1;
height: 100%;
cursor: w-resize;
}
.uni-cropper-line-l::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 41px;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
bottom: 0;
height: 100%;
background: transparent;
z-index: 11;
}
.uni-cropper-point {
width: 5px;
height: 5px;
background-color: #69f;
opacity: .75;
position: absolute;
z-index: 3;
}
.point-t {
top: -3px;
left: 50%;
margin-left: -3px;
cursor: n-resize;
}
.point-tr {
top: -3px;
left: 100%;
margin-left: -3px;
cursor: n-resize;
}
.point-r {
top: 50%;
left: 100%;
margin-left: -3px;
margin-top: -3px;
cursor: n-resize;
}
.point-rb {
left: 100%;
top: 100%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
cursor: n-resize;
width: 36px;
height: 36px;
background-color: #69f;
position: absolute;
z-index: 1112;
opacity: 1;
}
.point-b {
left: 50%;
top: 100%;
margin-left: -3px;
margin-top: -3px;
cursor: n-resize;
}
.point-bl {
left: 0%;
top: 100%;
margin-left: -3px;
margin-top: -3px;
cursor: n-resize;
}
.point-l {
left: 0%;
top: 50%;
margin-left: -3px;
margin-top: -3px;
cursor: n-resize;
}
.point-lt {
left: 0%;
top: 0%;
margin-left: -3px;
margin-top: -3px;
cursor: n-resize;
}
/* 裁剪框预览内容 */
.uni-cropper-viewer {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.uni-cropper-viewer image {
position: absolute;
z-index: 2;
}
</style>
examples/hello-uniapp/pages/template/echart/echart.vue 0 → 100644
浏览文件 @ 6f52113e
<template>
<div class="container">
<view class="canvasView">
<view class="title">饼图示例</view>
<mpvue-echarts :echarts="echarts" :onInit="pieInit" canvasId="pie" />
</view>
<view class="canvasView">
<view class="title">折线图示例</view>
<mpvue-echarts :echarts="echarts" :onInit="lineInit" canvasId="line" />
</view>
</div>
</template>
<script>
import * as echarts from '../../../components/echarts/echarts.simple.min.js';
import mpvueEcharts from '../../../components/mpvue-echarts/src/echarts.vue';
function getPieOption() {
return {
animation:false,
backgroundColor: '#F8F8F8',
color: ['#37A2DA', '#32C5E9', '#67E0E3', '#91F2DE', '#FFDB5C', '#FF9F7F'],
series: [{
label: {
normal: {
fontSize: 14
}
},
type: 'pie',
center: ['50%', '50%'],
radius: [0, '60%'],
data: [{
value: 55,
name: '北京'
}, {
value: 20,
name: '武汉'
}, {
value: 10,
name: '杭州'
}, {
value: 20,
name: '广州'
}, {
value: 38,
name: '上海'
}],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 2, 2, 0.3)'
}
}
}]
}
}
function getLineOption() {
return {
animation: false,
color: ['#37A2DA', '#9FE6B8'],
legend: {
data: ['蒸发量', '降水量']
},
grid: {
x: 35,
x2: 10,
y: 30,
y2: 25
},
calculable: false,
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}],
yAxis: [{
type: 'value',
splitArea: {
show: true
}
}],
series: [{
name: '蒸发量',
type: 'line',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
}, {
name: '降水量',
type: 'line',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}]
}
}
export default {
data() {
return {
echarts,
pieInit: function (canvas, width, height) {
let pieChart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(pieChart)
pieChart.setOption(getPieOption())
return pieChart
},
lineInit: function (canvas, width, height) {
let lineChart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(lineChart)
lineChart.setOption(getLineOption())
return lineChart
}
}
},
components: {
mpvueEcharts
}
}
</script>
<style>
page,
view {
display: flex;
/* uni-app默认使用flex布局。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。如不了解flex布局，请参考http://www.w3.org/TR/css3-flexbox/。若不需要flex布局可删除本行*/
}
page {
min-height: 100%;
}
.title{
margin-left: 30px;
color: #8f8f94;
}
.container,
.canvasView {
flex: 1;
flex-direction: column;
}
</style>
examples/hello-uniapp/pages/template/grid-pagination/grid-pagination.vue 0 → 100644
浏览文件 @ 6f52113e
<template>
<view class="page">
<page-head :title="title"></page-head>
<view class="uni-list">
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">循环</view>
<switch @change="switchChange"/>
</view>
</view>
<swiper :indicator-dots="true" :autoplay="true" :circular="isCircular">
<swiper-item>
<view class="uni-grid-9">
<view class="uni-grid-9-item" hover-class="uni-grid-9-item-hover" v-for="(item,index) in date" :key="index" :class="index % 3 === 2 ? 'no-border-right' : ''">
<image class="uni-grid-9-image" :src="item"></image>
<text class="uni-grid-9-text">grid</text>
</view>
</view>
</swiper-item>
<swiper-item>
<view class="uni-grid-9">
<view class="uni-grid-9-item" hover-class="uni-grid-9-item-hover" v-for="(item,index) in date" :key="index" :class="index % 3 === 2 ? 'no-border-right' : ''">
<image class="uni-grid-9-image" :src="item"></image>
<text class="uni-grid-9-text">grid</text>
</view>
</view>
</swiper-item>
<swiper-item>
<view class="uni-grid-9">
<view class="uni-grid-9-item" hover-class="uni-grid-9-item-hover" v-for="(item,index) in date" :key="index" :class="index % 3 === 2 ? 'no-border-right' : ''">
<image class="uni-grid-9-image" :src="item"></image>
<text class="uni-grid-9-text">grid</text>
</view>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data(){
return {
title: 'grid',
date: ["../../../static/c1.png", "../../../static/c2.png", "../../../static/c3.png",
"../../../static/c4.png", "../../../static/c5.png", "../../../static/c6.png",
"../../../static/c7.png", "../../../static/c8.png", "../../../static/c9.png"
],
isCircular:false
}
},
methods:{
switchChange(e){
this.isCircular = e.detail.value;
}
},
components: {
pageHead
}
}
</script>
<style>
@import "../../../common/uni.css";
.page {
padding-top: 60px;
}
page {
background: #efeff4;
}
.uni-list{
margin-bottom: 30px;
}
.uni-list-cell {
justify-content: flex-start
}
swiper{
height: 600px;
}
</style>
examples/hello-uniapp/pages/template/list2detail-detail/list2detail-detail.vue
浏览文件 @ 6f52113e
......@@ -17,10 +17,12 @@
<script>
export default {
data: {
title: 'list-triplex-row',
banner: {},
htmlString: ""
data() {
return {
title: 'list-triplex-row',
banner: {},
htmlString: ""
}
},
onShareAppMessage() {
return {
......@@ -35,17 +37,13 @@
title: this.banner.title
})
},
onUnload() {
this.htmlString = "";
this.banner = {}
},
methods: {
getDetail() {
uni.request({
url: 'https://spider.dcloud.net.cn/api/news/36kr/' + this.banner.post_id,
success: (data) => {
if (data.statusCode == 200) {
this.htmlString = data.data.content.replace(/\\/g, "").replace(/<img/g,"<img width='100%'");
this.htmlString = data.data.content.replace(/\\/g, "").replace(/<img/g, "<img style=\"display:none;\"");
}
},
fail: () => {
......
examples/hello-uniapp/pages/template/list2detail-list/list2detail-list.vue
浏览文件 @ 6f52113e
......@@ -25,11 +25,13 @@
var dateUtils = require('../../../common/util.js').dateUtils;
export default {
data: {
banner: {},
listData: [],
last_id: "",
reload: false
data() {
return {
banner: {},
listData: [],
last_id: "",
reload: false
}
},
onLoad() {
this.getBanner();
......@@ -41,11 +43,6 @@
this.getBanner();
this.getList();
},
onUnload() {
this.banner = {},
this.listData = [],
this.last_id = "";
},
onReachBottom() {
this.getList();
},
......@@ -64,7 +61,7 @@
}
},
fail: (data, code) => {
console.log('fail'+JSON.stringify(data));
console.log('fail' + JSON.stringify(data));
}
})
},
......@@ -72,7 +69,6 @@
var data = {
column: "id,post_id,title,author_name,cover,published_at" //需要的字段名
};
console.log(this.last_id);
if (this.last_id) { //说明已有数据，目前处于上拉加载
data.minId = this.last_id;
data.time = new Date().getTime() + "";
......@@ -90,12 +86,11 @@
}
},
fail: (data, code) => {
console.log('fail'+JSON.stringify(data));
console.log('fail' + JSON.stringify(data));
}
})
},
goDetail: function (e) {
console.log(e);
if (!/前|刚刚/.test(e.published_at)) {
e.published_at = dateUtils.format(e.published_at);
}
......
examples/hello-uniapp/pages/template/qrcode/qrcode.vue
浏览文件 @ 6f52113e
<template>
<view>
<view class="container">
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
......@@ -23,16 +23,19 @@
<button type="warn" @tap="clearQrcode">清除二维码</button>
</view>
</view>
<page-foot :name="name"></page-foot>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
import pageFoot from '../../../components/page-foot.vue'
import qrcode from '../../../components/qrcode/qrcode.vue'
export default {
data() {
return {
title: '二维码生成',
name:'诗小柒',
showClearIcon: false,
qrval:'',
qrsize:100,
......@@ -64,6 +67,7 @@
},
components: {
pageHead,
pageFoot,
qrcode
}
}
......
examples/hello-uniapp/pages/template/template.vue
浏览文件 @ 6f52113e
......@@ -2,7 +2,7 @@
<view class="index">
<view class="index-hd">
<image class="index-logo" src="../../static/templateIndex.png"></image>
<view class="page-section-title">以下是uni-app的部分模版示例，欢迎大家积极分享更多的模版，一起完善uni-app生态。</view>
<view class="page-section-title">以下是uni-app的部分模板示例，欢迎大家积极分享更多的模板，一起完善uni-app生态。</view>
</view>
<view class="uni-card" v-for="(list,index) in lists" :key="index">
<view class="uni-list">
......@@ -52,12 +52,20 @@
}, {
name: '图文列表',
url: 'media-list'
}, {
}, {
name: '商品列表',
url: 'product-list'
},{
}, {
id: 'grid',
name: '九宫格',
url: 'grid'
open: false,
pages: [{
name: '默认样式',
url: 'grid'
}, {
name: '可左右滑动的九宫导航',
url: 'grid-pagination'
}]
}, {
name: 'popup',
url: 'popup'
......@@ -65,7 +73,7 @@
name: '选项卡',
url: 'tabbar'
},
// #ifdef APP-PLUS
// #ifdef APP-PLUS
{
name: '问题反馈',
url: '/platforms/app-plus/feedback/feedback'
......@@ -78,11 +86,17 @@
name: 'markdown富文本渲染',
url: 'mdparse'
}, {
name: '二维码生成',
url: 'qrcode'
name: 'echart图表',
url: 'echart'
}, {
name: '列表到详情示例',
url: 'list2detail-list'
}, {
name: '二维码生成',
url: 'qrcode'
}, {
name: '图片裁剪',
url: 'crop'
}
]
}
......@@ -93,7 +107,7 @@
path: '/pages/template/template'
}
},
onNavigationBarButtonTap(e){
onNavigationBarButtonTap(e) {
uni.navigateTo({
url: '/platforms/app-plus/about/about'
})
......@@ -122,10 +136,11 @@
<style>
@import "../../common/uni.css";
.index{
.index {
padding-bottom: 1px;
}
.uni-card {
box-shadow: none;
}
......
examples/hello-uniapp/platforms/app-plus/about/about.vue
浏览文件 @ 6f52113e
......@@ -141,6 +141,7 @@
flex: 1;
padding: 30px;
flex-direction: column;
justify-content: center;
}
.desc{
margin-top: 30px;
......
examples/hello-uniapp/platforms/app-plus/feedback/feedback.vue
浏览文件 @ 6f52113e
......@@ -110,14 +110,13 @@
});
},
send() { //发送反馈
console.log(this.sendDate);
console.log(JSON.stringify(this.sendDate));
let imgs = this.imageList.map((value) => {
return {
name: "uni-app.feedback",
uri: value
}
})
console.log(imgs)
uni.uploadFile({
url: "https://service.dcloud.net.cn/feedback",
files: imgs,
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或