Skip to content

M
miniapp
Commit 3eafbd03 authored by 姜立平's avatar 姜立平
Browse files
Options

收集简历小程序

parent 63828f5c
Hide whitespace changes
Inline Side-by-side
Showing with 4536 additions and 0 deletions
01-PS/微信小程序.md 0 → 100644
View file @ 3eafbd03
# 微信小程序
## 1、中台:
### 1.1、后端：
**建议**使用目前项目上的后端程序 + WX后端
基于Spring Boot 和 WxJava 实现的微信小程序J
https://github.com/binarywang/weixin-java-miniapp-demo
DB:
Mysql、Oracle
### 1.2、前端：
Jsp、vue、React
## 2、小程序：
### 2.1、小程序源码:
https://github.com/Wechat-Group/weapp-demo
02-PG/小程序/weapp-demo/README.md 0 → 100644
View file @ 3eafbd03
# weapp-demo
这是一个比较全的微信小程序demo，包含了大部份功能，及微信所开放的api。
02-PG/小程序/weapp-demo/app.js 0 → 100644
View file @ 3eafbd03
App({
onLaunch: function () {
console.log('App Launch')
},
onShow: function () {
console.log('App Show')
},
onHide: function () {
console.log('App Hide')
},
globalData: {
hasLogin: false
}
})
02-PG/小程序/weapp-demo/app.json 0 → 100644
View file @ 3eafbd03
{
"pages": [
"page/component/index",
"page/component/navigation-pages/controller/controller",
"page/component/navigation-pages/form/form",
"page/component/navigation-pages/media/media",
"page/component/navigation-pages/view/view",
"page/component/component-pages/wx-action-sheet/wx-action-sheet",
"page/component/component-pages/wx-audio/wx-audio",
"page/component/component-pages/wx-button/wx-button",
"page/component/component-pages/wx-checkbox/wx-checkbox",
"page/component/component-pages/wx-form/wx-form",
"page/component/component-pages/wx-icon/wx-icon",
"page/component/component-pages/wx-image/wx-image",
"page/component/component-pages/wx-input/wx-input",
"page/component/component-pages/wx-mask/wx-mask",
"page/component/component-pages/wx-modal/wx-modal",
"page/component/component-pages/wx-navigator/wx-navigator",
"page/component/component-pages/wx-progress/wx-progress",
"page/component/component-pages/wx-radio/wx-radio",
"page/component/component-pages/wx-scroll-view/wx-scroll-view",
"page/component/component-pages/wx-slider/wx-slider",
"page/component/component-pages/wx-switch/wx-switch",
"page/component/component-pages/wx-text/wx-text",
"page/component/component-pages/wx-toast/wx-toast",
"page/component/component-pages/wx-video/wx-video",
"page/component/component-pages/wx-view/wx-view",
"page/component/component-pages/wx-swiper/wx-swiper",
"page/component/component-pages/wx-slide-tab/wx-slide-tab",
"page/component/component-pages/wx-label/wx-label",
"page/component/component-pages/wx-navigator/navigate",
"page/component/component-pages/wx-navigator/redirect",
"page/component/component-pages/wx-picker/wx-picker",
"page/API/index/index",
"page/API/storage/storage",
"page/API/login/login",
"page/API/get-user-info/get-user-info",
"page/API/request-payment/request-payment",
"page/API/set-navigation-bar-title/set-navigation-bar-title",
"page/API/navigation-bar-loading/navigation-bar-loading",
"page/API/navigator/navigator",
"page/API/pull-down-refresh/pull-down-refresh",
"page/API/animation/animation",
"page/API/get-network-type/get-network-type",
"page/API/get-system-info/get-system-info",
"page/API/on-compass-change/on-compass-change",
"page/API/request/request",
"page/API/web-socket/web-socket",
"page/API/upload-file/upload-file",
"page/API/download-file/download-file",
"page/API/image/image",
"page/API/voice/voice",
"page/API/file/file",
"page/API/on-accelerometer-change/on-accelerometer-change",
"page/API/canvas/canvas",
"page/API/background-audio/background-audio",
"page/API/get-location/get-location",
"page/API/open-location/open-location",
"page/resume/resume"
],
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "投简历",
"navigationBarBackgroundColor": "#fbf9fe",
"backgroundColor": "#fbf9fe"
},
"tabBar": {
"color": "#dddddd",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "page/component/index",
"iconPath": "image/wechat.png",
"selectedIconPath": "image/wechatHL.png",
"text": "投简历"
},
{
"pagePath": "page/API/index/index",
"iconPath": "image/wechat.png",
"selectedIconPath": "image/wechatHL.png",
"text": "招聘岗位"
},
{
"pagePath": "page/API/index/index",
"iconPath": "image/wechat.png",
"selectedIconPath": "image/wechatHL.png",
"text": "筛选评价"
},
{
"pagePath": "page/API/index/index",
"iconPath": "image/wechat.png",
"selectedIconPath": "image/wechatHL.png",
"text": "我的"
}
]
},
"networkTimeout": {
"request": 10000,
"connectSocket": 10000,
"uploadFile": 10000,
"downloadFile": 10000
},
"debug": true,
"sitemapLocation": "sitemap.json"
}
\ No newline at end of file
02-PG/小程序/weapp-demo/app.wxss 0 → 100644
View file @ 3eafbd03
page {
background-color: #fbf9fe;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
min-height: 100%;
justify-content: space-between;
}
.page-header {
display: flex;
font-size: 32rpx;
color: #aaa;
justify-content: center;
margin-top: 50rpx;
}
.page-header-text {
padding: 20rpx 40rpx;
border-bottom: 1px solid #ccc;
}
.page-body {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
overflow-x: hidden;
}
.page-body-wrapper {
margin-top: 100rpx;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.page-body-wrapper form {
width: 100%;
}
.page-body-wording {
text-align: center;
padding: 200rpx 100rpx;
}
.page-body-info {
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
margin-bottom: 50rpx;
width: 100%;
padding: 50rpx 0 150rpx 0;
}
.page-body-title {
margin-bottom: 100rpx;
font-size: 32rpx;
}
.page-body-text {
font-size: 30rpx;
line-height: 26px;
color: #ccc;
}
.page-body-text-small {
font-size: 24rpx;
color: #000;
margin-bottom: 100rpx;
}
.page-body-form {
width: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
width: 100%;
border: 1px solid #eee;
}
.page-body-form-item {
display: flex;
align-items: center;
margin-left: 10rpx;
border-bottom: 1px solid #eee;
height: 80rpx;
}
.page-body-form-key {
width: 180rpx;
}
.page-body-form-value {
flex-grow: 1;
}
.page-body-form-picker {
display: flex;
justify-content: space-between;
height: 100rpx;
align-items: center;
font-size: 36rpx;
margin-left: 20rpx;
padding-right: 20rpx;
border-bottom: 1px solid #eee;
}
.page-body-form-picker-value {
color: #ccc;
}
.page-body-buttons {
width: 100%;
}
.page-body-button {
margin: 25rpx;
}
.page-body-button image {
width: 150rpx;
height: 150rpx;
}
.page-footer {
text-align: center;
color: #1aad19;
font-size: 24rpx;
margin: 20rpx 0;
}
.green{
color: #09BB07;
}
.red{
color: #F76260;
}
.blue{
color: #10AEFF;
}
.yellow{
color: #FFBE00;
}
.gray{
color: #C9C9C9;
}
.strong{
font-weight: bold;
}
.bc_green{
background-color: #09BB07;
}
.bc_red{
background-color: #F76260;
}
.bc_blue{
background-color: #10AEFF;
}
.bc_yellow{
background-color: #FFBE00;
}
.bc_gray{
background-color: #C9C9C9;
}
.tc{
text-align: center;
}
.page input{
padding: 10px 15px;
background-color: #fff;
}
checkbox, radio{
margin-right: 5px;
}
.btn-area{
padding: 0 15px;
}
.btn-area button{
margin-top: 10px;
margin-bottom: 10px;
}
.page {
min-height: 100%;
flex: 1;
background-color: #FBF9FE;
font-size: 16px;
font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
overflow: hidden;
}
.page__hd{
padding: 40px;
}
.page__title{
display: block;
font-size: 20px;
}
.page__desc{
margin-top: 5px;
font-size: 14px;
color: #888888;
}
.section{
margin-bottom: 40px;
}
.section_gap{
padding: 0 15px;
}
.section__title{
margin-bottom: 8px;
padding-left: 15px;
padding-right: 15px;
}
.section_gap .section__title{
padding-left: 0;
padding-right: 0;
}
.section__ctn{
}
02-PG/小程序/weapp-demo/page/API/animation/animation.js 0 → 100644
View file @ 3eafbd03
Page({
onReady: function () {
this.animation = wx.createAnimation()
},
rotate: function () {
this.animation.rotate(Math.random() * 720 - 360).step()
this.setData({ animation: this.animation.export() })
},
scale: function () {
this.animation.scale(Math.random() * 2).step()
this.setData({ animation: this.animation.export() })
},
translate: function () {
this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
this.setData({ animation: this.animation.export() })
},
skew: function () {
this.animation.skew(Math.random() * 90, Math.random() * 90).step()
this.setData({ animation: this.animation.export() })
},
rotateAndScale: function () {
this.animation.rotate(Math.random() * 720 - 360)
.scale(Math.random() * 2)
.step()
this.setData({ animation: this.animation.export() })
},
rotateThenScale: function () {
this.animation.rotate(Math.random() * 720 - 360).step()
.scale(Math.random() * 2).step()
this.setData({ animation: this.animation.export() })
},
all: function () {
this.animation.rotate(Math.random() * 720 - 360)
.scale(Math.random() * 2)
.translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
.skew(Math.random() * 90, Math.random() * 90)
.step()
this.setData({ animation: this.animation.export() })
},
allInQueue: function () {
this.animation.rotate(Math.random() * 720 - 360).step()
.scale(Math.random() * 2).step()
.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
.skew(Math.random() * 90, Math.random() * 90).step()
this.setData({ animation: this.animation.export() })
},
reset: function () {
this.animation.rotate(0, 0)
.scale(1)
.translate(0, 0)
.skew(0, 0)
.step({ duration: 0 })
this.setData({ animation: this.animation.export() })
}
})
02-PG/小程序/weapp-demo/page/API/animation/animation.wxml 0 → 100644
View file @ 3eafbd03
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />
<view class="container">
<template is="header" data="{{title: 'createAnimation'}}"/>
<view class="page-body">
<view class="page-body-wrapper">
<view class="animation-element-wrapper">
<view class="animation-element" animation="{{animation}}"></view>
</view>
<view class="animation-buttons" scroll-y="true">
<button class="animation-button" bindtap="rotate">旋转</button>
<button class="animation-button" bindtap="scale"> 缩放</button>
<button class="animation-button" bindtap="translate">移动</button>
<button class="animation-button" bindtap="skew">倾斜</button>
<button class="animation-button" bindtap="rotateAndScale">旋转并缩放</button>
<button class="animation-button" bindtap="rotateThenScale">旋转后缩放</button>
<button class="animation-button" bindtap="all">同时展示全部</button>
<button class="animation-button" bindtap="allInQueue">顺序展示全部</button>
<button class="animation-button-reset" bindtap="reset">还原</button>
</view>
</view>
</view>
<template is="footer" />
</view>
02-PG/小程序/weapp-demo/page/API/animation/animation.wxss 0 → 100644
View file @ 3eafbd03
.page-body-wrapper {
flex-grow: 1;
}
.animation-element-wrapper {
display: block;
margin-bottom: 100rpx;
}
.animation-element {
width: 200rpx;
height: 200rpx;
background-color: #1AAD19;
}
.animation-buttons {
padding: 50rpx 50rpx 10rpx;
border-top: 1px solid #ccc;
display: flex;
flex-grow: 1;
overflow-y: scroll;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
height: 400rpx;
box-sizing: border-box;
}
.animation-button {
width: 290rpx;
margin: 20rpx auto;
}
.animation-button-reset {
width: 610rpx;
margin: 20rpx auto;
}
02-PG/小程序/weapp-demo/page/API/background-audio/background-audio.js 0 → 100644
View file @ 3eafbd03
var util = require('../../../util/util.js')
var dataUrl = 'http://ws.stream.qqmusic.qq.com/C100001wmp4t06stlC.m4a?fromtag=38'
Page({
onLoad: function () {
var that = this
wx.onBackgroundAudioStop(function () {
that.setData({
playing: false,
playTime: 0,
formatedPlayTime: '00:00:00'
})
})
},
data: {
playing: false,
playTime: 0,
formatedPlayTime: '00:00:00'
},
play: function (res) {
var that = this
wx.playBackgroundAudio({
dataUrl: dataUrl,
title: 'Lost Stars',
coverImgUrl: 'http://y.gtimg.cn/music/photo_new/T002R150x150M000000Jhxf24CFL06.jpg?max_age=2592000',
complete: function (res) {
that.setData({
playing: true
})
}
})
this._enableInterval()
},
seek: function (e) {
clearInterval(this.updateInterval)
var that = this
wx.seekBackgroundAudio({
position: e.detail.value,
complete: function () {
// 实际会延迟两秒左右才跳过去
setTimeout(function () {
that._enableInterval()
}, 2000)
}
})
},
pause: function () {
var that = this
wx.pauseBackgroundAudio({
success: function () {
that.setData({
playing: false
})
}
})
},
stop: function () {
var that = this
wx.stopBackgroundAudio({
success: function (res) {
that.setData({
playing: false,
playTime: 0,
formatedPlayTime: util.formatTime(0)
})
}
})
},
_enableInterval: function () {
var that = this
update()
this.updateInterval = setInterval(update, 500)
function update() {
wx.getBackgroundAudioPlayerState({
success: function (res) {
that.setData({
playTime: res.currentPosition,
formatedPlayTime: util.formatTime(res.currentPosition + 1)
})
}
})
}
},
onUnload: function () {
clearInterval(this.updateInterval)
}
})
02-PG/小程序/weapp-demo/page/API/background-audio/background-audio.wxml 0 → 100644
View file @ 3eafbd03
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />
<view class="container">
<template is="header" data="{{title: 'backgroundAudio'}}"/>
<view class="page-body-wrapper">
<view class="page-body-info">
<text class="time-big">{{formatedPlayTime}}</text>
<slider class="slider" min="0" max="269" step="1" value="{{playTime}}" bindchange="seek"></slider>
<view class="play-time">
<text>00:00</text>
<text>04:29</text>
</view>
</view>
<text class="page-body-text">离开应用后音乐也可保持播放</text>
<view class="page-body-buttons">
<block wx:if="{{playing === true}}">
<view class="page-body-button" bindtap="stop">
<image src="/image/stop.png"></image>
</view>
<view class="page-body-button" bindtap="pause">
<image src="/image/pause.png"></image>
</view>
</block>
<block wx:if="{{playing === false}}">
<view class="page-body-button"></view>
<view class="page-body-button" bindtap="play">
<image src="/image/play.png"></image>
</view>
</block>
<view class="page-body-button"></view>
</view>
</view>
<template is="footer" />
</view>
02-PG/小程序/weapp-demo/page/API/background-audio/background-audio.wxss 0 → 100644
View file @ 3eafbd03
.page-body-wrapper {
margin-top: 0;
}
.page-body-info {
padding-bottom: 50rpx;
}
.time-big {
font-size: 60rpx;
margin: 20rpx;
}
.slider {
width: 650rpx;
}
.play-time {
font-size: 28rpx;
width: 700rpx;
padding: 20rpx 0;
display: flex;
justify-content: space-between;
box-sizing: border-box;
}
.page-body-buttons {
display: flex;
justify-content: space-around;
margin-top: 100rpx;
}
.page-body-button {
width: 250rpx;
text-align: center;
}
02-PG/小程序/weapp-demo/page/API/canvas/canvas.js 0 → 100644
View file @ 3eafbd03
Page({
onReady: function () {
this.position = {
x: 150,
y: 150,
vx: 2,
vy: 2
}
this.drawBall()
this.interval = setInterval(this.drawBall, 17)
},
drawBall: function () {
var p = this.position
p.x += p.vx
p.y += p.vy
if (p.x >= 300) {
p.vx = -2
}
if (p.x <= 7) {
p.vx = 2
}
if (p.y >= 300) {
p.vy = -2
}
if (p.y <= 7) {
p.vy = 2
}
var context = wx.createContext()
ball(p.x, 150)
ball(150, p.y)
ball(300 - p.x, 150)
ball(150, 300 - p.y)
ball(p.x, p.y)
ball(300 - p.x, 300 - p.y)
ball(p.x, 300 - p.y)
ball(300 - p.x, p.y)
wx.drawCanvas({
canvasId: 'canvas',
actions: context.getActions()
})
function ball(x, y) {
context.beginPath(0)
context.arc(x, y, 5, 0, Math.PI * 2)
context.setFillStyle('#1aad19')
context.setStrokeStyle('rgba(1,1,1,0)')
context.fill()
context.stroke()
}
},
onUnload: function () {
clearInterval(this.interval)
}
})
02-PG/小程序/weapp-demo/page/API/canvas/canvas.json 0 → 100644
View file @ 3eafbd03
{
"navigationBarTitleText": "创建画布"
}
02-PG/小程序/weapp-demo/page/API/canvas/canvas.wxml 0 → 100644
View file @ 3eafbd03
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />
<view class="container">
<template is="header" data="{{title: 'createCanvas'}}"/>
<view class="page-body">
<view class="page-body-wrapper">
<canvas canvas-id="canvas" class="canvas"></canvas>
</view>
</view>
<template is="footer" />
</view>
02-PG/小程序/weapp-demo/page/API/canvas/canvas.wxss 0 → 100644
View file @ 3eafbd03
.canvas {
width: 305px;
height: 305px;
background-color: #fff;
}
02-PG/小程序/weapp-demo/page/API/common/footer.wxml 0 → 100644
View file @ 3eafbd03
<template name="footer">
<view class="page-footer">
微信接口功能
</view>
</template>
02-PG/小程序/weapp-demo/page/API/common/header.wxml 0 → 100644
View file @ 3eafbd03
<template name="header">
<view class="page-header">
<text class="page-header-text">{{title}}</text>
</view>
</template>
02-PG/小程序/weapp-demo/page/API/download-file/download-file.wxml 0 → 100644
View file @ 3eafbd03
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />
<view class="container">
<template is="header" data="{{title: 'downloadFile'}}"/>
<view class="page-body">
<view class="page-body-wording">
<text class="page-body-text">
搭建好自己的后台服务器后，可以将服务器上的图片视频等资源下载到手机上。
</text>
</view>
</view>
<template is="footer" />
</view>
02-PG/小程序/weapp-demo/page/API/file/file.js 0 → 100644
View file @ 3eafbd03
Page({
data: {
tempFilePath: '',
savedFilePath: wx.getStorageSync('savedFilePath') || '',
dialog: {
hidden: true
}
},
chooseImage: function () {
var that = this
wx.chooseImage({
count: 1,
success: function (res) {
that.setData({
tempFilePath: res.tempFilePaths[0]
})
}
})
},
saveFile: function () {
if (this.data.tempFilePath.length > 0) {
var that = this
wx.saveFile({
tempFilePath: this.data.tempFilePath,
success: function (res) {
that.setData({
savedFilePath: res.savedFilePath
})
wx.setStorageSync('savedFilePath', res.savedFilePath)
that.setData({
dialog: {
title: '保存成功',
content: '下次进入应用时，此文件仍可用',
hidden: false
}
})
},
fail: function (res) {
that.setData({
dialog: {
title: '保存失败',
content: '应该是有 bug 吧',
hidden: false
}
})
}
})
}
},
clear: function () {
wx.setStorageSync('savedFilePath', '')
this.setData({
tempFilePath: '',
savedFilePath: ''
})
},
confirm: function () {
this.setData({
'dialog.hidden': true
})
}
})
02-PG/小程序/weapp-demo/page/API/file/file.json 0 → 100644
View file @ 3eafbd03
{
"navigationBarTitleText": "文件"
}
02-PG/小程序/weapp-demo/page/API/file/file.wxml 0 → 100644
View file @ 3eafbd03
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />
<view class="container">
<template is="header" data="{{title: 'saveFile'}}"/>
<view class="page-body">
<view class="page-body-wrapper">
<view class="page-body-info">
<text class="page-body-text-small">请选择图片</text>
<block wx:if="{{tempFilePath != ''}}">
<image src="{{tempFilePath}}" class="image"></image>
</block>
<block wx:if="{{tempFilePath === '' && savedFilePath != ''}}">
<image src="{{savedFilePath}}" class="image"></image>
</block>
<block wx:if="{{tempFilePath === '' && savedFilePath === ''}}">
<image src="/image/plus.png" class="image-plus" bindtap="chooseImage"></image>
</block>
</view>
<view class="page-body-buttons">
<button class="page-body-button" type="primary" bindtap="saveFile">保存文件</button>
<button class="page-body-button" bindtap="clear">删除文件</button>
</view>
</view>
</view>
<modal title="{{dialog.title}}" hidden="{{dialog.hidden}}" no-cancel bindconfirm="confirm">{{dialog.content}}</modal>
<template is="footer" />
</view>
02-PG/小程序/weapp-demo/page/API/file/file.wxss 0 → 100644
View file @ 3eafbd03
.image {
width: 300rpx;
height: 300rpx;
}
.image-plus {
width: 150rpx;
height: 150rpx;
border: 1px solid #bbb;
}
02-PG/小程序/weapp-demo/page/API/generate.sh 0 → 100644
View file @ 3eafbd03
mkdir $1
touch $1/$1.js
touch $1/$1.wxss
touch $1/$1.wxml
touch $1/$1.json
02-PG/小程序/weapp-demo/page/API/get-location/format-location.js 0 → 100644
View file @ 3eafbd03
function formatLocation(longitude, latitude) {
longitude = longitude.toFixed(2)
latitude = latitude.toFixed(2)
return {
longitude: longitude.toString().split('.'),
latitude: latitude.toString().split('.')
}
}
module.exports = formatLocation
02-PG/小程序/weapp-demo/page/API/get-location/get-location.js 0 → 100644
View file @ 3eafbd03
var formatLocation = require('./format-location.js')
Page({
data: {
hasLocation: false,
},
getLocation: function () {
var that = this
wx.getLocation({
success: function (res) {
console.log(res)
that.setData({
hasLocation: true,
location: formatLocation(res.longitude, res.latitude)
})
}
})
},
clear: function () {
this.setData({
hasLocation: false
})
}
})
02-PG/小程序/weapp-demo/page/API/get-location/get-location.wxml 0 → 100644
View file @ 3eafbd03
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />
<view class="container">
<template is="header" data="{{title: 'getLocation'}}"/>
<view class="page-body">
<view class="page-body-wrapper">
<view class="page-body-info">
<text class="page-body-text-small">当前位置经纬度</text>
<block wx:if="{{hasLocation === false}}">
<text class="page-body-text">未获取</text>
</block>
<block wx:if="{{hasLocation === true}}">
<view class="page-body-text-location">
<text>E{{location.longitude[0]}}°{{location.longitude[1]}}′</text>
<text>N{{location.latitude[0]}}°{{location.latitude[1]}}′</text>
</view>
</block>
</view>
<view class="page-body-buttons">
<button class="page-body-button" type="primary" bindtap="getLocation">获取位置</button>
<button class="page-body-button" bindtap="clear">清空</button>
</view>
</view>
</view>
<template is="footer" />
</view>
02-PG/小程序/weapp-demo/page/API/get-location/get-location.wxss 0 → 100644
View file @ 3eafbd03
.page-body-text-small {
font-size: 24rpx;
color: #000;
margin-bottom: 100rpx;
}
.page-body-text-location {
display: flex;
font-size: 50rpx;
}
.page-body-text-location text {
margin: 10rpx;
}
02-PG/小程序/weapp-demo/page/API/get-network-type/get-network-type.js 0 → 100644
View file @ 3eafbd03
Page({
data: {
hasNetworkType: false
},
getNetworkType: function () {
var that = this
wx.getNetworkType({
success: function (res) {
console.log(res)
that.setData({
hasNetworkType: true,
networkType: res.subtype || res.networkType
})
that.update()
}
})
},
clear: function () {
this.setData({
hasNetworkType: false,
networkType: ''
})
}
})
02-PG/小程序/weapp-demo/page/API/get-network-type/get-network-type.json 0 → 100644
View file @ 3eafbd03
{
"navigationBarTitleText": "获取手机网络状态"
}
02-PG/小程序/weapp-demo/page/API/get-network-type/get-network-type.wxml 0 → 100644
View file @ 3eafbd03
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />
<view class="container">
<template is="header" data="{{title: 'getNetworkType'}}"/>
<view class="page-body">
<view class="page-body-wrapper">
<view class="page-body-info">
<view class="page-body-title">网络状态</view>
<block wx:if="{{hasNetworkType === false}}">
<text class="page-body-text">未获取</text>
<text class="page-body-text">点击绿色按钮可获取网络状态</text>
</block>
<block wx:if="{{hasNetworkType === true}}">
<text class="page-body-text-network-type">{{networkType}}</text>
</block>
</view>
<view class="page-body-buttons">
<button class="page-body-button" type="primary" bindtap="getNetworkType">获取手机网络状态</button>
<button class="page-body-button" bindtap="clear">清空</button>
</view>
</view>
</view>
<template is="footer" />
</view>
02-PG/小程序/weapp-demo/page/API/get-system-info/get-system-info.js 0 → 100644
View file @ 3eafbd03
Page({
data: {
systemInfo: {}
},
getSystemInfo: function () {
var that = this
wx.getSystemInfo({
success: function (res) {
that.setData({
systemInfo: res
})
that.update()
}
})
}
})
02-PG/小程序/weapp-demo/page/API/get-system-info/get-system-info.json 0 → 100644
View file @ 3eafbd03
{
"navigationBarTitleText": "获取手机系统信息"
}
02-PG/小程序/weapp-demo/page/API/get-system-info/get-system-info.wxml 0 → 100644
View file @ 3eafbd03
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />
<view class="container">
<template is="header" data="{{title: 'getSystemInfo'}}"/>
<view class="page-body">
<view class="page-body-wrapper">
<view class="page-body-form">
<view class="page-body-form-item">
<text class="page-body-form-key">手机型号</text>
<input class="page-body-form-value" type="text" disabled="{{true}}" placeholder="未获取" value="{{systemInfo.model}}"></input>
</view>
<view class="page-body-form-item">
<text class="page-body-form-key">微信语言</text>
<input class="page-body-form-value" type="text" disabled="{{true}}" placeholder="未获取" value="{{systemInfo.language}}"></input>
</view>
<view class="page-body-form-item">
<text class="page-body-form-key">微信版本</text>
<input class="page-body-form-value" type="text" disabled="{{true}}" placeholder="未获取" value="{{systemInfo.version}}"></input>
</view>
<view class="page-body-form-item">
<text class="page-body-form-key">屏幕宽度</text>
<input class="page-body-form-value" type="text" disabled="{{true}}" placeholder="未获取" value="{{systemInfo.windowWidth}}"></input>
</view>
<view class="page-body-form-item">
<text class="page-body-form-key">屏幕高度</text>
<input class="page-body-form-value" type="text" disabled="{{true}}" placeholder="未获取" value="{{systemInfo.windowHeight}}"></input>
</view>
<view class="page-body-form-item">
<text class="page-body-form-key">DPI</text>
<input class="page-body-form-value" type="text" disabled="{{true}}" placeholder="未获取" value="{{systemInfo.pixelRatio}}"></input>
</view>
</view>
<view class="page-body-buttons">
<button class="page-body-button" type="primary" bindtap="getSystemInfo">获取手机系统信息</button>
</view>
</view>
</view>
<template is="footer" />
</view>
02-PG/小程序/weapp-demo/page/API/get-user-info/get-user-info.js 0 → 100644
View file @ 3eafbd03
var app = getApp()
Page({
data: {
hasUserInfo: false
},
getUserInfo: function () {
var that = this
if (app.globalData.hasLogin === false) {
wx.login({
success: _getUserInfo
})
} else {
_getUserInfo()
}
function _getUserInfo() {
wx.getUserInfo({
success: function (res) {
that.setData({
hasUserInfo: true,
userInfo: res.userInfo
})
that.update()
}
})
}
},
clear: function () {
this.setData({
hasUserInfo: false,
userInfo: {}
})
}
})
02-PG/小程序/weapp-demo/page/API/get-user-info/get-user-info.json 0 → 100644
View file @ 3eafbd03
{
"navigationBarTitleText": "获取用户信息"
}
02-PG/小程序/weapp-demo/page/API/get-user-info/get-user-info.wxml 0 → 100644
View file @ 3eafbd03
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />
<view class="container">
<template is="header" data="{{title: 'getUserInfo'}}"/>
<view class="page-body">
<view class="page-body-wrapper">
<view class="page-body-info">
<view class="page-body-title">用户信息</view>
<block wx:if="{{hasUserInfo === false}}">
<text class="page-body-text">未获取</text>
<text class="page-body-text">点击绿色按钮可获取用户头像及昵称</text>
</block>
<block wx:if="{{hasUserInfo === true}}">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="page-body-buttons">
<button class="page-body-button" type="primary" bindtap="getUserInfo">获取用户信息</button>
<button class="page-body-button" bindtap="clear">清空</button>
</view>
</view>
</view>
<template is="footer" />
</view>
02-PG/小程序/weapp-demo/page/API/get-user-info/get-user-info.wxss 0 → 100644
View file @ 3eafbd03
.userinfo-avatar {
border-radius: 128rpx;
width: 128rpx;
height: 128rpx;
}
.userinfo-nickname {
margin-top: 20rpx;
font-size: 38rpx;
}
02-PG/小程序/weapp-demo/page/API/image/image.js 0 → 100644
View file @ 3eafbd03
var sourceType = [ ['camera'], ['album'], ['camera', 'album'] ]
var sizeType = [ ['compressed'], ['original'], ['compressed', 'original'] ]
Page({
data: {
sourceTypeIndex: 0,
sourceType: ['拍照', '相册', '拍照或相册'],
sizeTypeIndex: 0,
sizeType: ['压缩', '原图', '压缩或原图'],
countIndex: 0,
count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
},
sourceTypeChange: function (e) {
this.setData({
sourceTypeIndex: e.detail.value
})
},
sizeTypeChange: function (e) {
this.setData({
sizeTypeIndex: e.detail.value
})
},
countChange: function (e) {
this.setData({
countIndex: e.detail.value
})
},
chooseImage: function () {
var that = this
wx.chooseImage({
sourceType: sourceType[this.data.sourceTypeIndex],
sizeType: sizeType[this.data.sizeTypeIndex],
count: this.data.count[this.data.countIndex],
success: function (res) {
console.log(res)
that.setData({
imageList: res.tempFilePaths
})
}
})
},
previewImage: function (e) {
var current = e.target.dataset.src
wx.previewImage({
current: current,
urls: this.data.imageList
})
}
})
02-PG/小程序/weapp-demo/page/API/image/image.json 0 → 100644
View file @ 3eafbd03
{
"navigationBarTitleText": "图片"
}
02-PG/小程序/weapp-demo/page/API/image/image.wxml 0 → 100644
View file @ 3eafbd03
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />
<view class="container">
<template is="header" data="{{title: 'choose/previewImage'}}"/>
<view class="page-body">
<view class="page-body-wrapper">
<form bindsubmit="openLocation">
<view class="page-body-form">
<picker range="{{sourceType}}" bindchange="sourceTypeChange" value="{{sourceTypeIndex}}">
<view class="page-body-form-picker">
<view class="page-body-form-picker-key">图片来源</view>
<view class="page-body-form-picker-value">{{sourceType[sourceTypeIndex]}}</view>
</view>
</picker>
<picker range="{{sizeType}}" bindchange="sizeTypeChange" value="{{sizeTypeIndex}}">
<view class="page-body-form-picker">
<view class="page-body-form-picker-key">图片质量</view>
<view class="page-body-form-picker-value">{{sizeType[sizeTypeIndex]}}</view>
</view>
</picker>
<picker range="{{count}}" bindchange="countChange" value="{{countIndex}}">
<view class="page-body-form-picker" style="border-bottom: none;">
<view class="page-body-form-picker-key">数量限制</view>
<view class="page-body-form-picker-value">{{count[countIndex]}}</view>
</view>
</picker>
</view>
<view class="images-wrapper">
<text class="images-text">请选择图片</text>
<view class="images-list">
<block wx:for-items="{{imageList}}" wx:for-item="image">
<image src="{{image}}" class="images-image" data-src="{{image}}" bindtap="previewImage"></image>
</block>
<image src="/image/plus.png" class="images-image images-image-plus" bindtap="chooseImage"></image>
</view>
</view>
</form>
</view>
</view>
<template is="footer" />
</view>
02-PG/小程序/weapp-demo/page/API/image/image.wxss 0 → 100644
View file @ 3eafbd03
.images-wrapper {
padding: 20rpx;
background-color: #fff;
margin-top: 20rpx;
}
.images-wrapper-text {
font-size: 28rpx;
}
.images-list {
display: flex;
margin-top: 20rpx;
flex-wrap: wrap;
}
.images-image {
width: 150rpx;
height: 150rpx;
margin: 10rpx;
}
.images-image-plus {
border: 1px solid #999;
}
02-PG/小程序/weapp-demo/page/API/index/index.js 0 → 100644
View file @ 3eafbd03
Page({
data: {
menuList: [{
name: '基础能力',
APIList: [{
zhName: '微信登录',
enName: 'login',
url: '../login/login'
}, {
zhName: '获取用户信息',
enName: 'getUserInfo',
url: '../get-user-info/get-user-info'
}, {
zhName: '发起支付',
enName: 'RequestPayment',
url: '../request-payment/request-payment'
}],
opened: false
}, {
name: '界面跳转、监听和加载',
opened: false,
APIList: [{
zhName: '设置界面标题',
enName: 'setNavigationBarTitle',
url: '../set-navigation-bar-title/set-navigation-bar-title'
}, {
zhName: '标题栏加载动画',
enName: 'navigationBarLoading',
url: '../navigation-bar-loading/navigation-bar-loading'
}, {
zhName: '页面跳转',
enName: 'navigateTo, navigateBack, redirectTo',
url: '../navigator/navigator'
}, {
zhName: '下拉刷新',
enName: 'pullDownRefresh',
url: '../pull-down-refresh/pull-down-refresh'
}, {
zhName: '创建动画',
enName: 'createAnimation',
url: '../animation/animation'
}, {
zhName: '创建绘画',
enName: 'createContext',
url: '../canvas/canvas'
}]
}, {
name: '设备相关',
opened: false,
APIList: [{
zhName: '获取手机网络状态',
enName: 'getNetworkType',
url: '../get-network-type/get-network-type'
}, {
zhName: '获取手机系统信息',
enName: 'getSystemInfo',
url: '../get-system-info/get-system-info'
}, {
zhName: '监听重力感应数据',
enName: 'onAccelerometerChange',
url: '../on-accelerometer-change/on-accelerometer-change'
}, {
zhName: '监听罗盘数据',
enName: 'onCompassChange',
url: '../on-compass-change/on-compass-change'
}]
}, {
name: '网络相关',
opened: false,
APIList: [{
zhName: '发起一个请求',
enName: 'request',
url: '../request/request'
}, {
zhName: 'Web Socket',
enName: 'Web Socket',
url: '../web-socket/web-socket'
}, {
zhName: '上传文件',
enName: 'Upload File',
url: '../upload-file/upload-file'
}, {
zhName: '下载文件',
enName: 'Download File',
url: '../download-file/download-file'
}]
}, {
name: '多媒体',
opened: false,
APIList: [{
zhName: '图片',
enName: 'chooseImage/previewImage',
url: '../image/image'
}, {
zhName: '录音',
enName: 'start/stopRecord, play/pause/stopVoice',
url: '../voice/voice'
}, {
zhName: '背景音频',
enName: 'play/pause/stopAudio',
url: '../background-audio/background-audio'
}, {
zhName: '文件',
enName: 'saveFile',
url: '../file/file'
}]
}, {
name: '数据',
opened: false,
url: '../storage/storage'
}, {
name: '地理位置',
opened: false,
APIList: [{
zhName: '获取当前位置',
enName: 'getLocation',
url: '../get-location/get-location'
}, {
zhName: '使用原生地图查看位置',
enName: 'openLocation',
url: '../open-location/open-location'
}]
}]
},
tapMenuItem: function (e) {
var menuItem = this.data.menuList[parseInt(e.currentTarget.id)]
if (menuItem.url) {
wx.navigateTo({ url: menuItem.url })
} else {
var changeData = {}
var opened = menuItem.opened
changeData['menuList[' + e.currentTarget.id + '].opened'] = !opened
this.setData(changeData)
}
}
})
02-PG/小程序/weapp-demo/page/API/index/index.wxml 0 → 100644
View file @ 3eafbd03
<view class="container">
<view class="header">
<view class="title">小程序接口</view>
<view class="desc">为便于开发者直观了解小程序接口能力，该小程序就当前已支持的接口能力进行演示。</view>
</view>
<view class="menu-list">
<block wx:for-items="{{menuList}}" wx:for-item="menuItem">
<view class="menu-item">
<view class="menu-item-main" id="{{index}}" bindtap="tapMenuItem">
<text class="menu-item-name">{{menuItem.name}}</text>
<image
class="menu-item-arrow {{menuItem.opened ? 'open' : 'close'}} {{menuItem.url ? 'url' : ''}}"
src="/image/arrowright.png">
</image>
</view>
<view class="menu-item-api-list {{menuItem.opened ? 'open' : 'close'}}">
<block wx:for-items="{{menuItem.APIList}}" wx:for-item="APIItem">
<navigator url="{{APIItem.url}}">
<view class="menu-item-api-item" style="{{index === 0 ? 'border-top:none;' : ''}}">
<view class="menu-item-api-item-text">
<text class="menu-item-api-item-text-zhname">{{APIItem.zhName}}</text>
<text class="menu-item-api-item-text-enname">{{APIItem.enName}}</text>
</view>
<image class="menu-item-api-item-arrow" src="/image/arrowright.png"></image>
</view>
</navigator>
</block>
</view>
</view>
</block>
</view>
</view>
02-PG/小程序/weapp-demo/page/API/index/index.wxss 0 → 100644
View file @ 3eafbd03
.header {
padding: 40px;
}
.title {
font-size: 30px;
}
.desc {
margin-top: 5px;
color: #888888;
font-size: 14px;
line-height: 1.4;
}
.menu-list {
display: flex;
flex-direction: column;
background-color: #fbf9fe;
}
.menu-item {
color: #000000;
display: flex;
background-color: #fff;
margin: 10rpx 40rpx;
flex-direction: column;
}
.menu-item-main {
display: flex;
height: 100rpx;
padding: 20rpx;
border-radius: 10rpx;
align-items: center;
font-size: 32rpx;
justify-content: space-between;
}
.menu-item-arrow {
width: 32rpx;
height: 32rpx;
transition: 400ms;
}
.menu-item-arrow.open {
transform: rotate(-90deg);
}
.menu-item-arrow.close {
transform: rotate(90deg);
}
.menu-item-arrow.url {
transform: rotate(0deg);
}
.menu-item-api-list {
transition: 200ms;
height: auto;
border-top: 1px solid #d8d8d8;
}
.menu-item-api-list.close {
display: none;
height: 0;
}
.menu-item-api-item {
display: flex;
justify-content: space-between;
height: 80rpx;
padding: 20rpx 20rpx 20rpx 0;
margin-left: 20rpx;
align-items: center;
border-top: 1px solid #f0f0f0;
}
.menu-item-api-item-text {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.menu-item-api-item-text-zhname {
font-size: 30rpx;
}
.menu-item-api-item-text-enname {
font-size: 26rpx;
color: #6b6b6b;
}
.menu-item-api-item-arrow {
width: 32rpx;
height: 32rpx;
}
02-PG/小程序/weapp-demo/page/API/login/login.js 0 → 100644
View file @ 3eafbd03
var app = getApp()
Page({
onLoad: function () {
this.setData({
hasLogin: app.globalData.hasLogin
})
},
data: {},
login: function () {
var that = this
wx.login({
success: function (res) {
app.globalData.hasLogin = true
that.setData({
hasLogin: true
})
that.update()
}
})
}
})
02-PG/小程序/weapp-demo/page/API/login/login.json 0 → 100644
View file @ 3eafbd03
{
"navigationBarTitleText": "微信登录"
}
02-PG/小程序/weapp-demo/page/API/login/login.wxml 0 → 100644
View file @ 3eafbd03
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />
<view class="container">
<template is="header" data="{{title: 'Login'}}"/>
<view class="page-body">
<view class="page-body-wrapper">
<block wx:if="{{hasLogin === true}}">
<text class="page-body-title">已登录</text>
<text class="page-body-text">每个微信号中仅需登录 1 次，后续每次进入页面即可根据微信 id 自动拉取用户信息</text>
</block>
<block wx:if="{{hasLogin === false}}">
<text class="page-body-text">每个微信号中仅需登录一次</text>
<button class="page-body-button" type="primary" bindtap="login">微信登录</button>
</block>
</view>
</view>
<template is="footer" />
</view>
02-PG/小程序/weapp-demo/page/API/login/login.wxss 0 → 100644
View file @ 3eafbd03
.page-body-wrapper {
margin-top: 200rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
padding: 0 50rpx;
box-sizing: border-box;
}
.page-body-title {
font-size: 60rpx;
/*TODO 使用 rpx */
line-height: 100px;
}
.page-body-text {
color: #bbb;
font-size: 28rpx;
/*TODO 使用 rpx */
line-height: 20px;
margin: 0 0 100rpx 0;
text-align: center;
}
.page-body-button {
width: 100%;
}
02-PG/小程序/weapp-demo/page/API/navigation-bar-loading/navigation-bar-loading.js 0 → 100644
View file @ 3eafbd03
Page({
showNavigationBarLoading: function () {
wx.showNavigationBarLoading()
},
hideNavigationBarLoading: function () {
wx.hideNavigationBarLoading()
}
})
02-PG/小程序/weapp-demo/page/API/navigation-bar-loading/navigation-bar-loading.wxml 0 → 100644
View file @ 3eafbd03
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />
<view class="container">
<template is="header" data="{{title: 'navigationBarLoading'}}"/>
<view class="page-body">
<view class="page-body-wrapper">
<view class="page-body-buttons">
<button class="page-body-button" type="primary" bindtap="showNavigationBarLoading">显示加载动画</button>
<button class="page-body-button" bindtap="hideNavigationBarLoading">隐藏加载动画</button>
</view>
</view>
</view>
<template is="footer" />
</view>
02-PG/小程序/weapp-demo/page/API/navigator/navigator.js 0 → 100644
View file @ 3eafbd03
Page({
navigateTo: function () {
wx.navigateTo({ url: './navigator' })
},
navigateBack: function () {
wx.navigateBack()
},
redirectTo: function () {
wx.redirectTo({ url: './navigator' })
}
})
02-PG/小程序/weapp-demo/page/API/navigator/navigator.json 0 → 100644
View file @ 3eafbd03
{
"navigationBarTitleText": "页面跳转"
}
02-PG/小程序/weapp-demo/page/API/navigator/navigator.wxml 0 → 100644
View file @ 3eafbd03
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />
<view class="container">
<template is="header" data="{{title: 'navigateTo/Back, redirectTo'}}"/>
<view class="page-body">
<view class="page-body-wrapper">
<view class="page-body-buttons">
<button class="page-body-button" bindtap="navigateTo">跳转新页面</button>
<button class="page-body-button" bindtap="navigateBack">返回上一页</button>
<button class="page-body-button" bindtap="redirectTo">在当前页面打开</button>
</view>
</view>
</view>
<template is="footer" />
</view>
02-PG/小程序/weapp-demo/page/API/on-accelerometer-change/on-accelerometer-change.js 0 → 100644
View file @ 3eafbd03
Page({
onReady: function () {
this.drawBigBall()
var that = this
this.position = {
x: 151,
y: 151,
vx: 0,
vy: 0,
ax: 0,
ay: 0
}
wx.onAccelerometerChange(function (res) {
that.setData({
x: res.x.toFixed(2),
y: res.y.toFixed(2),
z: res.z.toFixed(2)
})
that.position.ax = Math.sin(res.x * Math.PI / 2)
that.position.ay = -Math.sin(res.y * Math.PI / 2)
//that.drawSmallBall()
})
this.interval = setInterval(function () {
that.drawSmallBall()
}, 17)
},
drawBigBall: function () {
var context = wx.createContext()
context.beginPath(0)
context.arc(151, 151, 140, 0, Math.PI * 2)
context.setFillStyle('#ffffff')
context.setStrokeStyle('#aaaaaa')
context.fill()
context.stroke()
wx.drawCanvas({
canvasId: 'big-ball',
actions: context.getActions()
})
},
drawSmallBall: function () {
var p = this.position
var strokeStyle = 'rgba(1,1,1,0)'
p.x = p.x + p.vx
p.y = p.y + p.vy
p.vx = p.vx + p.ax
p.vy = p.vy + p.ay
if (Math.sqrt(Math.pow(Math.abs(p.x) - 151, 2) + Math.pow(Math.abs(p.y) - 151, 2)) >= 115) {
if (p.x > 151 && p.vx > 0) {
p.vx = 0
}
if (p.x < 151 && p.vx < 0) {
p.vx = 0
}
if (p.y > 151 && p.vy > 0) {
p.vy = 0
}
if (p.y < 151 && p.vy < 0) {
p.vy = 0
}
strokeStyle = '#ff0000'
}
var context = wx.createContext()
context.beginPath(0)
context.arc(p.x, p.y, 15, 0, Math.PI * 2)
context.setFillStyle('#1aad19')
context.setStrokeStyle(strokeStyle)
context.fill()
context.stroke()
wx.drawCanvas({
canvasId: 'small-ball',
actions: context.getActions()
})
},
data: {
x: 0,
y: 0,
z: 0
},
onUnload: function () {
clearInterval(this.interval)
}
})
02-PG/小程序/weapp-demo/page/API/on-accelerometer-change/on-accelerometer-change.wxml 0 → 100644
View file @ 3eafbd03
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />
<view class="container">
<template is="header" data="{{title: 'onAccelerometerChange'}}"/>
<view class="page-body">
<view class="page-body-wrapper">
<text class="page-body-text">旋转手机即可移动以下小球</text>
<view class="page-body-canvas">
<canvas class="page-body-ball" show="{{true}}" canvas-id="big-ball"></canvas>
<canvas class="page-body-ball" show="{{true}}" canvas-id="small-ball"></canvas>
</view>
<view class="page-body-xyz">
<text class="page-body-title">X: {{x}}</text>
<text class="page-body-title">Y: {{y}}</text>
<text class="page-body-title">Z: {{z}}</text>
</view>
</view>
</view>
<template is="footer" />
</view>
02-PG/小程序/weapp-demo/page/API/on-accelerometer-change/on-accelerometer-change.wxss 0 → 100644
View file @ 3eafbd03
.page-body-xyz {
display: flex;
justify-content: space-around;
width: 700rpx;
margin-top: 50rpx;
box-sizing: border-box;
}
.page-body-canvas {
width: 302px;
height: 302px;
position: relative;
}
.page-body-ball {
position: absolute;
top: 0;
left: 0;
width: 302px;
height: 302px;
}
.page-body-title {
font-size: 50rpx;
width: 250rpx;
}
02-PG/小程序/weapp-demo/page/API/on-compass-change/on-compass-change.js 0 → 100644
View file @ 3eafbd03
Page({
data: {
direction: 0
},
onReady: function () {
var that = this
wx.onCompassChange(function (res) {
that.setData({
direction: parseInt(res.direction)
})
})
}
})
02-PG/小程序/weapp-demo/page/API/on-compass-change/on-compass-change.wxml 0 → 100644
View file @ 3eafbd03
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />
<view class="container">
<template is="header" data="{{title: 'onCompassChange'}}"/>
<view class="page-body">
<view class="page-body-wrapper">
<text class="page-body-text">选中手机即可获取方位信息</text>
<view class="direction">
<text class="direction-value">{{direction}}</text>
<text class="direction-degree">o</text>
</view>
</view>
</view>
<template is="footer" />
</view>
02-PG/小程序/weapp-demo/page/API/on-compass-change/on-compass-change.wxss 0 → 100644
View file @ 3eafbd03
.direction {
margin-top: 100rpx;
display: flex;
}
.direction-value {
font-size: 200rpx;
}
.direction-degree {
font-size: 40rpx;
}
02-PG/小程序/weapp-demo/page/API/open-location/open-location.js 0 → 100644
View file @ 3eafbd03
Page({
openLocation: function (e) {
console.log(e)
var value = e.detail.value
console.log(value)
wx.openLocation({
longitude: Number(value.longitude),
latitude: Number(value.latitude),
name: value.name,
address: value.address
})
}
})
02-PG/小程序/weapp-demo/page/API/open-location/open-location.wxml 0 → 100644
View file @ 3eafbd03
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />
<view class="container">
<template is="header" data="{{title: 'openLocation'}}"/>
<view class="page-body">
<view class="page-body-wrapper">
<form bindsubmit="openLocation">
<view class="page-body-form">
<view class="page-body-form-item">
<text class="page-body-form-key">经度</text>
<input class="page-body-form-value" type="text" disabled="{{true}}" value="113.324520" name="longitude"></input>
</view>
<view class="page-body-form-item">
<text class="page-body-form-key">纬度</text>
<input class="page-body-form-value" type="text" disabled="{{true}}" value="23.099994" name="latitude"></input>
</view>
<view class="page-body-form-item">
<text class="page-body-form-key">位置名称</text>
<input class="page-body-form-value" type="text" disabled="{{true}}" value="T.I.T 创意园" name="name"></input>
</view>
<view class="page-body-form-item" style="border-bottom: none;">
<text class="page-body-form-key">详细位置</text>
<input class="page-body-form-value" type="text" disabled="{{true}}" value="广州市海珠区新港中路397号" name="address"></input>
</view>
</view>
<view class="page-body-buttons">
<button class="page-body-button" type="primary" formType="submit">查看位置</button>
</view>
</form>
</view>
</view>
<template is="footer" />
</view>
02-PG/小程序/weapp-demo/page/API/pull-down-refresh/pull-down-refresh.js 0 → 100644
View file @ 3eafbd03
Page({
onPullDownRefresh: function () {
console.log('onPullDownRefresh', new Date())
},
stopPullDownRefresh: function () {
wx.stopPullDownRefresh({
complete: function (res) {
console.log(res, new Date())
}
})
}
})
02-PG/小程序/weapp-demo/page/API/pull-down-refresh/pull-down-refresh.json 0 → 100644
View file @ 3eafbd03
{
"navigationBarTitleText": "下拉刷新",
"enablePullDownRefresh": true
}
02-PG/小程序/weapp-demo/page/API/pull-down-refresh/pull-down-refresh.wxml 0 → 100644
View file @ 3eafbd03
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />
<view class="container">
<template is="header" data="{{title: 'on/stopPullDownRefresh'}}"/>
<view class="page-body">
<view class="page-body-wrapper">
<view class="page-body-info">
<text class="page-body-text">下滑页面即可刷新</text>
</view>
<view class="page-body-buttons">
<button bindtap="stopPullDownRefresh">停止刷新</button>
</view>
</view>
</view>
<template is="footer" />
</view>
02-PG/小程序/weapp-demo/page/API/pull-down-refresh/pull-down-refresh.wxss 0 → 100644
View file @ 3eafbd03
.page-body-info {
background-color: transparent;
}
.page-body-buttons button {
color: #21c932;
margin: 0 100rpx;
}
.page-body-buttons button:after {
border-color: #21c932;
}
02-PG/小程序/weapp-demo/page/API/request-payment/request-payment.wxml 0 → 100644
View file @ 3eafbd03
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />
<view class="container">
<template is="header" data="{{title: 'requestPayment'}}"/>
<view class="page-body">
<view class="page-body-wording">
<text class="page-body-text">
自主接入微信支付后，可以让用户在页面上快捷完成下单购买。
</text>
</view>
</view>
<template is="footer" />
</view>
02-PG/小程序/weapp-demo/page/API/request/request.json 0 → 100644
View file @ 3eafbd03
{
"navigationBarTitleText": "网络请求"
}
02-PG/小程序/weapp-demo/page/API/request/request.wxml 0 → 100644
View file @ 3eafbd03
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />
<view class="container">
<template is="header" data="{{title: 'request'}}"/>
<view class="page-body">
<view class="page-body-wording">
<text class="page-body-text">
搭建好自己的后台服务器后，可以跟服务器互通数据，为用户提供个性化服务。
</text>
</view>
</view>
<template is="footer" />
</view>
02-PG/小程序/weapp-demo/page/API/set-navigation-bar-title/set-navigation-bar-title.js 0 → 100644
View file @ 3eafbd03
Page({
setNaivgationBarTitle: function (e) {
var title = e.detail.value.title
console.log(title)
wx.setNavigationBarTitle({
title: title
})
}
})
02-PG/小程序/weapp-demo/page/API/set-navigation-bar-title/set-navigation-bar-title.wxml 0 → 100644
View file @ 3eafbd03
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />
<view class="container">
<template is="header" data="{{title: 'setNaivgationBarTitle'}}"/>
<view class="page-body">
<view class="page-body-wrapper">
<form bindsubmit="setNaivgationBarTitle">
<view class="page-body-form">
<view class="page-body-form-item" style="border-bottom: none;">
<text class="page-body-form-key">页面标题</text>
<input class="page-body-form-value" type="text" placeholder="请输入页面标题并点击设置即可" name="title"></input>
</view>
</view>
<view class="page-body-buttons">
<button class="page-body-button" type="primary" formType="submit">设置</button>
</view>
</form>
</view>
</view>
<template is="footer" />
</view>
02-PG/小程序/weapp-demo/page/API/storage/storage.js 0 → 100644
View file @ 3eafbd03
Page({
data: {
toast: {
hidden: true
}
},
submitForm: function (e) {
var type = e.detail.target.id
var key = e.detail.value.key
var data = e.detail.value.data
if (key.length === 0 && type !== 'clear') {
this.setData({
key: key,
data: data,
'toast.hidden': false,
'toast.content': 'key 不能为空'
})
} else if (type === 'get' && key.length > 0) {
this.setData({
key: key,
data: wx.getStorageSync(key),
'toast.hidden': false,
'toast.content': '读取数据成功'
})
} else if (type === 'set' && key.length > 0) {
wx.setStorageSync(key, data)
this.setData({
key: key,
data: data,
'toast.hidden': false,
'toast.content': '存储数据成功'
})
} else if (type === 'clear') {
wx.clearStorageSync()
this.setData({
key: '',
data: '',
'toast.hidden': false,
'toast.content': '清除数据成功'
})
}
},
toastChange: function () {
this.setData({
'toast.hidden': true
})
}
})
02-PG/小程序/weapp-demo/page/API/storage/storage.json 0 → 100644
View file @ 3eafbd03
{
"navigationBarTitleText": "数据存储"
}
02-PG/小程序/weapp-demo/page/API/storage/storage.wxml 0 → 100644
View file @ 3eafbd03
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />
<view class="container">
<template is="header" data="{{title: 'get/set/clearStorage'}}"/>
<view class="page-body">
<view class="page-body-wrapper">
<form bindsubmit="submitForm" id="123">
<view class="page-body-form">
<view class="page-body-form-item" style="border-bottom: none;">
<input class="page-body-form-key" type="text" placeholder="key" name="key" value="{{key}}"></input>
<input class="page-body-form-value" type="text" placeholder="data" name="data" value="{{data}}"></input>
</view>
</view>
<view class="page-body-buttons">
<button class="page-body-button" type="primary" id="get" formType="submit">读取数据</button>
<button class="page-body-button" id="set" formType="submit">存储数据</button>
<button class="page-body-button" id="clear" formType="submit">清理数据</button>
</view>
</form>
</view>
</view>
<toast hidden="{{toast.hidden}}" bindchange="toastChange">{{toast.content}}</toast>
<template is="footer" />
</view>
02-PG/小程序/weapp-demo/page/API/upload-file/upload-file.json 0 → 100644
View file @ 3eafbd03
{
"navigationBarTitleText": "上传文件"
}
02-PG/小程序/weapp-demo/page/API/upload-file/upload-file.wxml 0 → 100644
View file @ 3eafbd03
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />
<view class="container">
<template is="header" data="{{title: 'uploadFile'}}"/>
<view class="page-body">
<view class="page-body-wording">
<text class="page-body-text">
搭建好自己的后台服务器后，可以将手机上的图片视频等资源上传到服务器上。
</text>
</view>
</view>
<template is="footer" />
</view>
02-PG/小程序/weapp-demo/page/API/voice/voice.js 0 → 100644
View file @ 3eafbd03
var util = require('../../../util/util.js')
var playTimeInterval
Page({
data: {
recording: false,
playing: false,
hasRecord: false,
recordTime: 0,
playTime: 0,
formatedRecordTime: '00:00:00',
formatedPlayTime: '00:00:00'
},
startRecord: function () {
this.setData({ recording: true })
var that = this
var interval = setInterval(function () {
that.data.recordTime += 1
that.setData({
formatedRecordTime: util.formatTime(that.data.recordTime)
})
}, 1000)
wx.startRecord({
success: function (res) {
that.setData({
hasRecord: true,
tempFilePath: res.tempFilePath,
formatedPlayTime: util.formatTime(that.data.playTime)
})
},
complete: function () {
that.setData({ recording: false })
clearInterval(interval)
}
})
},
stopRecord: function () {
wx.stopRecord()
},
playVoice: function () {
var that = this
playTimeInterval = setInterval(function () {
that.data.playTime += 1
that.setData({
playing: true,
formatedPlayTime: util.formatTime(that.data.playTime)
})
}, 1000)
wx.playVoice({
filePath: this.data.tempFilePath,
success: function () {
clearInterval(playTimeInterval)
that.data.playTime = 0
that.setData({
playing: false,
formatedPlayTime: util.formatTime(that.data.playTime)
})
}
})
},
pauseVoice: function () {
clearInterval(playTimeInterval)
wx.pauseVoice()
this.setData({
playing: false
})
},
stopVoice: function () {
clearInterval(playTimeInterval)
this.data.playTime = 0
this.setData({
playing: false,
formatedPlayTime: util.formatTime(this.data.playTime)
})
wx.stopVoice()
},
clear: function () {
this.data.recordTime = 0
this.data.playTime = 0
this.setData({
hasRecord: false,
tempFilePath: '',
formatedRecordTime: util.formatTime(0)
})
}
})
02-PG/小程序/weapp-demo/page/API/voice/voice.json 0 → 100644
View file @ 3eafbd03
{
"navigationBarTitleText": "录音"
}
02-PG/小程序/weapp-demo/page/API/voice/voice.wxml 0 → 100644
View file @ 3eafbd03
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />
<view class="container">
<template is="header" data="{{title: 'start/stopRecord、play/pause/stopVoice'}}"/>
<view class="page-body">
<view class="page-body-wrapper">
<block wx:if="{{recording === false && playing === false && hasRecord === false}}">
<view class="page-body-time">
<text class="time-big">{{formatedRecordTime}}</text>
</view>
<view class="page-body-buttons">
<view class="page-body-button"></view>
<view class="page-body-button" bindtap="startRecord">
<image src="/image/record.png"></image>
</view>
<view class="page-body-button"></view>
</view>
</block>
<block wx:if="{{recording === true}}">
<view class="page-body-time">
<text class="time-big">{{formatedRecordTime}}</text>
</view>
<view class="page-body-buttons">
<view class="page-body-button"></view>
<view class="page-body-button" bindtap="stopRecord">
<view class="button-stop-record"></view>
</view>
<view class="page-body-button"></view>
</view>
</block>
<block wx:if="{{hasRecord === true && playing === false}}">
<view class="page-body-time">
<text class="time-big">{{formatedPlayTime}}</text>
<text class="time-small">{{formatedRecordTime}}</text>
</view>
<view class="page-body-buttons">
<view class="page-body-button"></view>
<view class="page-body-button" bindtap="playVoice">
<image src="/image/play.png"></image>
</view>
<view class="page-body-button" bindtap="clear">
<image src="/image/trash.png"></image>
</view>
</view>
</block>
<block wx:if="{{hasRecord === true && playing === true}}">
<view class="page-body-time">
<text class="time-big">{{formatedPlayTime}}</text>
<text class="time-small">{{formatedRecordTime}}</text>
</view>
<view class="page-body-buttons">
<view class="page-body-button" bindtap="stopVoice">
<image src="/image/stop.png"></image>
</view>
<view class="page-body-button" bindtap="pauseVoice">
<image src="/image/pause.png"></image>
</view>
<view class="page-body-button" bindtap="clear">
<image src="/image/trash.png"></image>
</view>
</view>
</block>
</view>
</view>
<template is="footer" />
</view>
02-PG/小程序/weapp-demo/page/API/voice/voice.wxss 0 → 100644
View file @ 3eafbd03
.page-body-wrapper {
justify-content: space-between;
flex-grow: 1;
margin-bottom: 300rpx;
}
.page-body-time {
display: flex;
flex-direction: column;
align-items: center;
}
.time-big {
font-size: 60rpx;
margin: 20rpx;
}
.time-small {
font-size: 30rpx;
}
.page-body-buttons {
display: flex;
justify-content: space-around;
}
.page-body-button {
width: 250rpx;
text-align: center;
}
.button-stop-record {
width: 110rpx;
height: 110rpx;
border: 20rpx solid #fff;
background-color: #f55c23;
border-radius: 130rpx;
margin: 0 auto;
}
02-PG/小程序/weapp-demo/page/API/web-socket/web-socket.wxml 0 → 100644
View file @ 3eafbd03
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />
<view class="container">
<template is="header" data="{{title: 'WebSocket'}}"/>
<view class="page-body">
<view class="page-body-wording">
<text class="page-body-text">
搭建好自己的后台服务器后，可以跟服务器建立持久连接，实现即时聊天等功能。
</text>
</view>
</view>
<template is="footer" />
</view>
02-PG/小程序/weapp-demo/page/component/component-pages/wx-action-sheet/wx-action-sheet.js 0 → 100644
View file @ 3eafbd03
var items = ['item1', 'item2', 'item3', 'item4']
var pageObject = {
data: {
actionSheetHidden: true,
actionSheetItems: items
},
actionSheetTap: function(e) {
this.setData({
actionSheetHidden: !this.data.actionSheetHidden
})
},
actionSheetChange: function(e) {
this.setData({
actionSheetHidden: !this.data.actionSheetHidden
})
}
}
for (var i = 0; i < items.length; ++i) {
(function(itemName) {
pageObject['bind' + itemName] = function(e) {
console.log('click' + itemName, e)
}
})(items[i])
}
Page(pageObject)
02-PG/小程序/weapp-demo/page/component/component-pages/wx-action-sheet/wx-action-sheet.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">action-sheet</text>
<text class="page__desc">action-sheet</text>
</view>
<view class="page__bd">
<view class="section section_gap">
<button type="default" bindtap="actionSheetTap">弹出action sheet</button>
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
<block wx:for-items="{{actionSheetItems}}">
<action-sheet-item class="item" bindtap="bind{{item}}">{{item}}</action-sheet-item>
</block>
<action-sheet-cancel class="cancel">取消</action-sheet-cancel>
</action-sheet>
</view>
</view>
</view>
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-action-sheet/wx-action-sheet.wxss 0 → 100644
View file @ 3eafbd03
/*
.cancel {
color: white;
background: #303F9F;
}
.item {
color: black;
background: #C5CAE9;
}*/
02-PG/小程序/weapp-demo/page/component/component-pages/wx-audio/wx-audio.js 0 → 100644
View file @ 3eafbd03
Page({
data: {
audioAction: {
method: 'pause'
}
},
audioPlayed: function(e) {
console.log('audio is played')
}
})
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-audio/wx-audio.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">audio</text>
<text class="page__desc">音频</text>
</view>
<view class="page__bd">
<view class="section tc">
<audio src="http://5.1015600.com/2014/ring/000/118/28b0e17cfab0136677648b39cb8b7fbc.mp3" action="{{audioAction}}" bindplay="audioPlayed" controls></audio>
</view>
</view>
</view>
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-button/wx-button.js 0 → 100644
View file @ 3eafbd03
var types = ['default', 'primary', 'warn']
var pageObject = {
data: {
defaultSize: 'default',
primarySize: 'default',
warnSize: 'default',
disabled: false,
plain: false,
loading: false
},
setDisabled: function(e) {
this.setData({
disabled: !this.data.disabled
})
},
setPlain: function(e) {
this.setData({
plain: !this.data.plain
})
},
setLoading: function(e) {
this.setData({
loading: !this.data.loading
})
}
}
for (var i = 0; i < types.length; ++i) {
(function(type) {
pageObject[type] = function(e) {
var key = type + 'Size'
var changedData = {}
changedData[key] =
this.data[key] === 'default' ? 'mini' : 'default'
this.setData(changedData)
}
})(types[i])
}
Page(pageObject)
02-PG/小程序/weapp-demo/page/component/component-pages/wx-button/wx-button.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">button</text>
<text class="page__desc">按钮</text>
</view>
<view class="page__bd">
<view class="btn-area" id="buttonContainer">
<view class="button-wrapper">
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="default"> default
</button>
</view>
<view class="button-wrapper">
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="primary"> primary
</button>
</view>
<view class="button-wrapper">
<button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}"
bindtap="warn"> warn
</button>
</view>
<view class="button-wrapper">
<button bindtap="setDisabled">点击设置以上按钮disabled属性</button>
</view>
<view class="button-wrapper">
<button bindtap="setPlain">点击设置以上按钮plain属性</button>
</view>
<view class="button-wrapper">
<button bindtap="setLoading">点击设置以上按钮loading属性</button>
</view>
</view>
</view>
</view>
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-checkbox/wx-checkbox.js 0 → 100644
View file @ 3eafbd03
Page({
data: {
items: [
{name: 'USA', value: '美国'},
{name: 'CHN', value: '中国', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英国'},
{name: 'FRA', value: '法国'},
]
},
checkboxChange: function(e) {
console.log('checkbox发生change事件，携带value值为：', e.detail.value)
}
})
02-PG/小程序/weapp-demo/page/component/component-pages/wx-checkbox/wx-checkbox.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">checkbox</text>
<text class="page__desc">多选框</text>
</view>
<view class="page__bd">
<view class="section section_gap">
<checkbox-group bindchange="checkboxChange">
<label class="checkbox" wx:for-items="{{items}}">
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</checkbox-group>
</view>
</view>
</view>
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-checkbox/wx-checkbox.wxss 0 → 100644
View file @ 3eafbd03
.checkbox{
display: block;
margin-bottom: 10px;
}
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-form/wx-form.js 0 → 100644
View file @ 3eafbd03
Page({
data: {
pickerHidden: true,
chosen: ''
},
pickerConfirm: function(e) {
this.setData({
pickerHidden: true
})
this.setData({
chosen: e.detail.value
})
},
pickerCancel: function(e) {
this.setData({
pickerHidden: true
})
},
pickerShow: function(e) {
this.setData({
pickerHidden: false
})
},
formSubmit: function(e) {
console.log('form发生了submit事件，携带数据为：', e.detail.value)
},
formReset: function(e) {
console.log('form发生了reset事件，携带数据为：', e.detail.value)
this.setData({
chosen: ''
})
}
})
02-PG/小程序/weapp-demo/page/component/component-pages/wx-form/wx-form.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">form</text>
<text class="page__desc">表单</text>
</view>
<form class="page__bd" catchsubmit="formSubmit" catchreset="formReset">
<view class="section section_gap">
<view class="section__title">switch</view>
<switch name="switch"/>
</view>
<view class="section section_gap">
<view class="section__title">slider</view>
<slider name="slider" show-value ></slider>
</view>
<view class="section">
<view class="section__title">input</view>
<input name="input" placeholder="please input here" />
</view>
<view class="section section_gap">
<view class="section__title">radio</view>
<radio-group name="radio-group">
<label><radio value="radio1"/>radio1</label>
<label><radio value="radio2"/>radio2</label>
</radio-group>
</view>
<view class="section section_gap">
<view class="section__title">checkbox</view>
<checkbox-group name="checkbox">
<label><checkbox value="checkbox1"/>checkbox1</label>
<label><checkbox value="checkbox2"/>checkbox2</label>
</checkbox-group>
</view>
<view class="btn-area">
<button formType="submit">Submit</button>
<button formType="reset">Reset</button>
</view>
</form>
</view>
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-form/wx-form.wxss 0 → 100644
View file @ 3eafbd03
wx-button {
margin-top: 10px;
margin-bottom: 10px;
}
wx-label {
display: block;
margin-top: 5px;
}
.picker-text {
margin-left: 10px;
position: relative;
}
02-PG/小程序/weapp-demo/page/component/component-pages/wx-icon/wx-icon.js 0 → 100644
View file @ 3eafbd03
Page({
data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconColor: [
'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
],
iconType: [
'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',
'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',
'info_circle', 'cancel', 'search', 'clear'
]
}
})
02-PG/小程序/weapp-demo/page/component/component-pages/wx-icon/wx-icon.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">icon</text>
<text class="page__desc">icon图标</text>
</view>
<view class="page__bd">
<view class="section section_gap">
<view class="group">
<block wx:for-items="{{iconSize}}">
<icon type="success" size="{{item}}"/>
</block>
</view>
</view>
<view class="section section_gap">
<view class="group">
<scroll-view scroll-x>
<block wx:for-items="{{iconType}}">
<icon type="{{item}}" size="45"/>
</block>
</scroll-view>
</view>
</view>
<view class="section section_gap">
<view class="group">
<block wx:for-items="{{iconColor}}">
<icon type="success" size="45" color="{{item}}"/>
</block>
</view>
</view>
</view>
</view>
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-icon/wx-icon.wxss 0 → 100644
View file @ 3eafbd03
.group{
flex-direction: row;
align-items: center;
}
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-image/wx-image.js 0 → 100644
View file @ 3eafbd03
Page({
imageError: function(e) {
console.log('image3发生error事件，携带值为', e.detail.errMsg)
}
})
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-image/wx-image.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">image</text>
<text class="page__desc">图片</text>
</view>
<view class="page__bd">
<view class="section section_gap">
<view class="section__title"> local image</view>
<view class="section__ctn">
<image src="../../resources/pic.jpg"/>
</view>
</view>
<view class="section section_gap">
<view class="section__title"> internet image</view>
<view class="section__ctn">
<image src="http://img02.tooopen.com/images/20160603/tooopen_sy_164101489754.jpg" width="200"
height="130"/>
</view>
</view>
<view class="section section_gap">
<view class="section__title"> error image</view>
<view class="section__ctn">
<image src="error url" binderror="imageError"/>
</view>
</view>
</view>
</view>
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-image/wx-image.wxss 0 → 100644
View file @ 3eafbd03
.section__ctn{
text-align: center;
}
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-input/wx-input.js 0 → 100644
View file @ 3eafbd03
Page({
data:{
focus:false,
inputValue:""
},
bindButtonTap:function(){
this.setData({
focus:true
})
},
bindKeyInput:function(e){
this.setData({
inputValue:e.detail.value
})
},
bindReplaceInput:function(e){
var value = e.detail.value;
var pos = e.detail.cursor;
if(pos != -1){
//光标在中间
var left = e.detail.value.slice(0,pos);
//计算光标的位置
pos = left.replace(/11/g,'2').length;
}
//直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置
return {
value:value.replace(/11/g,'2'),
cursor:pos
}
//或者直接返回字符串,光标在最后边
//return value.replace(/11/g,'2'),
},
bindHideKeyboard:function(e){
if(e.detail.value === "123"){
//收起键盘
wx.hideKeyboard();
}
}
})
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-input/wx-input.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">input</text>
<text class="page__desc">输入框</text>
</view>
<view class="page__bd">
<view class="section">
<input placeholder="这是一个可以自动聚焦的input" auto-focus/>
</view>
<view class="section">
<input placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
<view class="btn-area">
<button bindtap="bindButtonTap">使得输入框获取焦点</button>
</view>
</view>
<view class="section">
<input maxlength="10" placeholder="最大输入长度10" />
</view>
<view class="section">
<view class="section__title">你输入的是：{{inputValue}}</view>
<input bindinput="bindKeyInput" placeholder="输入同步到view中"/>
</view>
<view class="section">
<input bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />
</view>
<view class="section">
<input bindinput="bindHideKeyboard" placeholder="输入123自动收起键盘" />
</view>
<view class="section">
<input type="emoji" placeholder="这是一个带有表情的输入框" />
</view>
<view class="section">
<input password type="number" placeholder="这是一个数字输入框" />
</view>
<view class="section">
<input password type="text" placeholder="这是一个文本输入框" />
</view>
<view class="section">
<input type="digit" placeholder="带小数点的数字键盘"/>
</view>
<view class="section">
<input type="idcard" placeholder="身份证输入键盘" />
</view>
<view class="section">
<input placeholder-style="color:red" placeholder="占位符字体是红色的" />
</view>
</view>
</view>
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-label/wx-label.js 0 → 100644
View file @ 3eafbd03
Page({
data: {
checkboxItems: [
{name: 'USA', value: '美国'},
{name: 'CHN', value: '中国', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本', checked: 'true'},
{name: 'ENG', value: '英国'},
{name: 'FRA', value: '法国'},
],
radioItems: [
{name: 'USA', value: '美国'},
{name: 'CHN', value: '中国', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英国'},
{name: 'FRA', value: '法国'},
],
hidden: false
},
checkboxChange: function(e) {
var checked = e.detail.value
var changed = {}
for (var i = 0; i < this.data.checkboxItems.length; i ++) {
if (checked.indexOf(this.data.checkboxItems[i].name) !== -1) {
changed['checkboxItems['+i+'].checked'] = true
} else {
changed['checkboxItems['+i+'].checked'] = false
}
}
this.setData(changed)
},
radioChange: function(e) {
var checked = e.detail.value
var changed = {}
for (var i = 0; i < this.data.radioItems.length; i ++) {
if (checked.indexOf(this.data.radioItems[i].name) !== -1) {
changed['radioItems['+i+'].checked'] = true
} else {
changed['radioItems['+i+'].checked'] = false
}
}
this.setData(changed)
},
tapEvent: function(e) {
console.log('按钮被点击')
}
})
02-PG/小程序/weapp-demo/page/component/component-pages/wx-label/wx-label.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">label</text>
<text class="page__desc">标签</text>
</view>
<view class="page__bd">
<view class="section section_gap">
<view class="section__title">表单组件在label内</view>
<checkbox-group class="group" bindchange="checkboxChange">
<view class="label-1" wx:for-items="{{checkboxItems}}">
<label>
<checkbox value="{{item.name}}" checked="{{item.checked}}"></checkbox>
<text class="label-1__text">{{item.value}}</text>
</label>
</view>
</checkbox-group>
</view>
<view class="section section_gap">
<view class="section__title">label用for标识表单组件</view>
<radio-group class="group" bindchange="radioChange">
<view class="label-2" wx:for-items="{{radioItems}}">
<radio id="{{item.name}}" value="{{item.name}}" checked="{{item.checked}}"></radio>
<label class="label-2__text" for="{{item.name}}"><text>{{item.name}}</text></label>
</view>
</radio-group>
</view>
<view class="section section_gap">
<view class="section__title">绑定button</view>
<label class="label-3">
<text>点击这段文字，button会被选中</text>
</label>
<view class="btn-area">
<button type="default" name="1" bindtap="tapEvent">按钮</button>
</view>
</view>
<view class="section section_gap">
<view class="section__title">label内有多个时选中第一个</view>
<label class="label-4">
<checkbox> 选中我 </checkbox>
<checkbox> 选不中 </checkbox>
<checkbox> 选不中 </checkbox>
<checkbox> 选不中 </checkbox>
<view class="label-4_text">点我会选中第一个</view>
</label>
</view>
</view>
</view>
02-PG/小程序/weapp-demo/page/component/component-pages/wx-label/wx-label.wxss 0 → 100644
View file @ 3eafbd03
.label-1, .label-2{
margin-bottom: 15px;
}
.label-4_text{
text-align: center;
margin-top: 15px;
}
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-mask/wx-mask.js 0 → 100644
View file @ 3eafbd03
var pageData = {}
var maskNum = 4
pageData.data = {}
for(var i = 1; i <= maskNum; ++i) {
pageData.data[`hidden${i}`] = true;
(function(index) {
pageData[`tap${index}`] = function(e) {
var obj = {}
obj[`hidden${index}`] = false
this.setData(obj)
}
pageData[`mask${index}`] = function(e) {
var obj = {}
obj[`hidden${index}`] = true
this.setData(obj)
}
})(i);
}
Page(pageData)
02-PG/小程序/weapp-demo/page/component/component-pages/wx-mask/wx-mask.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">mask</text>
<text class="page__desc">遮罩</text>
</view>
<view class="page__bd">
<view class="btn-area">
<view class="body-view">
<mask hidden="{{hidden1}}" bindtap="mask1" hover-style="none"/>
<button type="default" bindtap="tap1">点击弹出默认mask</button>
</view>
<view class="body-view">
<mask hidden="{{hidden2}}" bindtap="mask2" style="background-color: rgba(255,255,0,0.6);" hover-style="none"/>
<button type="default" bindtap="tap2">点击弹出半透明颜色的mask</button>
</view>
<view class="body-view">
<mask hidden="{{hidden3}}" bindtap="mask3" style="background-color: rgb(0,255,0);" hover-style="none"/>
<button type="default" bindtap="tap3">点击弹出纯色mask</button>
</view>
<view class="body-view">
<mask hidden="{{hidden4}}" bindtap="mask4" style="z-index: -100;" hover-style="none"/>
<button type="default" bindtap="tap4">点击弹出设置z-index的mask</button>
</view>
</view>
</view>
</view>
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-modal/wx-modal.js 0 → 100644
View file @ 3eafbd03
Page({
data: {
modalHidden: true,
modalHidden2: true
},
modalTap: function(e) {
this.setData({
modalHidden: false
})
},
modalChange: function(e) {
this.setData({
modalHidden: true
})
},
modalTap2: function(e) {
this.setData({
modalHidden2: false
})
},
modalChange2: function(e) {
this.setData({
modalHidden2: true
})
},
})
02-PG/小程序/weapp-demo/page/component/component-pages/wx-modal/wx-modal.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">modal</text>
<text class="page__desc">模式对话框</text>
</view>
<view class="page__bd">
<modal title="标题" confirm-text="confirm" cancel-text="cancel" hidden="{{modalHidden}}" mask bindconfirm="modalChange" bindcancel="modalChange">
这是对话框的内容。
</modal>
<modal class="modal" hidden="{{modalHidden2}}" no-cancel bindconfirm="modalChange2" bindcancel="modalChange2">
<view> 没有标题没有取消的对话框 </view>
<view> 内容可以插入节点 </view>
</modal>
<view class="btn-area">
<button type="default" bindtap="modalTap">点击弹出modal</button>
<button type="default" bindtap="modalTap2">点击弹出modal2</button>
</view>
</view>
</view>
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-navigator/navigate.js 0 → 100644
View file @ 3eafbd03
Page({
onLoad: function(options) {
console.log(options)
this.setData({
title: options.title
})
}
})
02-PG/小程序/weapp-demo/page/component/component-pages/wx-navigator/navigate.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">{{title}}</text>
<text class="page__desc">这是新建的页面，点击左上角返回回到之前页面</text>
</view>
</view>
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-navigator/redirect.js 0 → 100644
View file @ 3eafbd03
Page({
onLoad: function(options) {
console.log(options)
this.setData({
title: options.title
})
}
})
02-PG/小程序/weapp-demo/page/component/component-pages/wx-navigator/redirect.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">{{title}}</text>
<text class="page__desc">这是当前页，点击左上角返回回到上级菜单</text>
</view>
</view>
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-navigator/wx-navigator.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">navigator</text>
<text class="page__desc">导航栏</text>
</view>
<view class="page__bd">
<view class="btn-area">
<navigator url="navigate?title=navigate" hover-class="navigator-hover">
<button type="default">跳转到新页面</button>
</navigator>
<navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">
<button type="default">在当前页打开</button>
</navigator>
</view>
</view>
</view>
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-navigator/wx-navigator.wxss 0 → 100644
View file @ 3eafbd03
.navigator-hover button{
background-color:blue;
}
.other-navigator-hover button{
background-color:red;
}
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-picker/wx-picker.js 0 → 100644
View file @ 3eafbd03
Page({
data: {
array:["中国","美国","巴西","日本"],
index:0,
date:"2016-09-01",
time:"12:01"
},
bindPickerChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
bindDateChange:function(e){
this.setData({
date:e.detail.value
})
},
bindTimeChange:function(e){
this.setData({
time:e.detail.time
})
}
})
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-picker/wx-picker.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">picker</text>
<text class="page__desc">选择器</text>
</view>
<view class="page__bd">
<view class="section">
<view class="section__title">地区选择器</view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
当前选择：{{array[index]}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">时间选择器</view>
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="picker">
当前选择: {{time}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">日期选择器</view>
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
<view class="picker">
当前选择: {{date}}
</view>
</picker>
</view>
</view>
</view>
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-picker/wx-picker.wxss 0 → 100644
View file @ 3eafbd03
.picker{
padding: 13px;
background-color: #FFFFFF;
}
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-progress/wx-progress.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">progress</text>
<text class="page__desc">进度条</text>
</view>
<view class="page__bd">
<view class="section section_gap">
<progress percent="20" show-info/>
<progress percent="40" active/>
<progress percent="60" stroke-width="10"/>
<progress percent="80" color="#10AEFF"/>
</view>
</view>
</view>
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-progress/wx-progress.wxss 0 → 100644
View file @ 3eafbd03
progress{
margin-bottom: 30px;
}
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-radio/wx-radio.js 0 → 100644
View file @ 3eafbd03
Page({
data: {
items: [
{name: 'USA', value: '美国'},
{name: 'CHN', value: '中国', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英国'},
{name: 'FRA', value: '法国'},
]
},
radioChange: function(e) {
console.log('radio发生change事件，携带value值为：', e.detail.value)
}
})
02-PG/小程序/weapp-demo/page/component/component-pages/wx-radio/wx-radio.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">radio</text>
<text class="page__desc">单选框</text>
</view>
<view class="page__bd">
<view class="section section_gap">
<radio-group class="radio-group" bindchange="radioChange">
<label class="radio" wx:for-items="{{items}}">
<radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</radio-group>
</view>
</view>
</view>
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-radio/wx-radio.wxss 0 → 100644
View file @ 3eafbd03
.radio {
display: block;
margin-bottom: 10px;
}
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-scroll-view/wx-scroll-view.js 0 → 100644
View file @ 3eafbd03
var order = ['green', 'red', 'yellow', 'blue', 'green']
Page({
data: {
toView: "green"
},
upper: function(e) {
console.log(e)
},
lower: function(e) {
console.log(e)
},
scroll: function(e) {
console.log(e)
},
scrollToTop: function(e) {
this.setAction({
scrollTop: 0
})
},
tap: function(e) {
for (var i = 0; i < order.length; ++i) {
if (order[i] === this.data.toView) {
this.setData({
toView: order[i + 1],
scrollTop: (i + 1) * 200
})
break
}
}
},
tapMove: function(e) {
this.setData({
scrollTop: this.data.scrollTop + 10
})
}
})
02-PG/小程序/weapp-demo/page/component/component-pages/wx-scroll-view/wx-scroll-view.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">scroll-view</text>
<text class="page__desc">可滚动视图区域。</text>
</view>
<view class="page__bd">
<view class="section">
<view class="section__title">vertical scroll</view>
<scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<view id="green" class="scroll-view-item bc_green"></view>
<view id="red" class="scroll-view-item bc_red"></view>
<view id="yellow" class="scroll-view-item bc_yellow"></view>
<view id="blue" class="scroll-view-item bc_blue"></view>
</scroll-view>
<view class="btn-area">
<button size="mini" bindtap="tap">click me to scroll into view </button>
<button size="mini" bindtap="tapMove">click me to scroll</button>
<button size="mini" bindtap="scrollToTop">click me to top</button>
</view>
</view>
<view class="section section_gap">
<view class="section__title">horizontal scroll</view>
<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
<view id="green" class="scroll-view-item_H bc_green"></view>
<view id="red" class="scroll-view-item_H bc_red"></view>
<view id="yellow" class="scroll-view-item_H bc_yellow"></view>
<view id="blue" class="scroll-view-item_H bc_blue"></view>
</scroll-view>
</view>
</view>
</view>
02-PG/小程序/weapp-demo/page/component/component-pages/wx-scroll-view/wx-scroll-view.wxss 0 → 100644
View file @ 3eafbd03
.scroll-view_H{
white-space: nowrap;
}
.scroll-view-item{
height: 200px;
}
.scroll-view-item_H{
display: inline-block;
width: 100%;
height: 200px;
}
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-slide-tab/wx-slide-tab.js 0 → 100644
View file @ 3eafbd03
Page({
data: {
texts: [
'这是第1个tab\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n嘻嘻，到底了',
'这是第2个tab\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n嘻嘻，到底了',
'这是第3个tab\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n嘻嘻，到底了'
]
},
tabchange: function(e){
console.log('现在跳转到了第 ' + e.detail.current + ' 个tab')
}
})
02-PG/小程序/weapp-demo/page/component/component-pages/wx-slide-tab/wx-slide-tab.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">slide-tab</text>
<text class="page__desc">slide-tab</text>
</view>
<view class="page__bd">
<view class="section section_gap">
<swiper duration="300" bindchange="tabchange" style="height: 300px; color: #fff">
<block wx:for-items="{{texts}}">
<swiper-item style="background-color: #{{index}}{{index}}{{index}}">
<scroll-view scroll-y>
<text>{{item}}</text>
</scroll-view>
</swiper-item>
</block>
</swiper>
</view>
</view>
</view>
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-slider/wx-slider.js 0 → 100644
View file @ 3eafbd03
var pageData = {}
for(var i = 1; i < 5; ++i) {
(function (index) {
pageData[`slider${index}change`] = function(e) {
console.log(`slider${index}发生change事件，携带值为`, e.detail.value)
}
})(i);
}
Page(pageData)
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-slider/wx-slider.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">slider</text>
<text class="page__desc">滑块</text>
</view>
<view class="page__bd">
<view class="section section_gap">
<text class="section__title">设置step</text>
<view class="body-view">
<slider value="60" bindchange="slider2change" step="5"/>
</view>
</view>
<view class="section section_gap">
<text class="section__title">显示当前value</text>
<view class="body-view">
<slider value="50" bindchange="slider3change" show-value/>
</view>
</view>
<view class="section section_gap">
<text class="section__title">设置最小/最大值</text>
<view class="body-view">
<slider value="100" bindchange="slider4change" min="50" max="200" show-value/>
</view>
</view>
</view>
</view>
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-swiper/wx-swiper.js 0 → 100644
View file @ 3eafbd03
Page({
data: {
background: ['green', 'red', 'yellow'],
indicatorDots: true,
vertical: false,
autoplay: false,
interval: 3000,
duration: 1000
},
changeIndicatorDots: function (e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeVertical: function (e) {
this.setData({
vertical: !this.data.vertical
})
},
changeAutoplay: function (e) {
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange: function (e) {
this.setData({
interval: e.detail.value
})
},
durationChange: function (e) {
this.setData({
duration: e.detail.value
})
}
})
02-PG/小程序/weapp-demo/page/component/component-pages/wx-swiper/wx-swiper.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">swiper</text>
<text class="page__desc">swiper</text>
</view>
<view class="page__bd">
<view class="section section_gap swiper">
<swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for-items="{{background}}">
<swiper-item>
<view class="swiper-item bc_{{item}}"></view>
</swiper-item>
</block>
</swiper>
</view>
<view class="btn-area">
<button type="default" bindtap="changeIndicatorDots">indicator-dots</button>
<button type="default" bindtap="changeVertical">{{vertical?'horizontal':'vertical'}}</button>
<button type="default" bindtap="changeAutoplay">autoplay</button>
</view>
<slider bindchange="durationChange" value="{{duration}}" show-value min="500" max="2000"/>
<view class="section__title">duration</view>
<slider bindchange="intervalChange" value="{{interval}}" show-value min="2000" max="10000"/>
<view class="section__title">interval</view>
</view>
</view>
02-PG/小程序/weapp-demo/page/component/component-pages/wx-swiper/wx-swiper.wxss 0 → 100644
View file @ 3eafbd03
.swiper-item{
display: block;
height: 150px;
}
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-switch/wx-switch.js 0 → 100644
View file @ 3eafbd03
var pageData = {
data: {
switch1Checked: true,
switch2Checked: false,
switch1Style: '',
switch2Style: 'text-decoration: line-through'
}
}
for(var i = 1; i <= 2; ++i) {
(function(index) {
pageData[`switch${index}Change`] = function(e) {
console.log(`switch${index}发生change事件，携带值为`, e.detail.value)
var obj = {}
obj[`switch${index}Checked`] = e.detail.value
this.setData(obj)
obj = {}
obj[`switch${index}Style`] = e.detail.value ? '' : 'text-decoration: line-through'
this.setData(obj)
}
})(i)
}
Page(pageData)
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-switch/wx-switch.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">switch</text>
<text class="page__desc">开关</text>
</view>
<view class="page__bd">
<view class="section section_gap">
<view class="body-view">
<switch checked="{{switch1Checked}}" bindchange="switch1Change"/>
</view>
</view>
</view>
</view>
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-text/wx-text.js 0 → 100644
View file @ 3eafbd03
var initData = 'this is first line\nthis is second line'
Page({
data: {
text: initData
},
extraLine: [],
add: function(e) {
this.extraLine.push('other line')
this.setData({
text: initData + '\n' + this.extraLine.join('\n')
})
},
remove: function(e) {
if (this.extraLine.length > 0) {
this.extraLine.pop()
this.setData({
text: initData + '\n' + this.extraLine.join('\n')
})
}
}
})
02-PG/小程序/weapp-demo/page/component/component-pages/wx-text/wx-text.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">text</text>
<text class="page__desc">文字标签</text>
</view>
<view class="page__bd">
<view class="section section_gap">
<text>{{text}}</text>
<view class="btn-area">
<button bindtap="add">add line</button>
<button bindtap="remove">remove line</button>
</view>
</view>
</view>
</view>
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-toast/wx-toast.js 0 → 100644
View file @ 3eafbd03
var toastNum = 3
var pageData = {}
pageData.data = {}
for(var i = 0; i <= toastNum; ++i) {
pageData.data['toast'+i+'Hidden'] = true;
(function (index) {
pageData['toast'+index+'Change'] = function(e) {
var obj = {}
obj['toast'+index+'Hidden'] = true;
this.setData(obj)
}
pageData['toast'+index+'Tap'] = function(e) {
var obj = {}
obj['toast'+index+'Hidden'] = false
this.setData(obj)
}
})(i)
}
Page(pageData)
02-PG/小程序/weapp-demo/page/component/component-pages/wx-toast/wx-toast.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">toast</text>
<text class="page__desc">toast提示</text>
</view>
<view class="page__bd">
<view class="btn-area">
<view class="body-view">
<toast hidden="{{toast1Hidden}}" bindchange="toast1Change">
默认
</toast>
<button type="default" bindtap="toast1Tap">点击弹出默认toast</button>
</view>
<view class="body-view">
<toast hidden="{{toast2Hidden}}" icon="warn" bindchange="toast2Change">
设置icon
</toast>
<button type="default" bindtap="toast2Tap">点击弹出设置icon的toast</button>
</view>
<view class="body-view">
<toast hidden="{{toast3Hidden}}" duration="3000" bindchange="toast3Change">
设置duration
</toast>
<button type="default" bindtap="toast3Tap">点击弹出设置duration的toast</button>
</view>
</view>
</view>
</view>
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-video/wx-video.js 0 → 100644
View file @ 3eafbd03
Page({
data:{
src:""
},
bindButtonTap:function(){
var that = this;
wx.chooseVideo({
sourceType:['album','camera'],
maxDuration:60,
camera:['front','back'],
success:function(res){
that.setData({
src:res.tempFilePath
})
}
})
},
videoErrorCallback: function (e) {
console.log('视频错误信息:');
console.log(e.detail.errMsg);
}
})
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-video/wx-video.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">video</text>
<text class="page__desc">视频</text>
</view>
<view class="page__bd">
<view class="section tc">
<video src="http://flv.bn.netease.com/videolib3/1605/22/auDfZ8781/HD/auDfZ8781-mobile.mp4" binderror="videoErrorCallback"></video>
</view>
<view class="section tc">
<video src="{{src}}"></video>
<view class="btn-area">
<button bindtap="bindButtonTap">获取视频</button>
</view>
</view>
</view>
</view>
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-view/wx-view.wxml 0 → 100644
View file @ 3eafbd03
<view class="page">
<view class="page__hd">
<text class="page__title">view</text>
<text class="page__desc">弹性框模型分为弹性容器以及弹性项目。当组件的display为flex或inline-flex时，该组件则为弹性容器，弹性容器的子组件为弹性项目。</text>
</view>
<view class="page__bd">
<view class="section">
<view class="section__title">flex-direction: row</view>
<view class="flex-wrp" style="flex-direction:row;">
<view class="flex-item bc_green"></view>
<view class="flex-item bc_red"></view>
<view class="flex-item bc_blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">flex-direction: column</view>
<view class="flex-wrp" style="height: 300px;flex-direction:column;">
<view class="flex-item bc_green"></view>
<view class="flex-item bc_red"></view>
<view class="flex-item bc_blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">justify-content: flex-start</view>
<view class="flex-wrp" style="flex-direction:row;justify-content: flex-start;">
<view class="flex-item bc_green"></view>
<view class="flex-item bc_red"></view>
<view class="flex-item bc_blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">justify-content: flex-end</view>
<view class="flex-wrp" style="flex-direction:row;justify-content: flex-end;">
<view class="flex-item bc_green"></view>
<view class="flex-item bc_red"></view>
<view class="flex-item bc_blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">justify-content: center</view>
<view class="flex-wrp" style="flex-direction:row;justify-content: center;">
<view class="flex-item bc_green"></view>
<view class="flex-item bc_red"></view>
<view class="flex-item bc_blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">justify-content: space-between</view>
<view class="flex-wrp" style="flex-direction:row;justify-content: space-between;">
<view class="flex-item bc_green"></view>
<view class="flex-item bc_red"></view>
<view class="flex-item bc_blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">justify-content: space-around</view>
<view class="flex-wrp" style="flex-direction:row;justify-content: space-around;">
<view class="flex-item bc_green"></view>
<view class="flex-item bc_red"></view>
<view class="flex-item bc_blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">align-items: flex-end</view>
<view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: flex-end">
<view class="flex-item bc_green"></view>
<view class="flex-item bc_red"></view>
<view class="flex-item bc_blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">align-items: center</view>
<view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: center">
<view class="flex-item bc_green"></view>
<view class="flex-item bc_red"></view>
<view class="flex-item bc_blue"></view>
</view>
</view>
</view>
</view>
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/component-pages/wx-view/wx-view.wxss 0 → 100644
View file @ 3eafbd03
.flex-wrp{
height: 100px;
display:flex;
background-color: #FFFFFF;
}
.flex-item{
width: 100px;
height: 100px;
}
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/index.js 0 → 100644
View file @ 3eafbd03
var pageData = {},
type = [
'view', 'content', 'form', 'interact', 'nav', 'media', 'map', 'canvas'
];
pageData.widgetsToggle = function (e) {
var id = e.currentTarget.id, data = {};
for (var i = 0, len = type.length; i < len; ++i) {
data[type[i] + 'Show'] = false;
}
data[id + 'Show'] = !this.data[id + 'Show'];
this.setData(data);
};
/**
* 扫码上传简历
*/
pageData.scanToggle = function (e) {
var id = e.currentTarget.id, data = {};
for (var i = 0, len = type.length; i < len; ++i) {
data[type[i] + 'Show'] = false;
}
data[id + 'Show'] = !this.data[id + 'Show'];
this.setData(data);
};
/**
* 创建一份简历
*/
pageData.mkdirToggle = function (e) {
var url = '/page/resume/resume';
wx.navigateTo({ url: url })
};
Page(pageData);
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/index.wxml 0 → 100644
View file @ 3eafbd03
<view class="index">
<view style="margin-left:5px">
<image src="/image/titlelogo.png" style="width:100%;height:100px"/>
</view>
<view class="body">
<view class="widgets">
<view class="widgets__item">
<view id="view" class="widgets__info" bindtap="scanToggle">
<image src="/image/jianli_saomiao.png" style="width:100%; height:100px;" background-size="cover" />
</view>
</view>
<view class="widgets__item">
<view id="view" class="widgets__info" bindtap="mkdirToggle">
<image src="/image/jianli_bianji2.png" style="width:100%; height:100px;" background-size="cover" />
</view>
</view>
</view>
</view>
</view>
<!--
<view class="index">
<view class="head">
<view class="title">小程序组件</view>
<view class="desc">这是展示小程序组件的DEMO。</view>
</view>
<view class="body">
<view class="widgets">
<view class="widgets__item">
<view id="view" class="widgets__info {{viewShow ? 'widgets__info_show' : ''}}" bindtap="widgetsToggle">
<text class="widgets__info-name">内容分区</text>
<image class="widgets__info-img" src="resources/kind/view.png" background-size="cover" />
</view>
<view class="widgets__list {{viewShow ? 'widgets__list_show' : ''}}">
<navigator url="component-pages/wx-view/wx-view" class="widget">
<text class="widget__name">view</text>
<image class="widget__arrow" src="resources/arrow.png" background-size="cover" />
<view class="widget__line"></view>
</navigator>
<navigator url="component-pages/wx-scroll-view/wx-scroll-view" class="widget">
<text class="widget__name">scroll-view</text>
<image class="widget__arrow" src="resources/arrow.png" background-size="cover" />
<view class="widget__line"></view>
</navigator>
<navigator url="component-pages/wx-swiper/wx-swiper" class="widget">
<text class="widget__name">swiper</text>
<image class="widget__arrow" src="resources/arrow.png" background-size="cover" />
</navigator>
</view>
</view>
<view class="widgets__item">
<view id="content" class="widgets__info {{contentShow ? 'widgets__info_show' : ''}}" bindtap="widgetsToggle">
<text class="widgets__info-name">内容</text>
<image class="widgets__info-img" src="resources/kind/content.png" background-size="cover" />
</view>
<view class="widgets__list {{contentShow ? 'widgets__list_show' : ''}}">
<navigator url="component-pages/wx-text/wx-text" class="widget">
<text class="widget__name">text</text>
<image class="widget__arrow" src="resources/arrow.png" background-size="cover" />
<view class="widget__line"></view>
</navigator>
<navigator url="component-pages/wx-icon/wx-icon" class="widget">
<text class="widget__name">icon</text>
<image class="widget__arrow" src="resources/arrow.png" background-size="cover" />
<view class="widget__line"></view>
</navigator>
<navigator url="component-pages/wx-mask/wx-mask" class="widget">
<text class="widget__name">mask</text>
<image class="widget__arrow" src="resources/arrow.png" background-size="cover" />
<view class="widget__line"></view>
</navigator>
<navigator url="component-pages/wx-toast/wx-toast" class="widget">
<text class="widget__name">toast</text>
<image class="widget__arrow" src="resources/arrow.png" background-size="cover" />
<view class="widget__line"></view>
</navigator>
<navigator url="component-pages/wx-progress/wx-progress" class="widget">
<text class="widget__name">progress</text>
<image class="widget__arrow" src="resources/arrow.png" background-size="cover" />
</navigator>
</view>
</view>
<view class="widgets__item">
<view id="form" class="widgets__info {{formShow ? 'widgets__info_show' : ''}}" bindtap="widgetsToggle">
<text class="widgets__info-name">表单组件</text>
<image class="widgets__info-img" src="resources/kind/form.png" background-size="cover" />
</view>
<view class="widgets__list {{formShow ? 'widgets__list_show' : ''}}">
<navigator url="component-pages/wx-button/wx-button" class="widget">
<text class="widget__name">button</text>
<image class="widget__arrow" src="resources/arrow.png" background-size="cover" />
<view class="widget__line"></view>
</navigator>
<navigator url="component-pages/wx-checkbox/wx-checkbox" class="widget">
<text class="widget__name">checkbox</text>
<image class="widget__arrow" src="resources/arrow.png" background-size="cover" />
<view class="widget__line"></view>
</navigator>
<navigator url="component-pages/wx-form/wx-form" class="widget">
<text class="widget__name">form</text>
<image class="widget__arrow" src="resources/arrow.png" background-size="cover" />
<view class="widget__line"></view>
</navigator>
<navigator url="component-pages/wx-input/wx-input" class="widget">
<text class="widget__name">input</text>
<image class="widget__arrow" src="resources/arrow.png" background-size="cover" />
<view class="widget__line"></view>
</navigator>
<navigator url="component-pages/wx-label/wx-label" class="widget">
<text class="widget__name">label</text>
<image class="widget__arrow" src="resources/arrow.png" background-size="cover" />
<view class="widget__line"></view>
</navigator>
<navigator url="component-pages/wx-picker/wx-picker" class="widget">
<text class="widget__name">picker</text>
<image class="widget__arrow" src="resources/arrow.png" background-size="cover" />
<view class="widget__line"></view>
</navigator>
<navigator url="component-pages/wx-radio/wx-radio" class="widget">
<text class="widget__name">radio</text>
<image class="widget__arrow" src="resources/arrow.png" background-size="cover" />
<view class="widget__line"></view>
</navigator>
<navigator url="component-pages/wx-slider/wx-slider" class="widget">
<text class="widget__name">slider</text>
<image class="widget__arrow" src="resources/arrow.png" background-size="cover" />
<view class="widget__line"></view>
</navigator>
<navigator url="component-pages/wx-switch/wx-switch" class="widget">
<text class="widget__name">switch</text>
<image class="widget__arrow" src="resources/arrow.png" background-size="cover" />
</navigator>
</view>
</view>
<view class="widgets__item">
<view id="interact" class="widgets__info {{interactShow ? 'widgets__info_show' : ''}}" bindtap="widgetsToggle">
<text class="widgets__info-name">交互组件</text>
<image class="widgets__info-img" src="resources/kind/interact.png" background-size="cover" />
</view>
<view class="widgets__list {{interactShow ? 'widgets__list_show' : ''}}">
<navigator url="component-pages/wx-action-sheet/wx-action-sheet" class="widget">
<text class="widget__name">action-sheet</text>
<image class="widget__arrow" src="resources/arrow.png" background-size="cover" />
<view class="widget__line"></view>
</navigator>
<navigator url="component-pages/wx-modal/wx-modal" class="widget">
<text class="widget__name">modal</text>
<image class="widget__arrow" src="resources/arrow.png" background-size="cover" />
</navigator>
</view>
</view>
<view class="widgets__item">
<view id="nav" class="widgets__info {{navShow ? 'widgets__info_show' : ''}}" bindtap="widgetsToggle">
<text class="widgets__info-name">导航</text>
<image class="widgets__info-img" src="resources/kind/nav.png" background-size="cover" />
</view>
<view class="widgets__list {{navShow ? 'widgets__list_show' : ''}}">
<navigator url="component-pages/wx-navigator/wx-navigator" class="widget">
<text class="widget__name">navigator</text>
<image class="widget__arrow" src="resources/arrow.png" background-size="cover" />
</navigator>
</view>
</view>
<view class="widgets__item">
<view id="media" class="widgets__info {{mediaShow ? 'widgets__info_show' : ''}}" bindtap="widgetsToggle">
<text class="widgets__info-name">媒体</text>
<image class="widgets__info-img" src="resources/kind/media.png" background-size="cover" />
</view>
<view class="widgets__list {{mediaShow ? 'widgets__list_show' : ''}}">
<view class="widgets__list-inner {{mediaShow ? 'widgets__list-inner_show' : ''}}">
<navigator url="component-pages/wx-image/wx-image" class="widget">
<text class="widget__name">image</text>
<image class="widget__arrow" src="resources/arrow.png" background-size="cover" />
<view class="widget__line"></view>
</navigator>
<navigator url="component-pages/wx-audio/wx-audio" class="widget">
<text class="widget__name">audio</text>
<image class="widget__arrow" src="resources/arrow.png" background-size="cover" />
<view class="widget__line"></view>
</navigator>
<navigator url="component-pages/wx-video/wx-video" class="widget">
<text class="widget__name">video</text>
<image class="widget__arrow" src="resources/arrow.png" background-size="cover" />
</navigator>
</view>
</view>
</view>
</view>
</view>
</view> -->
02-PG/小程序/weapp-demo/page/component/index.wxss 0 → 100644
View file @ 3eafbd03
.index{
background-color: #FBF9FE;
font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
flex: 1;
min-height: 100%;
font-size: 16px;
}
.head{
padding: 40px;
}
.body{
/*padding-left: 15px;
padding-right: 15px;*/
overflow: hidden;
}
.title{
font-size: 30px;
}
.desc{
margin-top: 5px;
color: #888888;
font-size: 14px;
}
.widgets__item{
margin-top: 10px;
margin-bottom: 10px;
background-color: #FFFFFF;
overflow: hidden;
border-radius: 2px;
cursor: pointer;
}
.widgets__info{
display: flex;
/*padding: 20px;*/
align-items: center;
flex-direction: row;
}
.widgets__info_show{
opacity: .4;
}
.widgets__info-name{
flex: 1;
}
.widgets__info-img{
width: 30px;
height: 30px;
}
.widgets__list{
display: none;
}
.widgets__list_show{
display: block;
}
/*
.widgets__list{
height: 0;
overflow: hidden;
}
.widgets__list_show{
height: auto;
}
.widgets__list-inner{
opacity: 0;
transform: translateY(-50%);
transition: .3s;
}
.widgets__list-inner_show{
opacity: 1;
transform: translateY(0);
}
*/
.widget{
position: relative;
padding-top: 13px;
padding-bottom: 13px;
padding-left: 20px;
padding-right: 20px;
}
.widget__arrow{
position: absolute;
top: 14px;
right: 22px;
width: 8px;
height: 16px;
}
.widget__line{
content: " ";
position: absolute;
left: 20px;
bottom: 0;
right: 20px;
height: 1rpx;
background-color: #DFDFDF;
}
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/navigation-pages/controller/controller.js 0 → 100644
View file @ 3eafbd03
var components = [
'action-sheet', 'button', 'searchbar', 'modal', 'navigator', 'drawer'
]
var pageData = {}
for(var i = 0; i < components.length; ++i) {
(function (index) {
pageData[components[index]] = function(e) {
var url = '../../component-pages/wx-' + components[index] + '/wx-' + components[index]
wx.navigateTo({url: url})
}
})(i);
}
Page(pageData)
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/navigation-pages/controller/controller.wxml 0 → 100644
View file @ 3eafbd03
<view class="div-view">
<button type="default" bindtap="action-sheet" class="index-button">action-sheet</button>
<button type="default" bindtap="button" class="index-button">button</button>
<button type="default" bindtap="modal" class="index-button">modal</button>
<button type="default" bindtap="navigator" class="index-button">navigator</button>
</view>
02-PG/小程序/weapp-demo/page/component/navigation-pages/form/form.js 0 → 100644
View file @ 3eafbd03
var components = [
'checkbox', 'radio', 'form','selector', 'switch', 'slider', 'input', 'label', 'picker'
]
var pageData = {}
for(var i = 0; i < components.length; ++i) {
(function (index) {
pageData[components[index]] = function(e) {
var url = '../../component-pages/wx-' + components[index] + '/wx-' + components[index]
wx.navigateTo({url: url})
}
})(i);
}
Page(pageData)
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/navigation-pages/form/form.wxml 0 → 100644
View file @ 3eafbd03
<view class="div-view">
<button type="default" bindtap="checkbox" class="index-button">checkbox</button>
<button type="default" bindtap="radio" class="index-button">radio</button>
<button type="default" bindtap="form" class="index-button">form</button>
<button type="default" bindtap="switch" class="index-button">switch</button>
<button type="default" bindtap="slider" class="index-button">slider</button>
<button type="default" bindtap="input" class="index-button">input</button>
<button type="default" bindtap="label" class="index-button">label</button>
<button type="default" bindtap="picker" class="index-button">picker</button>
</view>
02-PG/小程序/weapp-demo/page/component/navigation-pages/media/media.js 0 → 100644
View file @ 3eafbd03
var components = [
'image', 'audio', 'video'
]
var pageData = {}
for(var i = 0; i < components.length; ++i) {
(function (index) {
pageData[components[index]] = function(e) {
var url = '../../component-pages/wx-' + components[index] + '/wx-' + components[index]
wx.navigateTo({url: url})
}
})(i)
}
Page(pageData)
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/navigation-pages/media/media.wxml 0 → 100644
View file @ 3eafbd03
<view class="div-view">
<button type="default" bindtap="image" class="index-button">image</button>
<button type="default" bindtap="audio" class="index-button">audio</button>
<button type="default" bindtap="video" class="index-button">video</button>
</view>
\ No newline at end of file
02-PG/小程序/weapp-demo/page/component/navigation-pages/view/view.js 0 → 100644
View file @ 3eafbd03
var components = [
'progress', 'toast', 'scroll-view', 'text', 'view', 'mask', 'icon', 'spinner', 'swiper', 'slide-tab'
]
var pageData = {}
for(var i = 0; i < components.length; ++i) {
(function (index) {
pageData[components[index]] = function(e) {
var url = '../../component-pages/wx-' + components[index] + '/wx-' + components[index]
wx.navigateTo({url: url})
}
})(i)
}
Page(pageData)
02-PG/小程序/weapp-demo/page/component/navigation-pages/view/view.wxml 0 → 100644
View file @ 3eafbd03
<view class="div-view">
<button type="default" bindtap="text" class="index-button">text</button>
<button type="default" bindtap="view" class="index-button">view</button>
<button type="default" bindtap="icon" class="index-button">icon</button>
<button type="default" bindtap="toast" class="index-button">toast</button>
<button type="default" bindtap="progress" class="index-button">progress</button>
<button type="default" bindtap="scroll-view" class="index-button">scroll-view</button>
<button type="default" bindtap="swiper" class="index-button">swiper</button>
<button type="default" bindtap="slide-tab" class="index-button">swiper + scroll-view</button>
</view>
02-PG/小程序/weapp-demo/page/resume/resume.js 0 → 100644
View file @ 3eafbd03
// page/resume/resume.js
Page({
/**
* 页面的初始数据
*/
data: {
defaultSize: 'default',
primarySize: 'default',
warnSize: 'default',
disabled: false,
plain: false,
loading: false,
select: false,
modalHidden: true,
modalHidden2: true,
grade_name: '--请选择--',
grades: ['1年及以下', '3年及以下', '3到5年','5年以上']
},
/**
* 点击下拉框 */
bindShowMsg() {
this.setData({
select: !this.data.select
})
},
/**
* 已选下拉框 */
mySelect(e) {
console.log(e);
var name = e.currentTarget.dataset.name;
this.setData({
grade_name: name,
select: false
});
},
/**
* 继续按钮
*/
nextButton: function (e) {
this.setData({
modalHidden2: false
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
\ No newline at end of file
02-PG/小程序/weapp-demo/page/resume/resume.json 0 → 100644
View file @ 3eafbd03
{
"usingComponents": {}
}
\ No newline at end of file
02-PG/小程序/weapp-demo/page/resume/resume.wxml 0 → 100644
View file @ 3eafbd03
<!--page/resume/resume.wxml-->
<view class="index">
<view class="head">
<view class="title">基本信息</view>
<view class="desc">请填写您的个人基本信息，正确并完整的信息，更有助于别人理解你。</view>
</view>
<view class="body">
<view class="widgets">
<view class="widgets__item">
<view id="view" class="widgets__info">
<text class="widgets__info-name">姓 名</text>
<input class="input" name="userName" placeholder="请输入姓名" bindinput="userNameInput" />
</view>
</view>
<view class="widgets__item">
<view id="content" class="widgets__info" bindtap="widgetsToggle">
<text class="widget__name">性 别</text>
<radio-group bindchange="radiochange" style="padding-left: 30px;">
<radio value='footerball'> 男 </radio>
<radio value='basketball' checked> 女 </radio>
</radio-group>
</view>
</view>
<view class="widgets__item">
<view id="form" class="widgets__info" bindtap="widgetsToggle">
<text class="widgets__info-name">出生日期</text>
<picker mode="date" value="{{date}}" start="1920-01-01" end="2050-01-01" bindchange="bindDateChange">
<view class="picker">
请选择 {{date}}
</view>
</picker>
</view>
</view>
<view class="widgets__item">
<view id="interact" class="widgets__info {{interactShow ? 'widgets__info_show' : ''}}" bindtap="widgetsToggle">
<text class="widgets__info-name">工作年限</text>
<!-- 下拉框 -->
<view class='top-selected' bindtap='bindShowMsg'>
<text>{{grade_name}}</text>
<image src='/images/icon/down.png'></image>
</view>
<!-- 下拉需要显示的列表 -->
<view class="select_box" wx:if="{{select}}">
<view wx:for="{{grades}}" wx:key="unique">
<view class="select_one" bindtap="mySelect" data-name="{{item}}">{{item}}</view>
</view>
</view>
</view>
</view>
<view class="widgets__item">
<view id="nav" class="widgets__info" bindtap="widgetsToggle">
<text class="widgets__info-name">所在城市</text>
<input class="input" name="userName" placeholder="请输入城市名称" />
</view>
</view>
</view>
<view class="btn-area" id="buttonContainer">
<view class="button-wrapper">
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="nextButton"> 继 续
</button>
</view>
</view>
<modal class="modal" hidden="{{modalHidden2}}" no-cancel bindconfirm="modalChange2" bindcancel="modalChange2">
<view id="view" class="widgets__info">
<text class="widgets__info-name">手 机</text>
<input class="input" name="userName" placeholder="请输入手机号" bindinput="userNameInput" />
</view>
<view id="view" class="widgets__info">
<text class="widgets__info-name">验证 码</text>
<input class="input" name="userName" placeholder="请输入验证码" bindinput="userNameInput" />
</view>
</modal>
</view>
</view>
\ No newline at end of file
02-PG/小程序/weapp-demo/page/resume/resume.wxss 0 → 100644
View file @ 3eafbd03
/* page/resume/resume.wxss */
.index {
background-color: #fbf9fe;
font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
flex: 1;
min-height: 100%;
font-size: 16px;
}
.head {
/* padding: 40px;*/
}
.body {
padding-left: 15px;
padding-right: 15px;
overflow: hidden;
}
.title {
font-size: 30px;
}
.desc {
margin-top: 5px;
color: #888;
font-size: 14px;
}
.widgets__item {
margin-top: 10px;
margin-bottom: 10px;
background-color: #fff;
overflow: hidden;
border-radius: 2px;
cursor: pointer;
}
.widgets__info {
display: flex;
padding: 20px;
align-items: center;
flex-direction: row;
}
.widgets__info_show {
opacity: 0.4;
}
.widgets__info-name {
flex: 1;
}
.widgets__info-img {
width: 30px;
height: 30px;
}
.widgets__list {
display: none;
}
.widgets__list_show {
display: block;
}
/*
.widgets__list{
height: 0;
overflow: hidden;
}
.widgets__list_show{
height: auto;
}
.widgets__list-inner{
opacity: 0;
transform: translateY(-50%);
transition: .3s;
}
.widgets__list-inner_show{
opacity: 1;
transform: translateY(0);
}
*/
.widget {
position: relative;
padding-top: 13px;
padding-bottom: 13px;
padding-left: 20px;
padding-right: 20px;
}
.widget__arrow {
position: absolute;
top: 14px;
right: 22px;
width: 8px;
height: 16px;
}
.widget__line {
content: " ";
position: absolute;
left: 20px;
bottom: 0;
right: 20px;
height: 1rpx;
background-color: #dfdfdf;
}
/*------ 下拉框 ------------------------------start*/
/* 顶部 */
.top {
width: 100vw;
height: 80rpx;
padding: 0 20rpx;
line-height: 80rpx;
font-size: 34rpx;
border-bottom: 1px solid #000;
}
.top-text {
float: left;
}
/* 下拉框 */
.top-selected {
width: 50%;
display: flex;
float: right;
align-items: center;
justify-content: space-between;
border: 1px solid #ccc;
padding: 0 10rpx;
font-size: 30rpx;
}
/* 下拉内容 */
.select_box {
background-color: #fff;
padding: 0 20rpx;
width: 50%;
float: right;
position: relative;
right: 0;
z-index: 1;
overflow: hidden;
text-align: left;
animation: myfirst 0.5s;
font-size: 30rpx;
}
.select_one {
padding-left: 20rpx;
width: 100%;
height: 60rpx;
position: relative;
line-height: 60rpx;
border-bottom: 1px solid #ccc;
}
/* 下拉过度效果 */
@keyframes myfirst {
from {
height: 0rpx;
}
to {
height: 210rpx;
}
}
/* 下拉图标 */
.top-selected image {
height: 50rpx;
width: 50rpx;
position: absolute;
right: 0rpx;
top: 20rpx;
}
/*------ 下拉框 ------------------------------END */
\ No newline at end of file
02-PG/小程序/weapp-demo/project.config.json 0 → 100644
View file @ 3eafbd03
{
"description": "项目配置文件",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true,
"newFeature": true,
"autoAudits": false,
"coverView": true
},
"compileType": "miniprogram",
"libVersion": "2.9.0",
"appid": "wx1c331dae13c739cc",
"projectname": "miniprogram-1",
"debugOptions": {
"hidedInDevtools": []
},
"isGameTourist": false,
"simulatorType": "wechat",
"simulatorPluginLibVersion": {},
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": []
}
}
}
\ No newline at end of file
02-PG/小程序/weapp-demo/sitemap.json 0 → 100644
View file @ 3eafbd03
{
"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
"rules": [{
"action": "allow",
"page": "*"
}]
}
\ No newline at end of file
02-PG/小程序/weapp-demo/util/util.js 0 → 100644
View file @ 3eafbd03
function formatTime(time) {
if (typeof time !== 'number' || time < 0) {
return time
}
var hour = parseInt(time / 3600)
time = time % 3600
var minute = parseInt(time / 60)
time = time % 60
var second = time
return ([hour, minute, second]).map(function (n) {
n = n.toString()
return n[1] ? n : '0' + n
}).join(':')
}
module.exports = {
formatTime: formatTime
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment