├── .gitignore
├── page
├── API
│ ├── navigator
│ │ ├── navigator.wxss
│ │ ├── navigator.json
│ │ ├── navigator.js
│ │ └── navigator.wxml
│ ├── request
│ │ ├── request.wxss
│ │ ├── request.js
│ │ ├── request.json
│ │ └── request.wxml
│ ├── storage
│ │ ├── storage.wxss
│ │ ├── storage.json
│ │ ├── storage.wxml
│ │ └── storage.js
│ ├── upload-file
│ │ ├── upload-file.wxss
│ │ ├── upload-file.js
│ │ ├── upload-file.json
│ │ └── upload-file.wxml
│ ├── web-socket
│ │ ├── web-socket.wxss
│ │ ├── web-socket.js
│ │ ├── web-socket.json
│ │ └── web-socket.wxml
│ ├── download-file
│ │ ├── download-file.wxss
│ │ ├── download-file.js
│ │ ├── download-file.json
│ │ └── download-file.wxml
│ ├── open-location
│ │ ├── open-location.wxss
│ │ ├── open-location.json
│ │ ├── open-location.js
│ │ └── open-location.wxml
│ ├── get-system-info
│ │ ├── get-system-info.wxss
│ │ ├── get-system-info.json
│ │ ├── get-system-info.js
│ │ └── get-system-info.wxml
│ ├── request-payment
│ │ ├── request-payment.wxss
│ │ ├── request-payment.js
│ │ ├── request-payment.json
│ │ └── request-payment.wxml
│ ├── navigation-bar-loading
│ │ ├── navigation-bar-loading.wxss
│ │ ├── navigation-bar-loading.json
│ │ ├── navigation-bar-loading.js
│ │ └── navigation-bar-loading.wxml
│ ├── set-navigation-bar-title
│ │ ├── set-navigation-bar-title.wxss
│ │ ├── set-navigation-bar-title.json
│ │ ├── set-navigation-bar-title.js
│ │ └── set-navigation-bar-title.wxml
│ ├── file
│ │ ├── file.json
│ │ ├── file.wxss
│ │ ├── file.wxml
│ │ └── file.js
│ ├── image
│ │ ├── image.json
│ │ ├── image.wxss
│ │ ├── image.js
│ │ └── image.wxml
│ ├── login
│ │ ├── login.json
│ │ ├── login.js
│ │ ├── login.wxss
│ │ └── login.wxml
│ ├── voice
│ │ ├── voice.json
│ │ ├── voice.wxss
│ │ ├── voice.js
│ │ └── voice.wxml
│ ├── canvas
│ │ ├── canvas.json
│ │ ├── canvas.wxss
│ │ ├── canvas.wxml
│ │ └── canvas.js
│ ├── animation
│ │ ├── animation.json
│ │ ├── animation.wxss
│ │ ├── animation.wxml
│ │ └── animation.js
│ ├── get-location
│ │ ├── get-location.json
│ │ ├── get-location.wxss
│ │ ├── format-location.js
│ │ ├── get-location.js
│ │ └── get-location.wxml
│ ├── get-user-info
│ │ ├── get-user-info.json
│ │ ├── get-user-info.wxss
│ │ ├── get-user-info.js
│ │ └── get-user-info.wxml
│ ├── background-audio
│ │ ├── background-audio.json
│ │ ├── background-audio.wxss
│ │ ├── background-audio.wxml
│ │ └── background-audio.js
│ ├── get-network-type
│ │ ├── get-network-type.json
│ │ ├── get-network-type.wxss
│ │ ├── get-network-type.js
│ │ └── get-network-type.wxml
│ ├── on-compass-change
│ │ ├── on-compass-change.json
│ │ ├── on-compass-change.wxss
│ │ ├── on-compass-change.js
│ │ └── on-compass-change.wxml
│ ├── generate.sh
│ ├── on-accelerometer-change
│ │ ├── on-accelerometer-change.json
│ │ ├── on-accelerometer-change.wxss
│ │ ├── on-accelerometer-change.wxml
│ │ └── on-accelerometer-change.js
│ ├── common
│ │ ├── footer.wxml
│ │ └── header.wxml
│ ├── pull-down-refresh
│ │ ├── pull-down-refresh.json
│ │ ├── pull-down-refresh.wxss
│ │ ├── pull-down-refresh.js
│ │ └── pull-down-refresh.wxml
│ └── index
│ │ ├── index.wxml
│ │ ├── index.wxss
│ │ └── index.js
└── component
│ ├── component-pages
│ ├── wx-input
│ │ ├── wx-input.wxss
│ │ ├── wx-input.js
│ │ └── wx-input.wxml
│ ├── wx-button
│ │ ├── wx-button.wxss
│ │ ├── wx-button.js
│ │ └── wx-button.wxml
│ ├── wx-slide-tab
│ │ ├── wx-slide-tab.wxss
│ │ ├── wx-slide-tab.js
│ │ └── wx-slide-tab.wxml
│ ├── wx-view
│ │ ├── wx-view.js
│ │ ├── wx-view.wxss
│ │ └── wx-view.wxml
│ ├── wx-navigator
│ │ ├── wx-navigator.js
│ │ ├── wx-navigator.wxss
│ │ ├── navigate.js
│ │ ├── redirect.js
│ │ ├── navigate.wxml
│ │ ├── redirect.wxml
│ │ └── wx-navigator.wxml
│ ├── wx-progress
│ │ ├── wx-progress.js
│ │ ├── wx-progress.wxss
│ │ └── wx-progress.wxml
│ ├── wx-image
│ │ ├── wx-image.wxss
│ │ ├── wx-image.js
│ │ └── wx-image.wxml
│ ├── wx-icon
│ │ ├── wx-icon.wxss
│ │ ├── wx-icon.js
│ │ └── wx-icon.wxml
│ ├── wx-radio
│ │ ├── wx-radio.wxss
│ │ ├── wx-radio.js
│ │ └── wx-radio.wxml
│ ├── wx-swiper
│ │ ├── wx-swiper.wxss
│ │ ├── wx-swiper.js
│ │ └── wx-swiper.wxml
│ ├── wx-checkbox
│ │ ├── wx-checkbox.wxss
│ │ ├── wx-checkbox.js
│ │ └── wx-checkbox.wxml
│ ├── wx-picker
│ │ ├── wx-picker.wxss
│ │ ├── wx-picker.js
│ │ └── wx-picker.wxml
│ ├── wx-label
│ │ ├── wx-label.wxss
│ │ ├── wx-label.js
│ │ └── wx-label.wxml
│ ├── wx-action-sheet
│ │ ├── wx-action-sheet.wxss
│ │ ├── wx-action-sheet.js
│ │ └── wx-action-sheet.wxml
│ ├── wx-audio
│ │ ├── wx-audio.js
│ │ └── wx-audio.wxml
│ ├── wx-form
│ │ ├── wx-form.wxss
│ │ ├── wx-form.js
│ │ └── wx-form.wxml
│ ├── wx-scroll-view
│ │ ├── wx-scroll-view.wxss
│ │ ├── wx-scroll-view.js
│ │ └── wx-scroll-view.wxml
│ ├── wx-slider
│ │ ├── wx-slider.js
│ │ └── wx-slider.wxml
│ ├── wx-switch
│ │ ├── wx-switch.wxml
│ │ └── wx-switch.js
│ ├── wx-video
│ │ ├── wx-video.js
│ │ └── wx-video.wxml
│ ├── wx-mask
│ │ ├── wx-mask.js
│ │ └── wx-mask.wxml
│ ├── wx-text
│ │ ├── wx-text.wxml
│ │ └── wx-text.js
│ ├── wx-modal
│ │ ├── wx-modal.js
│ │ └── wx-modal.wxml
│ └── wx-toast
│ │ ├── wx-toast.js
│ │ └── wx-toast.wxml
│ ├── resources
│ ├── 1.jpg
│ ├── 2.jpg
│ ├── 3.jpg
│ ├── 4.jpg
│ ├── 5.jpg
│ ├── pic.jpg
│ ├── arrow.png
│ └── kind
│ │ ├── form.png
│ │ ├── map.png
│ │ ├── nav.png
│ │ ├── view.png
│ │ ├── canvas.png
│ │ ├── media.png
│ │ ├── content.png
│ │ └── interact.png
│ ├── navigation-pages
│ ├── media
│ │ ├── media.wxml
│ │ └── media.js
│ ├── controller
│ │ ├── controller.wxml
│ │ └── controller.js
│ ├── form
│ │ ├── form.js
│ │ └── form.wxml
│ └── view
│ │ ├── view.js
│ │ └── view.wxml
│ ├── index.js
│ ├── index.wxss
│ └── index.wxml
├── bak
└── home.zip
├── image
├── home.png
├── logo.png
├── pause.png
├── play.png
├── plus.png
├── stop.png
├── trash.png
├── profile.png
├── record.png
├── wechat.png
├── wechatHL.png
├── arrowright.png
├── home.active.png
├── logo.active.png
├── profile.active.png
└── icon64_appwx_logo.png
├── app.js
├── util
└── util.js
├── app.json
├── Readme.md
└── app.wxss
/.gitignore:
--------------------------------------------------------------------------------
1 | *swp
2 |
--------------------------------------------------------------------------------
/page/API/navigator/navigator.wxss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/page/API/request/request.wxss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/page/API/storage/storage.wxss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/page/API/upload-file/upload-file.wxss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/page/API/web-socket/web-socket.wxss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/page/API/download-file/download-file.wxss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/page/API/open-location/open-location.wxss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/page/API/request/request.js:
--------------------------------------------------------------------------------
1 | Page({})
2 |
--------------------------------------------------------------------------------
/page/API/get-system-info/get-system-info.wxss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/page/API/request-payment/request-payment.wxss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/page/API/upload-file/upload-file.js:
--------------------------------------------------------------------------------
1 | Page({})
2 |
--------------------------------------------------------------------------------
/page/API/web-socket/web-socket.js:
--------------------------------------------------------------------------------
1 | Page({})
2 |
--------------------------------------------------------------------------------
/page/API/download-file/download-file.js:
--------------------------------------------------------------------------------
1 | Page({})
2 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-input/wx-input.wxss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-button/wx-button.wxss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/page/API/navigation-bar-loading/navigation-bar-loading.wxss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/page/API/request-payment/request-payment.js:
--------------------------------------------------------------------------------
1 | Page({
2 | })
3 |
--------------------------------------------------------------------------------
/page/API/set-navigation-bar-title/set-navigation-bar-title.wxss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-slide-tab/wx-slide-tab.wxss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-view/wx-view.js:
--------------------------------------------------------------------------------
1 | Page({})
2 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-navigator/wx-navigator.js:
--------------------------------------------------------------------------------
1 | Page({})
--------------------------------------------------------------------------------
/page/component/component-pages/wx-progress/wx-progress.js:
--------------------------------------------------------------------------------
1 | Page({})
2 |
--------------------------------------------------------------------------------
/bak/home.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/bak/home.zip
--------------------------------------------------------------------------------
/page/API/file/file.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "文件"
3 | }
4 |
--------------------------------------------------------------------------------
/page/API/image/image.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "图片"
3 | }
4 |
--------------------------------------------------------------------------------
/page/API/login/login.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "微信登录"
3 | }
4 |
--------------------------------------------------------------------------------
/page/API/voice/voice.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "录音"
3 | }
4 |
--------------------------------------------------------------------------------
/image/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/image/home.png
--------------------------------------------------------------------------------
/image/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/image/logo.png
--------------------------------------------------------------------------------
/image/pause.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/image/pause.png
--------------------------------------------------------------------------------
/image/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/image/play.png
--------------------------------------------------------------------------------
/image/plus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/image/plus.png
--------------------------------------------------------------------------------
/image/stop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/image/stop.png
--------------------------------------------------------------------------------
/image/trash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/image/trash.png
--------------------------------------------------------------------------------
/page/API/canvas/canvas.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "创建画布"
3 | }
4 |
--------------------------------------------------------------------------------
/page/API/request/request.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "网络请求"
3 | }
4 |
--------------------------------------------------------------------------------
/page/API/storage/storage.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "数据存储"
3 | }
4 |
--------------------------------------------------------------------------------
/image/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/image/profile.png
--------------------------------------------------------------------------------
/image/record.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/image/record.png
--------------------------------------------------------------------------------
/image/wechat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/image/wechat.png
--------------------------------------------------------------------------------
/image/wechatHL.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/image/wechatHL.png
--------------------------------------------------------------------------------
/page/API/animation/animation.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "动画"
3 | }
4 |
--------------------------------------------------------------------------------
/page/API/navigator/navigator.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "页面跳转"
3 | }
4 |
--------------------------------------------------------------------------------
/image/arrowright.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/image/arrowright.png
--------------------------------------------------------------------------------
/page/API/get-location/get-location.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "获取位置"
3 | }
4 |
--------------------------------------------------------------------------------
/page/API/upload-file/upload-file.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "上传文件"
3 | }
4 |
--------------------------------------------------------------------------------
/image/home.active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/image/home.active.png
--------------------------------------------------------------------------------
/image/logo.active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/image/logo.active.png
--------------------------------------------------------------------------------
/page/API/download-file/download-file.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "下载文件"
3 | }
4 |
--------------------------------------------------------------------------------
/page/API/get-user-info/get-user-info.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "获取用户信息"
3 | }
4 |
--------------------------------------------------------------------------------
/page/API/open-location/open-location.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "查看位置"
3 | }
4 |
--------------------------------------------------------------------------------
/page/API/request-payment/request-payment.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "发起支付"
3 | }
4 |
--------------------------------------------------------------------------------
/page/API/web-socket/web-socket.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "Web Socket"
3 | }
4 |
--------------------------------------------------------------------------------
/image/profile.active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/image/profile.active.png
--------------------------------------------------------------------------------
/page/API/background-audio/background-audio.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "背景音乐"
3 | }
4 |
--------------------------------------------------------------------------------
/page/API/get-system-info/get-system-info.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "获取手机系统信息"
3 | }
4 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-image/wx-image.wxss:
--------------------------------------------------------------------------------
1 | .section__ctn{
2 | text-align: center;
3 | }
--------------------------------------------------------------------------------
/page/component/component-pages/wx-progress/wx-progress.wxss:
--------------------------------------------------------------------------------
1 | progress{
2 | margin-bottom: 30px;
3 | }
--------------------------------------------------------------------------------
/image/icon64_appwx_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/image/icon64_appwx_logo.png
--------------------------------------------------------------------------------
/page/API/get-network-type/get-network-type.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "获取手机网络状态"
3 | }
4 |
--------------------------------------------------------------------------------
/page/API/on-compass-change/on-compass-change.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "监听罗盘数据"
3 | }
4 |
--------------------------------------------------------------------------------
/page/API/get-network-type/get-network-type.wxss:
--------------------------------------------------------------------------------
1 | .page-body-text-network-type {
2 | font-size: 80rpx;
3 | }
4 |
--------------------------------------------------------------------------------
/page/component/resources/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/page/component/resources/1.jpg
--------------------------------------------------------------------------------
/page/component/resources/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/page/component/resources/2.jpg
--------------------------------------------------------------------------------
/page/component/resources/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/page/component/resources/3.jpg
--------------------------------------------------------------------------------
/page/component/resources/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/page/component/resources/4.jpg
--------------------------------------------------------------------------------
/page/component/resources/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/page/component/resources/5.jpg
--------------------------------------------------------------------------------
/page/API/canvas/canvas.wxss:
--------------------------------------------------------------------------------
1 | .canvas {
2 | width: 305px;
3 | height: 305px;
4 | background-color: #fff;
5 | }
6 |
--------------------------------------------------------------------------------
/page/API/generate.sh:
--------------------------------------------------------------------------------
1 | mkdir $1
2 | touch $1/$1.js
3 | touch $1/$1.wxss
4 | touch $1/$1.wxml
5 | touch $1/$1.json
6 |
--------------------------------------------------------------------------------
/page/API/navigation-bar-loading/navigation-bar-loading.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "标题栏加载动画"
3 | }
4 |
--------------------------------------------------------------------------------
/page/API/on-accelerometer-change/on-accelerometer-change.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "监听重力感应数据"
3 | }
4 |
--------------------------------------------------------------------------------
/page/API/set-navigation-bar-title/set-navigation-bar-title.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "设置页面标题"
3 | }
4 |
--------------------------------------------------------------------------------
/page/component/resources/pic.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/page/component/resources/pic.jpg
--------------------------------------------------------------------------------
/page/component/component-pages/wx-icon/wx-icon.wxss:
--------------------------------------------------------------------------------
1 | .group{
2 | flex-direction: row;
3 | align-items: center;
4 | }
--------------------------------------------------------------------------------
/page/component/component-pages/wx-radio/wx-radio.wxss:
--------------------------------------------------------------------------------
1 | .radio {
2 | display: block;
3 | margin-bottom: 10px;
4 | }
--------------------------------------------------------------------------------
/page/component/component-pages/wx-swiper/wx-swiper.wxss:
--------------------------------------------------------------------------------
1 | .swiper-item{
2 | display: block;
3 | height: 150px;
4 | }
--------------------------------------------------------------------------------
/page/component/resources/arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/page/component/resources/arrow.png
--------------------------------------------------------------------------------
/page/component/component-pages/wx-checkbox/wx-checkbox.wxss:
--------------------------------------------------------------------------------
1 | .checkbox{
2 | display: block;
3 | margin-bottom: 10px;
4 | }
--------------------------------------------------------------------------------
/page/component/component-pages/wx-picker/wx-picker.wxss:
--------------------------------------------------------------------------------
1 | .picker{
2 | padding: 13px;
3 | background-color: #FFFFFF;
4 | }
--------------------------------------------------------------------------------
/page/component/resources/kind/form.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/page/component/resources/kind/form.png
--------------------------------------------------------------------------------
/page/component/resources/kind/map.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/page/component/resources/kind/map.png
--------------------------------------------------------------------------------
/page/component/resources/kind/nav.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/page/component/resources/kind/nav.png
--------------------------------------------------------------------------------
/page/component/resources/kind/view.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/page/component/resources/kind/view.png
--------------------------------------------------------------------------------
/page/component/resources/kind/canvas.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/page/component/resources/kind/canvas.png
--------------------------------------------------------------------------------
/page/component/resources/kind/media.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/page/component/resources/kind/media.png
--------------------------------------------------------------------------------
/page/API/common/footer.wxml:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
--------------------------------------------------------------------------------
/page/component/resources/kind/content.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/page/component/resources/kind/content.png
--------------------------------------------------------------------------------
/page/component/resources/kind/interact.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/etoah/wechat-app/HEAD/page/component/resources/kind/interact.png
--------------------------------------------------------------------------------
/page/API/pull-down-refresh/pull-down-refresh.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "下拉刷新",
3 | "enablePullDownRefresh": true
4 | }
5 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-image/wx-image.js:
--------------------------------------------------------------------------------
1 | Page({
2 | imageError: function(e) {
3 | console.log('image3发生error事件,携带值为', e.detail.errMsg)
4 | }
5 | })
--------------------------------------------------------------------------------
/page/API/common/header.wxml:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
--------------------------------------------------------------------------------
/page/API/file/file.wxss:
--------------------------------------------------------------------------------
1 | .image {
2 | width: 300rpx;
3 | height: 300rpx;
4 | }
5 | .image-plus {
6 | width: 150rpx;
7 | height: 150rpx;
8 | border: 1px solid #bbb;
9 | }
10 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-label/wx-label.wxss:
--------------------------------------------------------------------------------
1 | .label-1, .label-2{
2 | margin-bottom: 15px;
3 | }
4 |
5 | .label-4_text{
6 | text-align: center;
7 | margin-top: 15px;
8 | }
--------------------------------------------------------------------------------
/page/component/component-pages/wx-navigator/wx-navigator.wxss:
--------------------------------------------------------------------------------
1 | .navigator-hover button{
2 | background-color:blue;
3 | }
4 | .other-navigator-hover button{
5 | background-color:red;
6 | }
--------------------------------------------------------------------------------
/page/component/component-pages/wx-navigator/navigate.js:
--------------------------------------------------------------------------------
1 | Page({
2 | onLoad: function(options) {
3 | console.log(options)
4 | this.setData({
5 | title: options.title
6 | })
7 | }
8 | })
9 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-navigator/redirect.js:
--------------------------------------------------------------------------------
1 | Page({
2 | onLoad: function(options) {
3 | console.log(options)
4 | this.setData({
5 | title: options.title
6 | })
7 | }
8 | })
9 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-action-sheet/wx-action-sheet.wxss:
--------------------------------------------------------------------------------
1 | /*
2 | .cancel {
3 | color: white;
4 | background: #303F9F;
5 | }
6 | .item {
7 | color: black;
8 | background: #C5CAE9;
9 | }*/
10 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-view/wx-view.wxss:
--------------------------------------------------------------------------------
1 | .flex-wrp{
2 | height: 100px;
3 | display:flex;
4 | background-color: #FFFFFF;
5 | }
6 | .flex-item{
7 | width: 100px;
8 | height: 100px;
9 | }
--------------------------------------------------------------------------------
/page/API/get-user-info/get-user-info.wxss:
--------------------------------------------------------------------------------
1 | .userinfo-avatar {
2 | border-radius: 128rpx;
3 | width: 128rpx;
4 | height: 128rpx;
5 | }
6 | .userinfo-nickname {
7 | margin-top: 20rpx;
8 | font-size: 38rpx;
9 | }
10 |
--------------------------------------------------------------------------------
/page/API/on-compass-change/on-compass-change.wxss:
--------------------------------------------------------------------------------
1 | .direction {
2 | margin-top: 100rpx;
3 | display: flex;
4 | }
5 | .direction-value {
6 | font-size: 200rpx;
7 | }
8 | .direction-degree {
9 | font-size: 40rpx;
10 | }
11 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-audio/wx-audio.js:
--------------------------------------------------------------------------------
1 | Page({
2 | data: {
3 | audioAction: {
4 | method: 'pause'
5 | }
6 | },
7 | audioPlayed: function(e) {
8 | console.log('audio is played')
9 | }
10 | })
--------------------------------------------------------------------------------
/page/component/component-pages/wx-navigator/navigate.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{title}}
4 | 这是新建的页面,点击左上角返回回到之前页面
5 |
6 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-navigator/redirect.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{title}}
4 | 这是当前页,点击左上角返回回到上级菜单
5 |
6 |
--------------------------------------------------------------------------------
/page/API/navigation-bar-loading/navigation-bar-loading.js:
--------------------------------------------------------------------------------
1 | Page({
2 | showNavigationBarLoading: function () {
3 | wx.showNavigationBarLoading()
4 | },
5 | hideNavigationBarLoading: function () {
6 | wx.hideNavigationBarLoading()
7 | }
8 | })
9 |
--------------------------------------------------------------------------------
/page/API/set-navigation-bar-title/set-navigation-bar-title.js:
--------------------------------------------------------------------------------
1 | Page({
2 | setNaivgationBarTitle: function (e) {
3 | var title = e.detail.value.title
4 | console.log(title)
5 | wx.setNavigationBarTitle({
6 | title: title
7 | })
8 | }
9 | })
10 |
--------------------------------------------------------------------------------
/page/API/pull-down-refresh/pull-down-refresh.wxss:
--------------------------------------------------------------------------------
1 | .page-body-info {
2 | background-color: transparent;
3 | }
4 | .page-body-buttons button {
5 | color: #21c932;
6 | margin: 0 100rpx;
7 | }
8 | .page-body-buttons button:after {
9 | border-color: #21c932;
10 | }
11 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-form/wx-form.wxss:
--------------------------------------------------------------------------------
1 | wx-button {
2 | margin-top: 10px;
3 | margin-bottom: 10px;
4 | }
5 | wx-label {
6 | display: block;
7 | margin-top: 5px;
8 | }
9 | .picker-text {
10 | margin-left: 10px;
11 | position: relative;
12 | }
13 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-scroll-view/wx-scroll-view.wxss:
--------------------------------------------------------------------------------
1 | .scroll-view_H{
2 | white-space: nowrap;
3 | }
4 | .scroll-view-item{
5 | height: 200px;
6 | }
7 | .scroll-view-item_H{
8 | display: inline-block;
9 | width: 100%;
10 | height: 200px;
11 | }
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | App({
2 | onLaunch: function () {
3 | console.log('App Launch')
4 | },
5 | onShow: function () {
6 | console.log('App Show')
7 | },
8 | onHide: function () {
9 | console.log('App Hide')
10 | },
11 | globalData: {
12 | hasLogin: false
13 | }
14 | })
15 |
--------------------------------------------------------------------------------
/page/API/get-location/get-location.wxss:
--------------------------------------------------------------------------------
1 | .page-body-text-small {
2 | font-size: 24rpx;
3 | color: #000;
4 | margin-bottom: 100rpx;
5 | }
6 | .page-body-text-location {
7 | display: flex;
8 | font-size: 50rpx;
9 | }
10 | .page-body-text-location text {
11 | margin: 10rpx;
12 | }
13 |
--------------------------------------------------------------------------------
/page/API/navigator/navigator.js:
--------------------------------------------------------------------------------
1 | Page({
2 | navigateTo: function () {
3 | wx.navigateTo({ url: './navigator' })
4 | },
5 | navigateBack: function () {
6 | wx.navigateBack()
7 | },
8 | redirectTo: function () {
9 | wx.redirectTo({ url: './navigator' })
10 | }
11 | })
12 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-slider/wx-slider.js:
--------------------------------------------------------------------------------
1 | var pageData = {}
2 | for(var i = 1; i < 5; ++i) {
3 | (function (index) {
4 | pageData[`slider${index}change`] = function(e) {
5 | console.log(`slider${index}发生change事件,携带值为`, e.detail.value)
6 | }
7 | })(i);
8 | }
9 | Page(pageData)
--------------------------------------------------------------------------------
/page/API/on-compass-change/on-compass-change.js:
--------------------------------------------------------------------------------
1 | Page({
2 | data: {
3 | direction: 0
4 | },
5 | onReady: function () {
6 | var that = this
7 | wx.onCompassChange(function (res) {
8 | that.setData({
9 | direction: parseInt(res.direction)
10 | })
11 | })
12 | }
13 | })
14 |
--------------------------------------------------------------------------------
/page/component/navigation-pages/media/media.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/page/API/get-location/format-location.js:
--------------------------------------------------------------------------------
1 | function formatLocation(longitude, latitude) {
2 | longitude = longitude.toFixed(2)
3 | latitude = latitude.toFixed(2)
4 |
5 | return {
6 | longitude: longitude.toString().split('.'),
7 | latitude: latitude.toString().split('.')
8 | }
9 | }
10 |
11 | module.exports = formatLocation
12 |
--------------------------------------------------------------------------------
/page/API/pull-down-refresh/pull-down-refresh.js:
--------------------------------------------------------------------------------
1 | Page({
2 | onPullDownRefresh: function () {
3 | console.log('onPullDownRefresh', new Date())
4 | },
5 | stopPullDownRefresh: function () {
6 | wx.stopPullDownRefresh({
7 | complete: function (res) {
8 | console.log(res, new Date())
9 | }
10 | })
11 | }
12 | })
13 |
--------------------------------------------------------------------------------
/page/API/get-system-info/get-system-info.js:
--------------------------------------------------------------------------------
1 | Page({
2 | data: {
3 | systemInfo: {}
4 | },
5 | getSystemInfo: function () {
6 | var that = this
7 | wx.getSystemInfo({
8 | success: function (res) {
9 | that.setData({
10 | systemInfo: res
11 | })
12 | that.update()
13 | }
14 | })
15 | }
16 | })
17 |
--------------------------------------------------------------------------------
/page/API/open-location/open-location.js:
--------------------------------------------------------------------------------
1 | Page({
2 | openLocation: function (e) {
3 | console.log(e)
4 | var value = e.detail.value
5 | console.log(value)
6 | wx.openLocation({
7 | longitude: Number(value.longitude),
8 | latitude: Number(value.latitude),
9 | name: value.name,
10 | address: value.address
11 | })
12 | }
13 | })
14 |
--------------------------------------------------------------------------------
/page/component/navigation-pages/media/media.js:
--------------------------------------------------------------------------------
1 | var components = [
2 | 'image', 'audio', 'video'
3 | ]
4 | var pageData = {}
5 | for(var i = 0; i < components.length; ++i) {
6 | (function (index) {
7 | pageData[components[index]] = function(e) {
8 | var url = '../../component-pages/wx-' + components[index] + '/wx-' + components[index]
9 | wx.navigateTo({url: url})
10 | }
11 | })(i)
12 | }
13 | Page(pageData)
--------------------------------------------------------------------------------
/page/API/canvas/canvas.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/page/API/image/image.wxss:
--------------------------------------------------------------------------------
1 | .images-wrapper {
2 | padding: 20rpx;
3 | background-color: #fff;
4 | margin-top: 20rpx;
5 | }
6 | .images-wrapper-text {
7 | font-size: 28rpx;
8 | }
9 | .images-list {
10 | display: flex;
11 | margin-top: 20rpx;
12 | flex-wrap: wrap;
13 | }
14 | .images-image {
15 | width: 150rpx;
16 | height: 150rpx;
17 | margin: 10rpx;
18 | }
19 | .images-image-plus {
20 | border: 1px solid #999;
21 | }
22 |
--------------------------------------------------------------------------------
/page/component/navigation-pages/controller/controller.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-radio/wx-radio.js:
--------------------------------------------------------------------------------
1 | Page({
2 | data: {
3 | items: [
4 | {name: 'USA', value: '美国'},
5 | {name: 'CHN', value: '中国', checked: 'true'},
6 | {name: 'BRA', value: '巴西'},
7 | {name: 'JPN', value: '日本'},
8 | {name: 'ENG', value: '英国'},
9 | {name: 'FRA', value: '法国'},
10 | ]
11 | },
12 | radioChange: function(e) {
13 | console.log('radio发生change事件,携带value值为:', e.detail.value)
14 | }
15 | })
16 |
--------------------------------------------------------------------------------
/page/API/request/request.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | 搭建好自己的后台服务器后,可以跟服务器互通数据,为用户提供个性化服务。
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/page/component/index.js:
--------------------------------------------------------------------------------
1 | var pageData = {},
2 | type = [
3 | 'view', 'content', 'form', 'interact', 'nav', 'media', 'map', 'canvas'
4 | ];
5 |
6 | pageData.widgetsToggle = function (e) {
7 | var id = e.currentTarget.id, data = {};
8 | for (var i = 0, len = type.length; i < len; ++i) {
9 | data[type[i] + 'Show'] = false;
10 | }
11 | data[id + 'Show'] = !this.data[id + 'Show'];
12 | this.setData(data);
13 | };
14 |
15 | Page(pageData);
--------------------------------------------------------------------------------
/page/API/login/login.js:
--------------------------------------------------------------------------------
1 | var app = getApp()
2 | Page({
3 | onLoad: function () {
4 | this.setData({
5 | hasLogin: app.globalData.hasLogin
6 | })
7 | },
8 | data: {},
9 | login: function () {
10 | var that = this
11 | wx.login({
12 | success: function (res) {
13 | app.globalData.hasLogin = true
14 | that.setData({
15 | hasLogin: true
16 | })
17 | that.update()
18 | }
19 | })
20 | }
21 | })
22 |
--------------------------------------------------------------------------------
/page/API/upload-file/upload-file.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | 搭建好自己的后台服务器后,可以将手机上的图片视频等资源上传到服务器上。
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/page/API/web-socket/web-socket.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | 搭建好自己的后台服务器后,可以跟服务器建立持久连接,实现即时聊天等功能。
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/page/API/download-file/download-file.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | 搭建好自己的后台服务器后,可以将服务器上的图片视频等资源下载到手机上。
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-checkbox/wx-checkbox.js:
--------------------------------------------------------------------------------
1 | Page({
2 | data: {
3 | items: [
4 | {name: 'USA', value: '美国'},
5 | {name: 'CHN', value: '中国', checked: 'true'},
6 | {name: 'BRA', value: '巴西'},
7 | {name: 'JPN', value: '日本'},
8 | {name: 'ENG', value: '英国'},
9 | {name: 'FRA', value: '法国'},
10 | ]
11 | },
12 | checkboxChange: function(e) {
13 | console.log('checkbox发生change事件,携带value值为:', e.detail.value)
14 | }
15 | })
16 |
--------------------------------------------------------------------------------
/page/component/navigation-pages/controller/controller.js:
--------------------------------------------------------------------------------
1 | var components = [
2 | 'action-sheet', 'button', 'searchbar', 'modal', 'navigator', 'drawer'
3 | ]
4 | var pageData = {}
5 | for(var i = 0; i < components.length; ++i) {
6 | (function (index) {
7 | pageData[components[index]] = function(e) {
8 | var url = '../../component-pages/wx-' + components[index] + '/wx-' + components[index]
9 | wx.navigateTo({url: url})
10 | }
11 | })(i);
12 | }
13 | Page(pageData)
--------------------------------------------------------------------------------
/page/API/request-payment/request-payment.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | 自主接入微信支付后,可以让用户在页面上快捷完成下单购买。
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/page/component/navigation-pages/form/form.js:
--------------------------------------------------------------------------------
1 | var components = [
2 | 'checkbox', 'radio', 'form','selector', 'switch', 'slider', 'input', 'label', 'picker'
3 | ]
4 | var pageData = {}
5 | for(var i = 0; i < components.length; ++i) {
6 | (function (index) {
7 | pageData[components[index]] = function(e) {
8 | var url = '../../component-pages/wx-' + components[index] + '/wx-' + components[index]
9 | wx.navigateTo({url: url})
10 | }
11 | })(i);
12 | }
13 | Page(pageData)
--------------------------------------------------------------------------------
/util/util.js:
--------------------------------------------------------------------------------
1 | function formatTime(time) {
2 | if (typeof time !== 'number' || time < 0) {
3 | return time
4 | }
5 |
6 | var hour = parseInt(time / 3600)
7 | time = time % 3600
8 | var minute = parseInt(time / 60)
9 | time = time % 60
10 | var second = time
11 |
12 | return ([hour, minute, second]).map(function (n) {
13 | n = n.toString()
14 | return n[1] ? n : '0' + n
15 | }).join(':')
16 | }
17 |
18 | module.exports = {
19 | formatTime: formatTime
20 | }
21 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-icon/wx-icon.js:
--------------------------------------------------------------------------------
1 | Page({
2 | data: {
3 | iconSize: [20, 30, 40, 50, 60, 70],
4 | iconColor: [
5 | 'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
6 | ],
7 | iconType: [
8 | 'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',
9 | 'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',
10 | 'info_circle', 'cancel', 'search', 'clear'
11 | ]
12 | }
13 | })
14 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-switch/wx-switch.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | switch
4 | 开关
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-audio/wx-audio.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | audio
4 | 音频
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/page/component/navigation-pages/view/view.js:
--------------------------------------------------------------------------------
1 | var components = [
2 | 'progress', 'toast', 'scroll-view', 'text', 'view', 'mask', 'icon', 'spinner', 'swiper', 'slide-tab'
3 | ]
4 | var pageData = {}
5 | for(var i = 0; i < components.length; ++i) {
6 | (function (index) {
7 | pageData[components[index]] = function(e) {
8 | var url = '../../component-pages/wx-' + components[index] + '/wx-' + components[index]
9 | wx.navigateTo({url: url})
10 | }
11 | })(i)
12 | }
13 | Page(pageData)
14 |
--------------------------------------------------------------------------------
/page/API/on-accelerometer-change/on-accelerometer-change.wxss:
--------------------------------------------------------------------------------
1 | .page-body-xyz {
2 | display: flex;
3 | justify-content: space-around;
4 | width: 700rpx;
5 | margin-top: 50rpx;
6 | box-sizing: border-box;
7 | }
8 | .page-body-canvas {
9 | width: 302px;
10 | height: 302px;
11 | position: relative;
12 | }
13 | .page-body-ball {
14 | position: absolute;
15 | top: 0;
16 | left: 0;
17 | width: 302px;
18 | height: 302px;
19 | }
20 | .page-body-title {
21 | font-size: 50rpx;
22 | width: 250rpx;
23 | }
24 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-video/wx-video.js:
--------------------------------------------------------------------------------
1 | Page({
2 | data:{
3 | src:""
4 | },
5 | bindButtonTap:function(){
6 | var that = this;
7 | wx.chooseVideo({
8 | sourceType:['album','camera'],
9 | maxDuration:60,
10 | camera:['front','back'],
11 | success:function(res){
12 | that.setData({
13 | src:res.tempFilePath
14 | })
15 | }
16 | })
17 | },
18 | videoErrorCallback: function (e) {
19 | console.log('视频错误信息:');
20 | console.log(e.detail.errMsg);
21 | }
22 | })
--------------------------------------------------------------------------------
/page/component/component-pages/wx-slide-tab/wx-slide-tab.js:
--------------------------------------------------------------------------------
1 | Page({
2 | data: {
3 | texts: [
4 | '这是第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嘻嘻,到底了',
5 | '这是第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嘻嘻,到底了',
6 | '这是第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嘻嘻,到底了'
7 | ]
8 | },
9 | tabchange: function(e){
10 | console.log('现在跳转到了第 ' + e.detail.current + ' 个tab')
11 | }
12 | })
13 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-mask/wx-mask.js:
--------------------------------------------------------------------------------
1 | var pageData = {}
2 | var maskNum = 4
3 | pageData.data = {}
4 | for(var i = 1; i <= maskNum; ++i) {
5 | pageData.data[`hidden${i}`] = true;
6 |
7 | (function(index) {
8 | pageData[`tap${index}`] = function(e) {
9 | var obj = {}
10 | obj[`hidden${index}`] = false
11 | this.setData(obj)
12 | }
13 | pageData[`mask${index}`] = function(e) {
14 | var obj = {}
15 | obj[`hidden${index}`] = true
16 | this.setData(obj)
17 | }
18 | })(i);
19 | }
20 | Page(pageData)
21 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-progress/wx-progress.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | progress
4 | 进度条
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-text/wx-text.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | text
4 | 文字标签
5 |
6 |
7 |
8 | {{text}}
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-modal/wx-modal.js:
--------------------------------------------------------------------------------
1 | Page({
2 | data: {
3 | modalHidden: true,
4 | modalHidden2: true
5 | },
6 | modalTap: function(e) {
7 | this.setData({
8 | modalHidden: false
9 | })
10 | },
11 | modalChange: function(e) {
12 | this.setData({
13 | modalHidden: true
14 | })
15 | },
16 | modalTap2: function(e) {
17 | this.setData({
18 | modalHidden2: false
19 | })
20 | },
21 | modalChange2: function(e) {
22 | this.setData({
23 | modalHidden2: true
24 | })
25 | },
26 | })
27 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-picker/wx-picker.js:
--------------------------------------------------------------------------------
1 | Page({
2 | data: {
3 | array:["中国","美国","巴西","日本"],
4 | index:0,
5 | date:"2016-09-01",
6 | time:"12:01"
7 | },
8 | bindPickerChange: function(e) {
9 | console.log('picker发送选择改变,携带值为', e.detail.value)
10 | this.setData({
11 | index: e.detail.value
12 | })
13 | },
14 | bindDateChange:function(e){
15 | this.setData({
16 | date:e.detail.value
17 | })
18 | },
19 | bindTimeChange:function(e){
20 | this.setData({
21 | time:e.detail.time
22 | })
23 | }
24 | })
--------------------------------------------------------------------------------
/page/component/component-pages/wx-text/wx-text.js:
--------------------------------------------------------------------------------
1 | var initData = 'this is first line\nthis is second line'
2 | Page({
3 | data: {
4 | text: initData
5 | },
6 | extraLine: [],
7 | add: function(e) {
8 | this.extraLine.push('other line')
9 | this.setData({
10 | text: initData + '\n' + this.extraLine.join('\n')
11 | })
12 | },
13 | remove: function(e) {
14 | if (this.extraLine.length > 0) {
15 | this.extraLine.pop()
16 | this.setData({
17 | text: initData + '\n' + this.extraLine.join('\n')
18 | })
19 | }
20 | }
21 | })
22 |
--------------------------------------------------------------------------------
/page/API/get-location/get-location.js:
--------------------------------------------------------------------------------
1 | var formatLocation = require('./format-location.js')
2 |
3 | Page({
4 | data: {
5 | hasLocation: false,
6 | },
7 | getLocation: function () {
8 | var that = this
9 | wx.getLocation({
10 | success: function (res) {
11 | console.log(res)
12 | that.setData({
13 | hasLocation: true,
14 | location: formatLocation(res.longitude, res.latitude)
15 | })
16 | }
17 | })
18 | },
19 | clear: function () {
20 | this.setData({
21 | hasLocation: false
22 | })
23 | }
24 | })
25 |
--------------------------------------------------------------------------------
/page/API/get-network-type/get-network-type.js:
--------------------------------------------------------------------------------
1 | Page({
2 | data: {
3 | hasNetworkType: false
4 | },
5 | getNetworkType: function () {
6 | var that = this
7 | wx.getNetworkType({
8 | success: function (res) {
9 | console.log(res)
10 | that.setData({
11 | hasNetworkType: true,
12 | networkType: res.subtype || res.networkType
13 | })
14 | that.update()
15 | }
16 | })
17 | },
18 | clear: function () {
19 | this.setData({
20 | hasNetworkType: false,
21 | networkType: ''
22 | })
23 | }
24 | })
25 |
--------------------------------------------------------------------------------
/page/API/login/login.wxss:
--------------------------------------------------------------------------------
1 | .page-body-wrapper {
2 | margin-top: 200rpx;
3 | display: flex;
4 | flex-direction: column;
5 | align-items: center;
6 | justify-content: center;
7 | width: 100%;
8 | padding: 0 50rpx;
9 | box-sizing: border-box;
10 | }
11 | .page-body-title {
12 | font-size: 60rpx;
13 | /*TODO 使用 rpx */
14 | line-height: 100px;
15 | }
16 | .page-body-text {
17 | color: #bbb;
18 | font-size: 28rpx;
19 | /*TODO 使用 rpx */
20 | line-height: 20px;
21 | margin: 0 0 100rpx 0;
22 | text-align: center;
23 | }
24 | .page-body-button {
25 | width: 100%;
26 | }
27 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-toast/wx-toast.js:
--------------------------------------------------------------------------------
1 | var toastNum = 3
2 | var pageData = {}
3 | pageData.data = {}
4 | for(var i = 0; i <= toastNum; ++i) {
5 | pageData.data['toast'+i+'Hidden'] = true;
6 | (function (index) {
7 | pageData['toast'+index+'Change'] = function(e) {
8 | var obj = {}
9 | obj['toast'+index+'Hidden'] = true;
10 | this.setData(obj)
11 | }
12 | pageData['toast'+index+'Tap'] = function(e) {
13 | var obj = {}
14 | obj['toast'+index+'Hidden'] = false
15 | this.setData(obj)
16 | }
17 | })(i)
18 | }
19 | Page(pageData)
20 |
--------------------------------------------------------------------------------
/page/API/on-compass-change/on-compass-change.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | 选中手机即可获取方位信息
10 |
11 | {{direction}}
12 | o
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/page/API/pull-down-refresh/pull-down-refresh.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | 下滑页面即可刷新
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-checkbox/wx-checkbox.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | checkbox
4 | 多选框
5 |
6 |
7 |
8 |
9 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-radio/wx-radio.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | radio
4 | 单选框
5 |
6 |
7 |
8 |
9 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/page/API/background-audio/background-audio.wxss:
--------------------------------------------------------------------------------
1 | .page-body-wrapper {
2 | margin-top: 0;
3 | }
4 | .page-body-info {
5 | padding-bottom: 50rpx;
6 | }
7 | .time-big {
8 | font-size: 60rpx;
9 | margin: 20rpx;
10 | }
11 | .slider {
12 | width: 650rpx;
13 | }
14 | .play-time {
15 | font-size: 28rpx;
16 | width: 700rpx;
17 | padding: 20rpx 0;
18 | display: flex;
19 | justify-content: space-between;
20 | box-sizing: border-box;
21 | }
22 | .page-body-buttons {
23 | display: flex;
24 | justify-content: space-around;
25 | margin-top: 100rpx;
26 | }
27 | .page-body-button {
28 | width: 250rpx;
29 | text-align: center;
30 | }
31 |
--------------------------------------------------------------------------------
/page/API/navigation-bar-loading/navigation-bar-loading.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/page/API/navigator/navigator.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-navigator/wx-navigator.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | navigator
4 | 导航栏
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-video/wx-video.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | video
4 | 视频
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-switch/wx-switch.js:
--------------------------------------------------------------------------------
1 | var pageData = {
2 | data: {
3 | switch1Checked: true,
4 | switch2Checked: false,
5 | switch1Style: '',
6 | switch2Style: 'text-decoration: line-through'
7 | }
8 | }
9 | for(var i = 1; i <= 2; ++i) {
10 | (function(index) {
11 | pageData[`switch${index}Change`] = function(e) {
12 | console.log(`switch${index}发生change事件,携带值为`, e.detail.value)
13 | var obj = {}
14 | obj[`switch${index}Checked`] = e.detail.value
15 | this.setData(obj)
16 | obj = {}
17 | obj[`switch${index}Style`] = e.detail.value ? '' : 'text-decoration: line-through'
18 | this.setData(obj)
19 | }
20 | })(i)
21 | }
22 | Page(pageData)
--------------------------------------------------------------------------------
/page/API/animation/animation.wxss:
--------------------------------------------------------------------------------
1 | .page-body-wrapper {
2 | flex-grow: 1;
3 | }
4 | .animation-element-wrapper {
5 | display: block;
6 | margin-bottom: 100rpx;
7 | }
8 | .animation-element {
9 | width: 200rpx;
10 | height: 200rpx;
11 | background-color: #1AAD19;
12 | }
13 | .animation-buttons {
14 | padding: 50rpx 50rpx 10rpx;
15 | border-top: 1px solid #ccc;
16 | display: flex;
17 | flex-grow: 1;
18 | overflow-y: scroll;
19 | flex-direction: row;
20 | flex-wrap: wrap;
21 | width: 100%;
22 | height: 400rpx;
23 | box-sizing: border-box;
24 | }
25 | .animation-button {
26 | width: 290rpx;
27 | margin: 20rpx auto;
28 | }
29 | .animation-button-reset {
30 | width: 610rpx;
31 | margin: 20rpx auto;
32 | }
33 |
--------------------------------------------------------------------------------
/page/API/voice/voice.wxss:
--------------------------------------------------------------------------------
1 | .page-body-wrapper {
2 | justify-content: space-between;
3 | flex-grow: 1;
4 | margin-bottom: 300rpx;
5 | }
6 | .page-body-time {
7 | display: flex;
8 | flex-direction: column;
9 | align-items: center;
10 | }
11 | .time-big {
12 | font-size: 60rpx;
13 | margin: 20rpx;
14 | }
15 | .time-small {
16 | font-size: 30rpx;
17 | }
18 |
19 | .page-body-buttons {
20 | display: flex;
21 | justify-content: space-around;
22 | }
23 | .page-body-button {
24 | width: 250rpx;
25 | text-align: center;
26 | }
27 | .button-stop-record {
28 | width: 110rpx;
29 | height: 110rpx;
30 | border: 20rpx solid #fff;
31 | background-color: #f55c23;
32 | border-radius: 130rpx;
33 | margin: 0 auto;
34 | }
35 |
--------------------------------------------------------------------------------
/page/component/navigation-pages/form/form.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-action-sheet/wx-action-sheet.js:
--------------------------------------------------------------------------------
1 | var items = ['item1', 'item2', 'item3', 'item4']
2 | var pageObject = {
3 | data: {
4 | actionSheetHidden: true,
5 | actionSheetItems: items
6 | },
7 | actionSheetTap: function(e) {
8 | this.setData({
9 | actionSheetHidden: !this.data.actionSheetHidden
10 | })
11 | },
12 | actionSheetChange: function(e) {
13 | this.setData({
14 | actionSheetHidden: !this.data.actionSheetHidden
15 | })
16 | }
17 | }
18 |
19 | for (var i = 0; i < items.length; ++i) {
20 | (function(itemName) {
21 | pageObject['bind' + itemName] = function(e) {
22 | console.log('click' + itemName, e)
23 | }
24 | })(items[i])
25 | }
26 |
27 | Page(pageObject)
28 |
--------------------------------------------------------------------------------
/page/component/navigation-pages/view/view.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/page/API/login/login.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | 已登录
11 | 每个微信号中仅需登录 1 次,后续每次进入页面即可根据微信 id 自动拉取用户信息
12 |
13 |
14 | 每个微信号中仅需登录一次
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/page/API/get-user-info/get-user-info.js:
--------------------------------------------------------------------------------
1 | var app = getApp()
2 | Page({
3 | data: {
4 | hasUserInfo: false
5 | },
6 | getUserInfo: function () {
7 | var that = this
8 |
9 | if (app.globalData.hasLogin === false) {
10 | wx.login({
11 | success: _getUserInfo
12 | })
13 | } else {
14 | _getUserInfo()
15 | }
16 |
17 | function _getUserInfo() {
18 | wx.getUserInfo({
19 | success: function (res) {
20 | that.setData({
21 | hasUserInfo: true,
22 | userInfo: res.userInfo
23 | })
24 | that.update()
25 | }
26 | })
27 | }
28 | },
29 | clear: function () {
30 | this.setData({
31 | hasUserInfo: false,
32 | userInfo: {}
33 | })
34 | }
35 | })
36 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-form/wx-form.js:
--------------------------------------------------------------------------------
1 | Page({
2 | data: {
3 | pickerHidden: true,
4 | chosen: ''
5 | },
6 | pickerConfirm: function(e) {
7 | this.setData({
8 | pickerHidden: true
9 | })
10 | this.setData({
11 | chosen: e.detail.value
12 | })
13 | },
14 | pickerCancel: function(e) {
15 | this.setData({
16 | pickerHidden: true
17 | })
18 | },
19 | pickerShow: function(e) {
20 | this.setData({
21 | pickerHidden: false
22 | })
23 | },
24 | formSubmit: function(e) {
25 | console.log('form发生了submit事件,携带数据为:', e.detail.value)
26 | },
27 | formReset: function(e) {
28 | console.log('form发生了reset事件,携带数据为:', e.detail.value)
29 | this.setData({
30 | chosen: ''
31 | })
32 | }
33 | })
34 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-slide-tab/wx-slide-tab.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | slide-tab
4 | slide-tab
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | {{item}}
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-action-sheet/wx-action-sheet.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | action-sheet
4 | action-sheet
5 |
6 |
7 |
8 |
9 |
10 |
11 | {{item}}
12 |
13 | 取消
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-scroll-view/wx-scroll-view.js:
--------------------------------------------------------------------------------
1 | var order = ['green', 'red', 'yellow', 'blue', 'green']
2 | Page({
3 | data: {
4 | toView: "green"
5 | },
6 | upper: function(e) {
7 | console.log(e)
8 | },
9 | lower: function(e) {
10 | console.log(e)
11 | },
12 | scroll: function(e) {
13 | console.log(e)
14 | },
15 | scrollToTop: function(e) {
16 | this.setAction({
17 | scrollTop: 0
18 | })
19 | },
20 | tap: function(e) {
21 | for (var i = 0; i < order.length; ++i) {
22 | if (order[i] === this.data.toView) {
23 | this.setData({
24 | toView: order[i + 1],
25 | scrollTop: (i + 1) * 200
26 | })
27 | break
28 | }
29 | }
30 | },
31 | tapMove: function(e) {
32 | this.setData({
33 | scrollTop: this.data.scrollTop + 10
34 | })
35 | }
36 | })
37 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-modal/wx-modal.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | modal
4 | 模式对话框
5 |
6 |
7 |
8 | 这是对话框的内容。
9 |
10 |
11 |
12 | 没有标题没有取消的对话框
13 | 内容可以插入节点
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/page/API/on-accelerometer-change/on-accelerometer-change.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | 旋转手机即可移动以下小球
10 |
11 |
12 |
13 |
14 |
15 | X: {{x}}
16 | Y: {{y}}
17 | Z: {{z}}
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/page/API/set-navigation-bar-title/set-navigation-bar-title.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-input/wx-input.js:
--------------------------------------------------------------------------------
1 | Page({
2 | data:{
3 | focus:false,
4 | inputValue:""
5 | },
6 | bindButtonTap:function(){
7 | this.setData({
8 | focus:true
9 | })
10 | },
11 | bindKeyInput:function(e){
12 | this.setData({
13 | inputValue:e.detail.value
14 | })
15 | },
16 | bindReplaceInput:function(e){
17 | var value = e.detail.value;
18 | var pos = e.detail.cursor;
19 | if(pos != -1){
20 | //光标在中间
21 | var left = e.detail.value.slice(0,pos);
22 | //计算光标的位置
23 | pos = left.replace(/11/g,'2').length;
24 | }
25 |
26 | //直接返回对象,可以对输入进行过滤处理,同时可以控制光标的位置
27 | return {
28 | value:value.replace(/11/g,'2'),
29 | cursor:pos
30 | }
31 |
32 | //或者直接返回字符串,光标在最后边
33 | //return value.replace(/11/g,'2'),
34 | },
35 | bindHideKeyboard:function(e){
36 | if(e.detail.value === "123"){
37 | //收起键盘
38 | wx.hideKeyboard();
39 | }
40 | }
41 | })
--------------------------------------------------------------------------------
/page/component/component-pages/wx-swiper/wx-swiper.js:
--------------------------------------------------------------------------------
1 | Page({
2 | data: {
3 | background: ['green', 'red', 'yellow'],
4 | indicatorDots: true,
5 | vertical: false,
6 | autoplay: false,
7 | interval: 3000,
8 | duration: 1000
9 | },
10 | changeIndicatorDots: function (e) {
11 | this.setData({
12 | indicatorDots: !this.data.indicatorDots
13 | })
14 | },
15 | changeVertical: function (e) {
16 | this.setData({
17 | vertical: !this.data.vertical
18 | })
19 | },
20 | changeAutoplay: function (e) {
21 | this.setData({
22 | autoplay: !this.data.autoplay
23 | })
24 | },
25 | intervalChange: function (e) {
26 | this.setData({
27 | interval: e.detail.value
28 | })
29 | },
30 | durationChange: function (e) {
31 | this.setData({
32 | duration: e.detail.value
33 | })
34 | }
35 | })
36 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-button/wx-button.js:
--------------------------------------------------------------------------------
1 | var types = ['default', 'primary', 'warn']
2 | var pageObject = {
3 | data: {
4 | defaultSize: 'default',
5 | primarySize: 'default',
6 | warnSize: 'default',
7 | disabled: false,
8 | plain: false,
9 | loading: false
10 | },
11 | setDisabled: function(e) {
12 | this.setData({
13 | disabled: !this.data.disabled
14 | })
15 | },
16 | setPlain: function(e) {
17 | this.setData({
18 | plain: !this.data.plain
19 | })
20 | },
21 | setLoading: function(e) {
22 | this.setData({
23 | loading: !this.data.loading
24 | })
25 | }
26 | }
27 |
28 | for (var i = 0; i < types.length; ++i) {
29 | (function(type) {
30 | pageObject[type] = function(e) {
31 | var key = type + 'Size'
32 | var changedData = {}
33 | changedData[key] =
34 | this.data[key] === 'default' ? 'mini' : 'default'
35 | this.setData(changedData)
36 | }
37 | })(types[i])
38 | }
39 |
40 | Page(pageObject)
41 |
--------------------------------------------------------------------------------
/page/API/get-network-type/get-network-type.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | 网络状态
11 |
12 | 未获取
13 | 点击绿色按钮可获取网络状态
14 |
15 |
16 | {{networkType}}
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-slider/wx-slider.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | slider
4 | 滑块
5 |
6 |
7 |
8 | 设置step
9 |
10 |
11 |
12 |
13 |
14 |
15 | 显示当前value
16 |
17 |
18 |
19 |
20 |
21 |
22 | 设置最小/最大值
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/page/API/get-user-info/get-user-info.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | 用户信息
11 |
12 | 未获取
13 | 点击绿色按钮可获取用户头像及昵称
14 |
15 |
16 |
17 | {{userInfo.nickName}}
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-image/wx-image.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | image
4 | 图片
5 |
6 |
7 |
8 | local image
9 |
10 |
11 |
12 |
13 |
14 | internet image
15 |
16 |
18 |
19 |
20 |
21 | error image
22 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/page/API/get-location/get-location.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | 当前位置经纬度
11 |
12 | 未获取
13 |
14 |
15 |
16 | E{{location.longitude[0]}}°{{location.longitude[1]}}′
17 | N{{location.latitude[0]}}°{{location.latitude[1]}}′
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-icon/wx-icon.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | icon
4 | icon图标
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-toast/wx-toast.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | toast
4 | toast提示
5 |
6 |
7 |
8 |
9 |
10 | 默认
11 |
12 |
13 |
14 |
15 |
16 | 设置icon
17 |
18 |
19 |
20 |
21 |
22 | 设置duration
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/page/API/storage/storage.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
22 |
23 |
24 |
25 | {{toast.content}}
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/page/API/animation/animation.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/page/API/file/file.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | 请选择图片
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | {{dialog.content}}
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/page/API/storage/storage.js:
--------------------------------------------------------------------------------
1 | Page({
2 | data: {
3 | toast: {
4 | hidden: true
5 | }
6 | },
7 | submitForm: function (e) {
8 | var type = e.detail.target.id
9 | var key = e.detail.value.key
10 | var data = e.detail.value.data
11 |
12 | if (key.length === 0 && type !== 'clear') {
13 | this.setData({
14 | key: key,
15 | data: data,
16 | 'toast.hidden': false,
17 | 'toast.content': 'key 不能为空'
18 | })
19 | } else if (type === 'get' && key.length > 0) {
20 | this.setData({
21 | key: key,
22 | data: wx.getStorageSync(key),
23 | 'toast.hidden': false,
24 | 'toast.content': '读取数据成功'
25 | })
26 | } else if (type === 'set' && key.length > 0) {
27 | wx.setStorageSync(key, data)
28 | this.setData({
29 | key: key,
30 | data: data,
31 | 'toast.hidden': false,
32 | 'toast.content': '存储数据成功'
33 | })
34 | } else if (type === 'clear') {
35 | wx.clearStorageSync()
36 | this.setData({
37 | key: '',
38 | data: '',
39 | 'toast.hidden': false,
40 | 'toast.content': '清除数据成功'
41 | })
42 | }
43 | },
44 | toastChange: function () {
45 | this.setData({
46 | 'toast.hidden': true
47 | })
48 | }
49 | })
50 |
--------------------------------------------------------------------------------
/page/API/canvas/canvas.js:
--------------------------------------------------------------------------------
1 | Page({
2 | onReady: function () {
3 | this.position = {
4 | x: 150,
5 | y: 150,
6 | vx: 2,
7 | vy: 2
8 | }
9 |
10 | this.drawBall()
11 | this.interval = setInterval(this.drawBall, 17)
12 | },
13 | drawBall: function () {
14 | var p = this.position
15 | p.x += p.vx
16 | p.y += p.vy
17 | if (p.x >= 300) {
18 | p.vx = -2
19 | }
20 | if (p.x <= 7) {
21 | p.vx = 2
22 | }
23 | if (p.y >= 300) {
24 | p.vy = -2
25 | }
26 | if (p.y <= 7) {
27 | p.vy = 2
28 | }
29 |
30 | var context = wx.createContext()
31 |
32 | ball(p.x, 150)
33 | ball(150, p.y)
34 | ball(300 - p.x, 150)
35 | ball(150, 300 - p.y)
36 | ball(p.x, p.y)
37 | ball(300 - p.x, 300 - p.y)
38 | ball(p.x, 300 - p.y)
39 | ball(300 - p.x, p.y)
40 |
41 |
42 | wx.drawCanvas({
43 | canvasId: 'canvas',
44 | actions: context.getActions()
45 | })
46 |
47 | function ball(x, y) {
48 | context.beginPath(0)
49 | context.arc(x, y, 5, 0, Math.PI * 2)
50 | context.setFillStyle('#1aad19')
51 | context.setStrokeStyle('rgba(1,1,1,0)')
52 | context.fill()
53 | context.stroke()
54 | }
55 | },
56 | onUnload: function () {
57 | clearInterval(this.interval)
58 | }
59 | })
60 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-picker/wx-picker.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | picker
4 | 选择器
5 |
6 |
7 |
8 | 地区选择器
9 |
10 |
11 | 当前选择:{{array[index]}}
12 |
13 |
14 |
15 |
16 | 时间选择器
17 |
18 |
19 | 当前选择: {{time}}
20 |
21 |
22 |
23 |
24 |
25 | 日期选择器
26 |
27 |
28 | 当前选择: {{date}}
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-mask/wx-mask.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | mask
4 | 遮罩
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/page/API/background-audio/background-audio.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | {{formatedPlayTime}}
10 |
11 |
12 | 00:00
13 | 04:29
14 |
15 |
16 | 离开应用后音乐也可保持播放
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/page/API/image/image.js:
--------------------------------------------------------------------------------
1 | var sourceType = [ ['camera'], ['album'], ['camera', 'album'] ]
2 | var sizeType = [ ['compressed'], ['original'], ['compressed', 'original'] ]
3 |
4 | Page({
5 | data: {
6 | sourceTypeIndex: 0,
7 | sourceType: ['拍照', '相册', '拍照或相册'],
8 |
9 | sizeTypeIndex: 0,
10 | sizeType: ['压缩', '原图', '压缩或原图'],
11 |
12 | countIndex: 0,
13 | count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
14 | },
15 | sourceTypeChange: function (e) {
16 | this.setData({
17 | sourceTypeIndex: e.detail.value
18 | })
19 | },
20 | sizeTypeChange: function (e) {
21 | this.setData({
22 | sizeTypeIndex: e.detail.value
23 | })
24 | },
25 | countChange: function (e) {
26 | this.setData({
27 | countIndex: e.detail.value
28 | })
29 | },
30 | chooseImage: function () {
31 | var that = this
32 | wx.chooseImage({
33 | sourceType: sourceType[this.data.sourceTypeIndex],
34 | sizeType: sizeType[this.data.sizeTypeIndex],
35 | count: this.data.count[this.data.countIndex],
36 | success: function (res) {
37 | console.log(res)
38 | that.setData({
39 | imageList: res.tempFilePaths
40 | })
41 | }
42 | })
43 | },
44 | previewImage: function (e) {
45 | var current = e.target.dataset.src
46 |
47 | wx.previewImage({
48 | current: current,
49 | urls: this.data.imageList
50 | })
51 | }
52 | })
53 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-swiper/wx-swiper.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | swiper
4 | swiper
5 |
6 |
7 |
8 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | duration
24 |
25 | interval
26 |
27 |
28 |
--------------------------------------------------------------------------------
/page/API/index/index.wxml:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
33 |
34 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-label/wx-label.js:
--------------------------------------------------------------------------------
1 | Page({
2 | data: {
3 | checkboxItems: [
4 | {name: 'USA', value: '美国'},
5 | {name: 'CHN', value: '中国', checked: 'true'},
6 | {name: 'BRA', value: '巴西'},
7 | {name: 'JPN', value: '日本', checked: 'true'},
8 | {name: 'ENG', value: '英国'},
9 | {name: 'FRA', value: '法国'},
10 | ],
11 | radioItems: [
12 | {name: 'USA', value: '美国'},
13 | {name: 'CHN', value: '中国', checked: 'true'},
14 | {name: 'BRA', value: '巴西'},
15 | {name: 'JPN', value: '日本'},
16 | {name: 'ENG', value: '英国'},
17 | {name: 'FRA', value: '法国'},
18 | ],
19 | hidden: false
20 | },
21 | checkboxChange: function(e) {
22 | var checked = e.detail.value
23 | var changed = {}
24 | for (var i = 0; i < this.data.checkboxItems.length; i ++) {
25 | if (checked.indexOf(this.data.checkboxItems[i].name) !== -1) {
26 | changed['checkboxItems['+i+'].checked'] = true
27 | } else {
28 | changed['checkboxItems['+i+'].checked'] = false
29 | }
30 | }
31 | this.setData(changed)
32 | },
33 | radioChange: function(e) {
34 | var checked = e.detail.value
35 | var changed = {}
36 | for (var i = 0; i < this.data.radioItems.length; i ++) {
37 | if (checked.indexOf(this.data.radioItems[i].name) !== -1) {
38 | changed['radioItems['+i+'].checked'] = true
39 | } else {
40 | changed['radioItems['+i+'].checked'] = false
41 | }
42 | }
43 | this.setData(changed)
44 | },
45 | tapEvent: function(e) {
46 | console.log('按钮被点击')
47 | }
48 | })
49 |
--------------------------------------------------------------------------------
/page/API/file/file.js:
--------------------------------------------------------------------------------
1 | Page({
2 | data: {
3 | tempFilePath: '',
4 | savedFilePath: wx.getStorageSync('savedFilePath') || '',
5 | dialog: {
6 | hidden: true
7 | }
8 | },
9 | chooseImage: function () {
10 | var that = this
11 | wx.chooseImage({
12 | count: 1,
13 | success: function (res) {
14 | that.setData({
15 | tempFilePath: res.tempFilePaths[0]
16 | })
17 | }
18 | })
19 | },
20 | saveFile: function () {
21 | if (this.data.tempFilePath.length > 0) {
22 | var that = this
23 | wx.saveFile({
24 | tempFilePath: this.data.tempFilePath,
25 | success: function (res) {
26 | that.setData({
27 | savedFilePath: res.savedFilePath
28 | })
29 | wx.setStorageSync('savedFilePath', res.savedFilePath)
30 | that.setData({
31 | dialog: {
32 | title: '保存成功',
33 | content: '下次进入应用时,此文件仍可用',
34 | hidden: false
35 | }
36 | })
37 | },
38 | fail: function (res) {
39 | that.setData({
40 | dialog: {
41 | title: '保存失败',
42 | content: '应该是有 bug 吧',
43 | hidden: false
44 | }
45 | })
46 | }
47 | })
48 | }
49 | },
50 | clear: function () {
51 | wx.setStorageSync('savedFilePath', '')
52 | this.setData({
53 | tempFilePath: '',
54 | savedFilePath: ''
55 | })
56 | },
57 | confirm: function () {
58 | this.setData({
59 | 'dialog.hidden': true
60 | })
61 | }
62 | })
63 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-button/wx-button.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | button
4 | 按钮
5 |
6 |
7 |
8 |
9 |
12 |
13 |
14 |
15 |
18 |
19 |
20 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/page/API/open-location/open-location.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
32 |
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-form/wx-form.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | form
4 | 表单
5 |
6 |
39 |
--------------------------------------------------------------------------------
/page/API/index/index.wxss:
--------------------------------------------------------------------------------
1 | .header {
2 | padding: 40px;
3 | }
4 | .title {
5 | font-size: 30px;
6 | }
7 | .desc {
8 | margin-top: 5px;
9 | color: #888888;
10 | font-size: 14px;
11 | line-height: 1.4;
12 | }
13 | .menu-list {
14 | display: flex;
15 | flex-direction: column;
16 | background-color: #fbf9fe;
17 | }
18 | .menu-item {
19 | color: #000000;
20 | display: flex;
21 | background-color: #fff;
22 | margin: 10rpx 40rpx;
23 | flex-direction: column;
24 | }
25 | .menu-item-main {
26 | display: flex;
27 | height: 100rpx;
28 | padding: 20rpx;
29 | border-radius: 10rpx;
30 | align-items: center;
31 | font-size: 32rpx;
32 | justify-content: space-between;
33 | }
34 | .menu-item-arrow {
35 | width: 32rpx;
36 | height: 32rpx;
37 | transition: 400ms;
38 | }
39 | .menu-item-arrow.open {
40 | transform: rotate(-90deg);
41 | }
42 | .menu-item-arrow.close {
43 | transform: rotate(90deg);
44 | }
45 | .menu-item-arrow.url {
46 | transform: rotate(0deg);
47 | }
48 |
49 | .menu-item-api-list {
50 | transition: 200ms;
51 | height: auto;
52 | border-top: 1px solid #d8d8d8;
53 | }
54 | .menu-item-api-list.close {
55 | display: none;
56 | height: 0;
57 | }
58 | .menu-item-api-item {
59 | display: flex;
60 | justify-content: space-between;
61 | height: 80rpx;
62 | padding: 20rpx 20rpx 20rpx 0;
63 | margin-left: 20rpx;
64 | align-items: center;
65 | border-top: 1px solid #f0f0f0;
66 | }
67 | .menu-item-api-item-text {
68 | display: flex;
69 | flex-direction: column;
70 | justify-content: space-between;
71 | height: 100%;
72 | }
73 | .menu-item-api-item-text-zhname {
74 | font-size: 30rpx;
75 | }
76 | .menu-item-api-item-text-enname {
77 | font-size: 26rpx;
78 | color: #6b6b6b;
79 | }
80 | .menu-item-api-item-arrow {
81 | width: 32rpx;
82 | height: 32rpx;
83 | }
84 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-scroll-view/wx-scroll-view.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | scroll-view
4 | 可滚动视图区域。
5 |
6 |
7 |
8 | vertical scroll
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | horizontal scroll
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/page/API/image/image.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
40 |
41 |
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/page/component/index.wxss:
--------------------------------------------------------------------------------
1 | .img{
2 | width: 100%;
3 | height: 200px;
4 | }
5 | .index{
6 | background-color: #FBF9FE;
7 | font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
8 | flex: 1;
9 | min-height: 100%;
10 | font-size: 16px;
11 | }
12 | .head{
13 | padding: 40px;
14 | }
15 | .body{
16 | padding-left: 15px;
17 | padding-right: 15px;
18 | overflow: hidden;
19 | }
20 | .title{
21 | font-size: 30px;
22 | }
23 | .desc{
24 | margin-top: 5px;
25 | color: #888888;
26 | font-size: 14px;
27 | }
28 |
29 | .widgets__item{
30 | margin-top: 10px;
31 | margin-bottom: 10px;
32 | background-color: #FFFFFF;
33 | overflow: hidden;
34 | border-radius: 2px;
35 | cursor: pointer;
36 | }
37 | .widgets__info{
38 | display: flex;
39 | padding: 20px;
40 | align-items: center;
41 | flex-direction: row;
42 | }
43 | .widgets__info_show{
44 | opacity: .4;
45 | }
46 | .widgets__info-name{
47 | flex: 1;
48 | }
49 | .widgets__info-img{
50 | width: 30px;
51 | height: 30px;
52 | }
53 |
54 | .widgets__list{
55 | display: none;
56 | }
57 | .widgets__list_show{
58 | display: block;
59 | }
60 | /*
61 | .widgets__list{
62 | height: 0;
63 | overflow: hidden;
64 | }
65 | .widgets__list_show{
66 | height: auto;
67 | }
68 | .widgets__list-inner{
69 | opacity: 0;
70 | transform: translateY(-50%);
71 | transition: .3s;
72 | }
73 | .widgets__list-inner_show{
74 | opacity: 1;
75 | transform: translateY(0);
76 | }
77 | */
78 |
79 | .widget{
80 | position: relative;
81 | padding-top: 13px;
82 | padding-bottom: 13px;
83 | padding-left: 20px;
84 | padding-right: 20px;
85 | }
86 | .widget__arrow{
87 | position: absolute;
88 | top: 14px;
89 | right: 22px;
90 | width: 8px;
91 | height: 16px;
92 | }
93 | .widget__line{
94 | content: " ";
95 | position: absolute;
96 | left: 20px;
97 | bottom: 0;
98 | right: 20px;
99 | height: 1rpx;
100 | background-color: #DFDFDF;
101 | }
--------------------------------------------------------------------------------
/page/component/component-pages/wx-input/wx-input.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | input
4 | 输入框
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | 你输入的是:{{inputValue}}
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/page/API/get-system-info/get-system-info.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | 手机型号
12 |
13 |
14 |
15 | 微信语言
16 |
17 |
18 |
19 | 微信版本
20 |
21 |
22 |
23 | 屏幕宽度
24 |
25 |
26 |
27 | 屏幕高度
28 |
29 |
30 |
31 | DPI
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/page/API/animation/animation.js:
--------------------------------------------------------------------------------
1 | Page({
2 | onReady: function () {
3 | this.animation = wx.createAnimation()
4 |
5 | },
6 | rotate: function () {
7 | this.animation.rotate(Math.random() * 720 - 360).step()
8 | this.setData({ animation: this.animation.export() })
9 | },
10 | scale: function () {
11 | this.animation.scale(Math.random() * 2).step()
12 | this.setData({ animation: this.animation.export() })
13 | },
14 | translate: function () {
15 | this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
16 | this.setData({ animation: this.animation.export() })
17 | },
18 | skew: function () {
19 | this.animation.skew(Math.random() * 90, Math.random() * 90).step()
20 | this.setData({ animation: this.animation.export() })
21 | },
22 | rotateAndScale: function () {
23 | this.animation.rotate(Math.random() * 720 - 360)
24 | .scale(Math.random() * 2)
25 | .step()
26 | this.setData({ animation: this.animation.export() })
27 | },
28 | rotateThenScale: function () {
29 | this.animation.rotate(Math.random() * 720 - 360).step()
30 | .scale(Math.random() * 2).step()
31 | this.setData({ animation: this.animation.export() })
32 | },
33 | all: function () {
34 | this.animation.rotate(Math.random() * 720 - 360)
35 | .scale(Math.random() * 2)
36 | .translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
37 | .skew(Math.random() * 90, Math.random() * 90)
38 | .step()
39 | this.setData({ animation: this.animation.export() })
40 | },
41 | allInQueue: function () {
42 | this.animation.rotate(Math.random() * 720 - 360).step()
43 | .scale(Math.random() * 2).step()
44 | .translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
45 | .skew(Math.random() * 90, Math.random() * 90).step()
46 | this.setData({ animation: this.animation.export() })
47 | },
48 | reset: function () {
49 | this.animation.rotate(0, 0)
50 | .scale(1)
51 | .translate(0, 0)
52 | .skew(0, 0)
53 | .step({ duration: 0 })
54 | this.setData({ animation: this.animation.export() })
55 | }
56 | })
57 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-label/wx-label.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | label
4 | 标签
5 |
6 |
7 |
8 | 表单组件在label内
9 |
10 |
11 |
15 |
16 |
17 |
18 |
19 |
20 | label用for标识表单组件
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 | 绑定button
32 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | label内有多个时选中第一个
42 |
49 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/page/API/on-accelerometer-change/on-accelerometer-change.js:
--------------------------------------------------------------------------------
1 | Page({
2 | onReady: function () {
3 | this.drawBigBall()
4 | var that = this
5 |
6 | this.position = {
7 | x: 151,
8 | y: 151,
9 | vx: 0,
10 | vy: 0,
11 | ax: 0,
12 | ay: 0
13 | }
14 | wx.onAccelerometerChange(function (res) {
15 | that.setData({
16 | x: res.x.toFixed(2),
17 | y: res.y.toFixed(2),
18 | z: res.z.toFixed(2)
19 | })
20 | that.position.ax = Math.sin(res.x * Math.PI / 2)
21 | that.position.ay = -Math.sin(res.y * Math.PI / 2)
22 | //that.drawSmallBall()
23 | })
24 |
25 | this.interval = setInterval(function () {
26 | that.drawSmallBall()
27 | }, 17)
28 |
29 | },
30 | drawBigBall: function () {
31 | var context = wx.createContext()
32 | context.beginPath(0)
33 | context.arc(151, 151, 140, 0, Math.PI * 2)
34 | context.setFillStyle('#ffffff')
35 | context.setStrokeStyle('#aaaaaa')
36 | context.fill()
37 | context.stroke()
38 | wx.drawCanvas({
39 | canvasId: 'big-ball',
40 | actions: context.getActions()
41 | })
42 | },
43 | drawSmallBall: function () {
44 | var p = this.position
45 | var strokeStyle = 'rgba(1,1,1,0)'
46 |
47 | p.x = p.x + p.vx
48 | p.y = p.y + p.vy
49 | p.vx = p.vx + p.ax
50 | p.vy = p.vy + p.ay
51 |
52 | if (Math.sqrt(Math.pow(Math.abs(p.x) - 151, 2) + Math.pow(Math.abs(p.y) - 151, 2)) >= 115) {
53 | if (p.x > 151 && p.vx > 0) {
54 | p.vx = 0
55 | }
56 | if (p.x < 151 && p.vx < 0) {
57 | p.vx = 0
58 | }
59 | if (p.y > 151 && p.vy > 0) {
60 | p.vy = 0
61 | }
62 | if (p.y < 151 && p.vy < 0) {
63 | p.vy = 0
64 | }
65 | strokeStyle = '#ff0000'
66 | }
67 |
68 | var context = wx.createContext()
69 | context.beginPath(0)
70 | context.arc(p.x, p.y, 15, 0, Math.PI * 2)
71 | context.setFillStyle('#1aad19')
72 | context.setStrokeStyle(strokeStyle)
73 | context.fill()
74 | context.stroke()
75 | wx.drawCanvas({
76 | canvasId: 'small-ball',
77 | actions: context.getActions()
78 | })
79 | },
80 | data: {
81 | x: 0,
82 | y: 0,
83 | z: 0
84 | },
85 | onUnload: function () {
86 | clearInterval(this.interval)
87 | }
88 | })
89 |
--------------------------------------------------------------------------------
/page/API/background-audio/background-audio.js:
--------------------------------------------------------------------------------
1 | var util = require('../../../util/util.js')
2 | var dataUrl = 'http://ws.stream.qqmusic.qq.com/C100001wmp4t06stlC.m4a?fromtag=38'
3 | Page({
4 | onLoad: function () {
5 | var that = this
6 | wx.onBackgroundAudioStop(function () {
7 | that.setData({
8 | playing: false,
9 | playTime: 0,
10 | formatedPlayTime: '00:00:00'
11 | })
12 | })
13 | },
14 | data: {
15 | playing: false,
16 | playTime: 0,
17 | formatedPlayTime: '00:00:00'
18 | },
19 | play: function (res) {
20 | var that = this
21 | wx.playBackgroundAudio({
22 | dataUrl: dataUrl,
23 | title: 'Lost Stars',
24 | coverImgUrl: 'http://y.gtimg.cn/music/photo_new/T002R150x150M000000Jhxf24CFL06.jpg?max_age=2592000',
25 | complete: function (res) {
26 | that.setData({
27 | playing: true
28 | })
29 | }
30 | })
31 | this._enableInterval()
32 | },
33 | seek: function (e) {
34 | clearInterval(this.updateInterval)
35 | var that = this
36 | wx.seekBackgroundAudio({
37 | position: e.detail.value,
38 | complete: function () {
39 | // 实际会延迟两秒左右才跳过去
40 | setTimeout(function () {
41 | that._enableInterval()
42 | }, 2000)
43 | }
44 | })
45 | },
46 | pause: function () {
47 | var that = this
48 | wx.pauseBackgroundAudio({
49 | success: function () {
50 | that.setData({
51 | playing: false
52 | })
53 | }
54 | })
55 | },
56 | stop: function () {
57 | var that = this
58 | wx.stopBackgroundAudio({
59 | success: function (res) {
60 | that.setData({
61 | playing: false,
62 | playTime: 0,
63 | formatedPlayTime: util.formatTime(0)
64 | })
65 | }
66 | })
67 | },
68 | _enableInterval: function () {
69 | var that = this
70 | update()
71 | this.updateInterval = setInterval(update, 500)
72 | function update() {
73 | wx.getBackgroundAudioPlayerState({
74 | success: function (res) {
75 | that.setData({
76 | playTime: res.currentPosition,
77 | formatedPlayTime: util.formatTime(res.currentPosition + 1)
78 | })
79 | }
80 | })
81 | }
82 | },
83 | onUnload: function () {
84 | clearInterval(this.updateInterval)
85 | }
86 | })
87 |
--------------------------------------------------------------------------------
/page/API/voice/voice.js:
--------------------------------------------------------------------------------
1 | var util = require('../../../util/util.js')
2 | var playTimeInterval
3 |
4 | Page({
5 | data: {
6 | recording: false,
7 | playing: false,
8 | hasRecord: false,
9 | recordTime: 0,
10 | playTime: 0,
11 | formatedRecordTime: '00:00:00',
12 | formatedPlayTime: '00:00:00'
13 | },
14 | startRecord: function () {
15 | this.setData({ recording: true })
16 |
17 | var that = this
18 | var interval = setInterval(function () {
19 | that.data.recordTime += 1
20 | that.setData({
21 | formatedRecordTime: util.formatTime(that.data.recordTime)
22 | })
23 | }, 1000)
24 | wx.startRecord({
25 | success: function (res) {
26 | that.setData({
27 | hasRecord: true,
28 | tempFilePath: res.tempFilePath,
29 | formatedPlayTime: util.formatTime(that.data.playTime)
30 | })
31 | },
32 | complete: function () {
33 | that.setData({ recording: false })
34 | clearInterval(interval)
35 | }
36 | })
37 | },
38 | stopRecord: function () {
39 | wx.stopRecord()
40 | },
41 | playVoice: function () {
42 | var that = this
43 | playTimeInterval = setInterval(function () {
44 | that.data.playTime += 1
45 | that.setData({
46 | playing: true,
47 | formatedPlayTime: util.formatTime(that.data.playTime)
48 | })
49 | }, 1000)
50 | wx.playVoice({
51 | filePath: this.data.tempFilePath,
52 | success: function () {
53 | clearInterval(playTimeInterval)
54 | that.data.playTime = 0
55 | that.setData({
56 | playing: false,
57 | formatedPlayTime: util.formatTime(that.data.playTime)
58 | })
59 | }
60 | })
61 | },
62 | pauseVoice: function () {
63 | clearInterval(playTimeInterval)
64 | wx.pauseVoice()
65 | this.setData({
66 | playing: false
67 | })
68 | },
69 | stopVoice: function () {
70 | clearInterval(playTimeInterval)
71 | this.data.playTime = 0
72 | this.setData({
73 | playing: false,
74 | formatedPlayTime: util.formatTime(this.data.playTime)
75 | })
76 | wx.stopVoice()
77 | },
78 | clear: function () {
79 | this.data.recordTime = 0
80 | this.data.playTime = 0
81 | this.setData({
82 | hasRecord: false,
83 | tempFilePath: '',
84 | formatedRecordTime: util.formatTime(0)
85 | })
86 | }
87 | })
88 |
--------------------------------------------------------------------------------
/page/API/voice/voice.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | {{formatedRecordTime}}
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | {{formatedRecordTime}}
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | {{formatedPlayTime}}
38 | {{formatedRecordTime}}
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 | {{formatedPlayTime}}
54 | {{formatedRecordTime}}
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
--------------------------------------------------------------------------------
/page/component/component-pages/wx-view/wx-view.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | view
4 | 弹性框模型分为弹性容器以及弹性项目。当组件的display为flex或inline-flex时,该组件则为弹性容器,弹性容器的子组件为弹性项目。
5 |
6 |
7 |
8 | flex-direction: row
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | flex-direction: column
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | justify-content: flex-start
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | justify-content: flex-end
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 | justify-content: center
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 | justify-content: space-between
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 | justify-content: space-around
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 | align-items: flex-end
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 | align-items: center
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
--------------------------------------------------------------------------------
/page/API/index/index.js:
--------------------------------------------------------------------------------
1 | Page({
2 | data: {
3 | menuList: [{
4 | name: '基础能力',
5 | APIList: [{
6 | zhName: '微信登录',
7 | enName: 'login',
8 | url: '../login/login'
9 | }, {
10 | zhName: '获取用户信息',
11 | enName: 'getUserInfo',
12 | url: '../get-user-info/get-user-info'
13 | }, {
14 | zhName: '发起支付',
15 | enName: 'RequestPayment',
16 | url: '../request-payment/request-payment'
17 | }],
18 | opened: false
19 | }, {
20 | name: '界面跳转、监听和加载',
21 | opened: false,
22 | APIList: [{
23 | zhName: '设置界面标题',
24 | enName: 'setNavigationBarTitle',
25 | url: '../set-navigation-bar-title/set-navigation-bar-title'
26 | }, {
27 | zhName: '标题栏加载动画',
28 | enName: 'navigationBarLoading',
29 | url: '../navigation-bar-loading/navigation-bar-loading'
30 | }, {
31 | zhName: '页面跳转',
32 | enName: 'navigateTo, navigateBack, redirectTo',
33 | url: '../navigator/navigator'
34 | }, {
35 | zhName: '下拉刷新',
36 | enName: 'pullDownRefresh',
37 | url: '../pull-down-refresh/pull-down-refresh'
38 | }, {
39 | zhName: '创建动画',
40 | enName: 'createAnimation',
41 | url: '../animation/animation'
42 | }, {
43 | zhName: '创建绘画',
44 | enName: 'createContext',
45 | url: '../canvas/canvas'
46 | }]
47 | }, {
48 | name: '设备相关',
49 | opened: false,
50 | APIList: [{
51 | zhName: '获取手机网络状态',
52 | enName: 'getNetworkType',
53 | url: '../get-network-type/get-network-type'
54 | }, {
55 | zhName: '获取手机系统信息',
56 | enName: 'getSystemInfo',
57 | url: '../get-system-info/get-system-info'
58 | }, {
59 | zhName: '监听重力感应数据',
60 | enName: 'onAccelerometerChange',
61 | url: '../on-accelerometer-change/on-accelerometer-change'
62 | }, {
63 | zhName: '监听罗盘数据',
64 | enName: 'onCompassChange',
65 | url: '../on-compass-change/on-compass-change'
66 | }]
67 | }, {
68 | name: '网络相关',
69 | opened: false,
70 | APIList: [{
71 | zhName: '发起一个请求',
72 | enName: 'request',
73 | url: '../request/request'
74 | }, {
75 | zhName: 'Web Socket',
76 | enName: 'Web Socket',
77 | url: '../web-socket/web-socket'
78 | }, {
79 | zhName: '上传文件',
80 | enName: 'Upload File',
81 | url: '../upload-file/upload-file'
82 | }, {
83 | zhName: '下载文件',
84 | enName: 'Download File',
85 | url: '../download-file/download-file'
86 | }]
87 | }, {
88 | name: '多媒体',
89 | opened: false,
90 | APIList: [{
91 | zhName: '图片',
92 | enName: 'chooseImage/previewImage',
93 | url: '../image/image'
94 | }, {
95 | zhName: '录音',
96 | enName: 'start/stopRecord, play/pause/stopVoice',
97 | url: '../voice/voice'
98 | }, {
99 | zhName: '背景音频',
100 | enName: 'play/pause/stopAudio',
101 | url: '../background-audio/background-audio'
102 | }, {
103 | zhName: '文件',
104 | enName: 'saveFile',
105 | url: '../file/file'
106 | }]
107 | }, {
108 | name: '数据',
109 | opened: false,
110 | url: '../storage/storage'
111 | }, {
112 | name: '地理位置',
113 | opened: false,
114 | APIList: [{
115 | zhName: '获取当前位置',
116 | enName: 'getLocation',
117 | url: '../get-location/get-location'
118 | }, {
119 | zhName: '使用原生地图查看位置',
120 | enName: 'openLocation',
121 | url: '../open-location/open-location'
122 | }]
123 | }]
124 | },
125 | tapMenuItem: function (e) {
126 | var menuItem = this.data.menuList[parseInt(e.currentTarget.id)]
127 | if (menuItem.url) {
128 | wx.navigateTo({ url: menuItem.url })
129 | } else {
130 | var changeData = {}
131 | var opened = menuItem.opened
132 |
133 | changeData['menuList[' + e.currentTarget.id + '].opened'] = !opened
134 | this.setData(changeData)
135 | }
136 | }
137 | })
138 |
--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "pages": [
3 | "page/component/index",
4 | "page/component/navigation-pages/controller/controller",
5 | "page/component/navigation-pages/form/form",
6 | "page/component/navigation-pages/media/media",
7 | "page/component/navigation-pages/view/view",
8 | "page/component/component-pages/wx-action-sheet/wx-action-sheet",
9 | "page/component/component-pages/wx-audio/wx-audio",
10 | "page/component/component-pages/wx-button/wx-button",
11 | "page/component/component-pages/wx-checkbox/wx-checkbox",
12 | "page/component/component-pages/wx-form/wx-form",
13 | "page/component/component-pages/wx-icon/wx-icon",
14 | "page/component/component-pages/wx-image/wx-image",
15 | "page/component/component-pages/wx-input/wx-input",
16 | "page/component/component-pages/wx-mask/wx-mask",
17 | "page/component/component-pages/wx-modal/wx-modal",
18 | "page/component/component-pages/wx-navigator/wx-navigator",
19 | "page/component/component-pages/wx-progress/wx-progress",
20 | "page/component/component-pages/wx-radio/wx-radio",
21 | "page/component/component-pages/wx-scroll-view/wx-scroll-view",
22 | "page/component/component-pages/wx-slider/wx-slider",
23 | "page/component/component-pages/wx-switch/wx-switch",
24 | "page/component/component-pages/wx-text/wx-text",
25 | "page/component/component-pages/wx-toast/wx-toast",
26 | "page/component/component-pages/wx-video/wx-video",
27 | "page/component/component-pages/wx-view/wx-view",
28 | "page/component/component-pages/wx-swiper/wx-swiper",
29 | "page/component/component-pages/wx-slide-tab/wx-slide-tab",
30 | "page/component/component-pages/wx-label/wx-label",
31 | "page/component/component-pages/wx-navigator/navigate",
32 | "page/component/component-pages/wx-navigator/redirect",
33 | "page/component/component-pages/wx-picker/wx-picker",
34 |
35 | "page/API/index/index",
36 | "page/API/storage/storage",
37 |
38 | "page/API/login/login",
39 | "page/API/get-user-info/get-user-info",
40 | "page/API/request-payment/request-payment",
41 |
42 | "page/API/set-navigation-bar-title/set-navigation-bar-title",
43 | "page/API/navigation-bar-loading/navigation-bar-loading",
44 | "page/API/navigator/navigator",
45 | "page/API/pull-down-refresh/pull-down-refresh",
46 | "page/API/animation/animation",
47 |
48 | "page/API/get-network-type/get-network-type",
49 | "page/API/get-system-info/get-system-info",
50 | "page/API/on-compass-change/on-compass-change",
51 |
52 | "page/API/request/request",
53 | "page/API/web-socket/web-socket",
54 | "page/API/upload-file/upload-file",
55 | "page/API/download-file/download-file",
56 |
57 |
58 | "page/API/image/image",
59 | "page/API/voice/voice",
60 | "page/API/file/file",
61 | "page/API/on-accelerometer-change/on-accelerometer-change",
62 | "page/API/canvas/canvas",
63 | "page/API/background-audio/background-audio",
64 |
65 | "page/API/get-location/get-location",
66 | "page/API/open-location/open-location"
67 |
68 | ],
69 | "window": {
70 | "navigationBarTextStyle": "black",
71 | "navigationBarTitleText": "抬扛",
72 | "navigationBarBackgroundColor": "#fbf9fe",
73 | "backgroundColor": "#fbf9fe"
74 | },
75 | "tabBar": {
76 | "color": "#878787",
77 | "selectedColor": "#ff8533",
78 | "borderStyle": "black",
79 | "backgroundColor": "#ffffff",
80 | "list": [{
81 | "pagePath": "page/component/index",
82 | "iconPath": "image/home.png",
83 | "selectedIconPath": "image/home.active.png",
84 | "text": "主页"
85 | }, {
86 | "pagePath": "page/API/index/index",
87 | "iconPath": "image/logo.png",
88 | "selectedIconPath": "image/logo.active.png",
89 | "text": "关于"
90 | }, {
91 | "pagePath": "page/API/index/index",
92 | "iconPath": "image/profile.png",
93 | "selectedIconPath": "image/profile.active.png",
94 | "text": "我"
95 | }]
96 | },
97 | "networkTimeout": {
98 | "request": 10000,
99 | "connectSocket": 10000,
100 | "uploadFile": 10000,
101 | "downloadFile": 10000
102 | },
103 | "debug": true
104 | }
105 |
--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
1 | 昨天微信小程序(应用号)内测的消息把整个技术社区炸开了锅,
2 | 我也忍不住跟了几波,可惜没有内测资格,听闻破解版出来了,
3 | 今天早上就着原来的项目资源试开发了一下,总结一下体验.
4 |
5 | ## 总体体验
6 |
7 | 1. 开发效率高,6:40左右破解完IDE,7:20左右点做完了首页和导航栏的布局,微信把觉见的布局都做了封装,比传统的前端开发效率高。
8 | 2. 前端可以快速上手:熟练的前端可以很快上手,可能只要一小时读文档的时间加一个官方的例子。
9 | 3. 开发工具难用,很多目录的操作和IDE常见的格式化代码,html配对等功能暂不支持。
10 | 4. 开发限制了很多前端常见的Dom,window操作,开发的灵活度和难度降低。
11 | 5. 我没有内测资格,小程序还不能上传体验,只能下载代码本地体验。
12 |
13 | > 本文代码放在[github](
14 | )
15 |
16 | **上截图**
17 |
18 | 
19 |
20 | 
21 |
22 | ### 相关资源
23 | 1. [破解的IDE](https://github.com/gavinkwoe/weapp-ide-crack)
24 | 2. [开发资源集合](https://github.com/justjavac/awesome-wechat-weapp)
25 |
26 |
27 | ## IDE技术栈:NodeWebkit + React
28 |
29 | 进入的安装目录:微信web开发者工具\package.nw\app
30 | 这个*.nw就能十有八九猜出是NodeWebkit封装的Web应用,
31 | 详看依赖node_modules证实了猜想。
32 | 在package.json "main": "app/html/index.html"定义了入口。
33 |
34 | ### 所有的组件本质是React组件
35 | 在入口中可以看到直接引用了React 和React DOM
36 | 
37 |
38 | ```js
39 | "use strict";
40 | function init() {
41 | tools.Chrome = chrome;
42 | var n = require("../dist/lib/react.js"),
43 | e = require("../dist/lib/react-dom.js"),
44 | i = require("../dist/common/loadInit/init.js"),
45 | o = require("../dist/components/ContainController.js"),
46 | t = require("../dist/common/proxy/startProxy.js"),
47 | r = require("../dist/actions/windowActions.js"),
48 | s = require("../dist/actions/webviewActions.js"),
49 | d = require("../dist/stroes/webviewStores.js"),
50 | u = require("../dist/common/log/log.js"), c = require("../dist/common/shortCut/shortCut.js"), l = global.appConfig.isDev;
51 | //...
52 | }
53 | ```
54 |
55 | 看一下组件Dropdown的定义,这不就是我们熟悉的React在ES5中创建组件的方法吗?
56 | ```js
57 | "use strict";
58 | var React = require("../../lib/react.js"), Dropdown = React.createClass({
59 | displayName: "Dropdown", render: function () {
60 | return React.createElement("div", {className: "dropdown"}, React.createElement("div", {className: "dropdown-item"}, React.createElement("img", {
61 | src: "https://mmrb.github.io/avatar/jf.jpg",
62 | alt: "",
63 | className: "dropdown-item-icon"
64 | }), React.createElement("div", {className: "dropdown-item-info"}, React.createElement("p", null, "公众号名称啦")), React.createElement("div", {className: "dropdown-item-extra"}, React.createElement("img", {
65 | src: "https://mmrb.github.io/avatar/jf.jpg",
66 | alt: "",
67 | className: "dropdown-item-extra-icon"
68 | }))), React.createElement("div", {className: "dropdown-item dropdown-item-active"}, React.createElement("img", {
69 | src: "https://mmrb.github.io/avatar/jf.jpg",
70 | alt: "",
71 | className: "dropdown-item-icon"
72 | }), React.createElement("div", {className: "dropdown-item-info"}, React.createElement("p", null, "公众号名称啦公众号名称啦公众号名称啦"))), React.createElement("div", {className: "dropdown-item"}, React.createElement("img", {
73 | src: "https://mmrb.github.io/avatar/jf.jpg",
74 | alt: "",
75 | className: "dropdown-item-icon"
76 | }), React.createElement("div", {className: "dropdown-item-info"}, React.createElement("p", null, "公众号名称啦"))), React.createElement("div", {className: "dropdown-item"}, React.createElement("img", {
77 | src: "https://mmrb.github.io/avatar/jf.jpg",
78 | alt: "",
79 | className: "dropdown-item-icon"
80 | }), React.createElement("div", {className: "dropdown-item-info"}, React.createElement("p", null, "公众号名称啦"))))
81 | }
82 | });
83 | module.exports = Dropdown;
84 | ```
85 |
86 | ## 微信限制了小程序的包大小
87 |
88 | 同时微信限制了小程序包的大小,为755kb,对缓存和本地文件应该也有控制,这相对原生应用动不动几十兆上百兆的大小来说,绝对是一个亮点,给网上很多人说装微信小程序同样会占用手机存储的人一个响亮的耳光。
89 |
90 | 
91 |
92 |
93 | ## 总结
94 | 总的来说,对前端来说绝对是一个好消息,
95 | 短期内前端待遇可能上涨,但小程序开发门槛较低(比前端的都低),有一部开发人员是面向工资编程,随着开发人员的流动,长期还是会和其它相关的的技术岗持平。
96 | 所以,少年,不要激动,还要是把基础知识打扎实。
--------------------------------------------------------------------------------
/app.wxss:
--------------------------------------------------------------------------------
1 | page {
2 | background-color: #fbf9fe;
3 | height: 100%;
4 | }
5 | .container {
6 | display: flex;
7 | flex-direction: column;
8 | min-height: 100%;
9 | justify-content: space-between;
10 | }
11 | .page-header {
12 | display: flex;
13 | font-size: 32rpx;
14 | color: #aaa;
15 | justify-content: center;
16 | margin-top: 50rpx;
17 | }
18 | .page-header-text {
19 | padding: 20rpx 40rpx;
20 | border-bottom: 1px solid #ccc;
21 | }
22 |
23 | .page-body {
24 | width: 100%;
25 | display: flex;
26 | flex-direction: column;
27 | align-items: center;
28 | flex-grow: 1;
29 | overflow-x: hidden;
30 | }
31 | .page-body-wrapper {
32 | margin-top: 100rpx;
33 | display: flex;
34 | flex-direction: column;
35 | align-items: center;
36 | width: 100%;
37 | }
38 | .page-body-wrapper form {
39 | width: 100%;
40 | }
41 | .page-body-wording {
42 | text-align: center;
43 | padding: 200rpx 100rpx;
44 | }
45 | .page-body-info {
46 | display: flex;
47 | flex-direction: column;
48 | align-items: center;
49 | background-color: #fff;
50 | margin-bottom: 50rpx;
51 | width: 100%;
52 | padding: 50rpx 0 150rpx 0;
53 | }
54 | .page-body-title {
55 | margin-bottom: 100rpx;
56 | font-size: 32rpx;
57 | }
58 | .page-body-text {
59 | font-size: 30rpx;
60 | line-height: 26px;
61 | color: #ccc;
62 | }
63 | .page-body-text-small {
64 | font-size: 24rpx;
65 | color: #000;
66 | margin-bottom: 100rpx;
67 | }
68 | .page-body-form {
69 | width: 100%;
70 | background-color: #fff;
71 | display: flex;
72 | flex-direction: column;
73 | width: 100%;
74 | border: 1px solid #eee;
75 | }
76 | .page-body-form-item {
77 | display: flex;
78 | align-items: center;
79 | margin-left: 10rpx;
80 | border-bottom: 1px solid #eee;
81 | height: 80rpx;
82 | }
83 | .page-body-form-key {
84 | width: 180rpx;
85 | }
86 | .page-body-form-value {
87 | flex-grow: 1;
88 | }
89 |
90 | .page-body-form-picker {
91 | display: flex;
92 | justify-content: space-between;
93 | height: 100rpx;
94 | align-items: center;
95 | font-size: 36rpx;
96 | margin-left: 20rpx;
97 | padding-right: 20rpx;
98 | border-bottom: 1px solid #eee;
99 | }
100 | .page-body-form-picker-value {
101 | color: #ccc;
102 | }
103 |
104 | .page-body-buttons {
105 | width: 100%;
106 | }
107 | .page-body-button {
108 | margin: 25rpx;
109 | }
110 | .page-body-button image {
111 | width: 150rpx;
112 | height: 150rpx;
113 | }
114 | .page-footer {
115 | text-align: center;
116 | color: #1aad19;
117 | font-size: 24rpx;
118 | margin: 20rpx 0;
119 | }
120 |
121 | .green{
122 | color: #09BB07;
123 | }
124 | .red{
125 | color: #F76260;
126 | }
127 | .blue{
128 | color: #10AEFF;
129 | }
130 | .yellow{
131 | color: #FFBE00;
132 | }
133 | .gray{
134 | color: #C9C9C9;
135 | }
136 |
137 | .strong{
138 | font-weight: bold;
139 | }
140 |
141 | .bc_green{
142 | background-color: #09BB07;
143 | }
144 | .bc_red{
145 | background-color: #F76260;
146 | }
147 | .bc_blue{
148 | background-color: #10AEFF;
149 | }
150 | .bc_yellow{
151 | background-color: #FFBE00;
152 | }
153 | .bc_gray{
154 | background-color: #C9C9C9;
155 | }
156 |
157 | .tc{
158 | text-align: center;
159 | }
160 |
161 | .page input{
162 | padding: 10px 15px;
163 | background-color: #fff;
164 | }
165 | checkbox, radio{
166 | margin-right: 5px;
167 | }
168 |
169 | .btn-area{
170 | padding: 0 15px;
171 | }
172 | .btn-area button{
173 | margin-top: 10px;
174 | margin-bottom: 10px;
175 | }
176 |
177 | .page {
178 | min-height: 100%;
179 | flex: 1;
180 | background-color: #FBF9FE;
181 | font-size: 16px;
182 | font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
183 | overflow: hidden;
184 | }
185 | .page__hd{
186 | padding: 40px;
187 | }
188 | .page__title{
189 | display: block;
190 | font-size: 20px;
191 | }
192 | .page__desc{
193 | margin-top: 5px;
194 | font-size: 14px;
195 | color: #888888;
196 | }
197 |
198 | .section{
199 | margin-bottom: 40px;
200 | }
201 | .section_gap{
202 | padding: 0 15px;
203 | }
204 | .section__title{
205 | margin-bottom: 8px;
206 | padding-left: 15px;
207 | padding-right: 15px;
208 | }
209 | .section_gap .section__title{
210 | padding-left: 0;
211 | padding-right: 0;
212 | }
213 | .section__ctn{
214 |
215 | }
216 |
--------------------------------------------------------------------------------
/page/component/index.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | 抬扛
13 | 这是抬扛组件的DEMO。
14 |
15 |
16 |
17 |
18 |
19 |
20 | 内容分区
21 |
22 |
23 |
24 |
25 | view
26 |
27 |
28 |
29 |
30 | scroll-view
31 |
32 |
33 |
34 |
35 | swiper
36 |
37 |
38 |
39 |
40 |
41 |
42 | 内容
43 |
44 |
45 |
46 |
47 | text
48 |
49 |
50 |
51 |
52 | icon
53 |
54 |
55 |
56 |
57 | mask
58 |
59 |
60 |
61 |
62 | toast
63 |
64 |
65 |
66 |
67 | progress
68 |
69 |
70 |
71 |
72 |
73 |
74 | 表单组件
75 |
76 |
77 |
78 |
79 | button
80 |
81 |
82 |
83 |
84 | checkbox
85 |
86 |
87 |
88 |
89 | form
90 |
91 |
92 |
93 |
94 | input
95 |
96 |
97 |
98 |
99 | label
100 |
101 |
102 |
103 |
104 | picker
105 |
106 |
107 |
108 |
109 | radio
110 |
111 |
112 |
113 |
114 | slider
115 |
116 |
117 |
118 |
119 | switch
120 |
121 |
122 |
123 |
124 |
125 |
126 | 交互组件
127 |
128 |
129 |
130 |
131 | action-sheet
132 |
133 |
134 |
135 |
136 | modal
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 | 导航
145 |
146 |
147 |
148 |
149 | navigator
150 |
151 |
152 |
153 |
154 |
155 |
156 | 媒体
157 |
158 |
159 |
160 |
161 |
162 | image
163 |
164 |
165 |
166 |
167 | audio
168 |
169 |
170 |
171 |
172 | video
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
--------------------------------------------------------------------------------