Skip to content

Q
QuickApp_Common
Commit f175f4c6 authored by jyx's avatar jyx
Browse files
Options

代码优化

parent 73a044cb
Show whitespace changes
Inline Side-by-side
Showing with 312 additions and 218 deletions
package.json
View file @ f175f4c6
{ {
"name": "quickapp-test", "name": "goodnews",
"version": "2.0.0", "version": "2.0.0",
"description": "Quickapp Sample Template", "description": "Quickapp Good News",
"scripts": { "scripts": {
"start": "hap server --watch", "start": "hap server --watch",
"server": "hap server", "server": "hap server",
......
src/helper/baiduNews.js 0 → 100644
View file @ f175f4c6
const BAIDU_NEWS_URL_PREFIX = "https://cpu.baidu.com/"
const BAIDU_NEWS_URL_SCID = "97167"
const BAIDU_NEWS_URL_LINKID = "bf846237"
const BAIDU_NEWS_JSON = "{\"tabs\":[\n" +
" {\n" +
" \"name\":\"推荐\",\n" +
" \"id\":1022\n" +
" },\n" +
" {\n" +
" \"name\":\"健康\",\n" +
" \"id\":1043\n" +
" },\n" +
" {\n" +
" \"name\":\"搞笑\",\n" +
" \"id\":1025\n" +
" },\n" +
" {\n" +
" \"name\":\"生活\",\n" +
" \"id\":1035\n" +
" },\n" +
" {\n" +
" \"name\":\"娱乐\",\n" +
" \"id\":1001\n" +
" },\n" +
" {\n" +
" \"name\":\"母婴\",\n" +
" \"id\":1042\n" +
" },\n" +
" {\n" +
" \"name\":\"美女\",\n" +
" \"id\":1024\n" +
" },\n" +
" {\n" +
" \"name\":\"时尚\",\n" +
" \"id\":1009\n" +
" },\n" +
" {\n" +
" \"name\":\"汽车\",\n" +
" \"id\":1007\n" +
" },\n" +
" {\n" +
" \"name\":\"军事\",\n" +
" \"id\":1012\n" +
" },\n" +
" {\n" +
" \"name\":\"体育\",\n" +
" \"id\":1002\n" +
" },\n" +
" {\n" +
" \"name\":\"财经\",\n" +
" \"id\":1006\n" +
" },\n" +
" {\n" +
" \"name\":\"女人\",\n" +
" \"id\":1034\n" +
" },\n" +
" {\n" +
" \"name\":\"游戏\",\n" +
" \"id\":1040\n" +
" },\n" +
" {\n" +
" \"name\":\"科技\",\n" +
" \"id\":1013\n" +
" },\n" +
" {\n" +
" \"name\":\"动漫\",\n" +
" \"id\":1055\n" +
" },\n" +
" {\n" +
" \"name\":\"文化\",\n" +
" \"id\":1036\n" +
" },\n" +
" {\n" +
" \"name\":\"手机\",\n" +
" \"id\":1005\n" +
" },\n" +
" {\n" +
" \"name\":\"房产\",\n" +
" \"id\":1008\n" +
" },\n" +
" {\n" +
" \"name\":\"猎奇\",\n" +
" \"id\":1089\n" +
" },\n" +
" {\n" +
" \"name\":\"旅游\",\n" +
" \"id\":1093\n" +
" },\n" +
" {\n" +
" \"name\":\"本地\",\n" +
" \"id\":1080\n" +
" }\n" +
" ]}"
export function getNewsUrlForId(id) {
return BAIDU_NEWS_URL_PREFIX + id + "/" + BAIDU_NEWS_URL_LINKID + "?scid=" + BAIDU_NEWS_URL_SCID
}
export function getNewsUrlJson() {
let newArr = JSON.parse(BAIDU_NEWS_JSON)
return newArr.tabs
}
\ No newline at end of file
src/manifest.json
View file @ f175f4c6
{ {
"package": "com.example.demo", "package": "com.mints.goodnews",
"name": "demo", "name": "goodnews",
"versionName": "1.0.0", "versionName": "1.0.0",
"versionCode": 1, "versionCode": 1,
"minPlatformVersion": 1070, "minPlatformVersion": 1070,
...@@ -17,6 +17,9 @@ ...@@ -17,6 +17,9 @@
}, },
{ {
"name": "system.fetch" "name": "system.fetch"
},
{
"name": "system.webview"
} }
], ],
"permissions": [ "permissions": [
...@@ -34,16 +37,13 @@ ...@@ -34,16 +37,13 @@
"pages/Home": { "pages/Home": {
"component": "index" "component": "index"
}, },
"pages/Sign": {
"component": "index"
},
"pages/My": { "pages/My": {
"component": "index" "component": "index"
}, },
"pages/News": { "pages/News": {
"component": "index" "component": "index"
}, },
"pages/Login": { "pages/Web": {
"component": "index" "component": "index"
} }
} }
...@@ -53,10 +53,7 @@ ...@@ -53,10 +53,7 @@
"titleBarTextColor": "#414141", "titleBarTextColor": "#414141",
"pages": { "pages": {
"pages/Home": { "pages/Home": {
"titleBarText": "快应用示例模版" "titleBarText": "喜闻"
},
"pages/Sign": {
"titleBarText": ""
}, },
"pages/My": { "pages/My": {
"titleBarText": "" "titleBarText": ""
...@@ -64,7 +61,7 @@ ...@@ -64,7 +61,7 @@
"pages/News": { "pages/News": {
"titleBarText": "" "titleBarText": ""
}, },
"pages/Login": { "pages/Web": {
"titleBarText": "" "titleBarText": ""
} }
} }
......
src/pages/Home/index.ux
View file @ f175f4c6
...@@ -6,13 +6,10 @@ ...@@ -6,13 +6,10 @@
<tabs onchange="changeTabactive" index="{{currentIndex}}"> <tabs onchange="changeTabactive" index="{{currentIndex}}">
<tab-content class="flexible-tab-content"> <tab-content class="flexible-tab-content">
<div class="tab-content-section"> <div class="tab-content-section">
<sign if="{{tabItems[0].render}}"></sign> <news if="{{tabItems[0].render}}"></news>
</div> </div>
<div class="tab-content-section"> <div class="tab-content-section">
<news if="{{tabItems[1].render}}"></news> <my if="{{tabItems[1].render}}"></my>
</div>
<div class="tab-content-section">
<my if="{{tabItems[2].render}}"></my>
</div> </div>
</tab-content> </tab-content>
</tabs> </tabs>
...@@ -28,19 +25,13 @@ ...@@ -28,19 +25,13 @@
onclick="clickTabBar(1)" onclick="clickTabBar(1)"
>{{ tabItems[1].text }}</text >{{ tabItems[1].text }}</text
> >
<text
class="{{currentIndex === 2 ? 'active' : ''}}"
onclick="clickTabBar(2)"
>{{ tabItems[2].text }}</text
>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<import name="sign" src="../Sign/index"></import>
<import name="my" src="../My/index"></import>
<import name="news" src="../News/index"></import> <import name="news" src="../News/index"></import>
<import name="my" src="../My/index"></import>
<script> <script>
import router from '@system.router' import router from '@system.router'
...@@ -49,16 +40,12 @@ export default { ...@@ -49,16 +40,12 @@ export default {
// 页面级组件的数据模型，影响传入数据的覆盖机制：private内定义的属性不允许被覆盖 // 页面级组件的数据模型，影响传入数据的覆盖机制：private内定义的属性不允许被覆盖
private: { private: {
currentIndex: 0, currentIndex: 0,
title: '欢迎体验快应用开发', title: '喜闻',
type: 'content_1', type: 'content_1',
tabItems: [ tabItems: [
{
text: "签到",
render: true
},
{ {
text: "新闻", text: "新闻",
render: false render: true
}, },
{ {
text: "我的", text: "我的",
...@@ -67,7 +54,7 @@ export default { ...@@ -67,7 +54,7 @@ export default {
] ]
}, },
onInit() { onInit() {
this.$page.setTitleBar({ text: '测试' }) this.$page.setTitleBar({ text: '喜闻' })
}, },
changeTabactive(evt) { changeTabactive(evt) {
this.currentIndex = evt.index this.currentIndex = evt.index
...@@ -80,6 +67,9 @@ export default { ...@@ -80,6 +67,9 @@ export default {
router.push({ router.push({
uri: 'ComponentTabs/complex/' + param uri: 'ComponentTabs/complex/' + param
}) })
},
onBackPress() {
console.info(`触发：onBackPress`)
} }
} }
</script> </script>
...@@ -101,7 +91,7 @@ export default { ...@@ -101,7 +91,7 @@ export default {
align-items: center; align-items: center;
text { text {
flex-grow: 1; flex-grow: 1;
height: 100px; height: 80px;
margin: 0 30px; margin: 0 30px;
text-align: center; text-align: center;
border: 0px solid #f1f1f1; border: 0px solid #f1f1f1;
...@@ -121,7 +111,6 @@ export default { ...@@ -121,7 +111,6 @@ export default {
flex: 1; flex: 1;
.tab-content-section { .tab-content-section {
flex: 1; flex: 1;
background-color: #ff0;
justify-content: center; justify-content: center;
} }
} }
......
src/pages/Login/index.ux deleted 100644 → 0
View file @ 73a044cb
<template>
<div class="login-wrapper">
<c-input
label="手机号"
clearable="true"
placeholder="请输入手机号"
type="number"
value="{{phone}}"
class="input-border"
oninput="onInputPhone"
></c-input>
<c-input
label="验证码"
clearable="true"
placeholder="请输入验证码"
type="number"
value="{{smsCode}}"
class="input-border"
oninput="onInputSmsCode"
></c-input>
<text class="login-btn" onclick="login">登录</text>
<q-vcode time="10" onsend="sendHandler" onchange="changeHandler"></q-vcode>
</div>
</template>
<import name="q-vcode" src="qaui/src/components/vcode/index"></import>
<import name="c-input" src="../../Common/Component/CInput/index"></import>
<script>
import { login } from '../../Common/Api/user'
export default {
data() {
return {
phone: '15156975131',
smsCode: '1234'
}
},
onInit() {
this.$page.setTitleBar({ text: '登录' })
},
onInputPhone({ detail: { value } }) {
this.phone = value
},
onInputSmsCode({ detail: { value } }) {
this.smsCode = value
},
login() {
if (this.phone === null || this.phone.length < 11) {
$utils.showToast('手机号长度不能小于11位')
} else if (this.smsCode === null || this.smsCode.length < 4) {
$utils.showToast('验证码长度不能小于4位')
} else {
login(this.phone, this.smsCode)
.then((data) => {
this.$dispatch('success', { data: data })
})
.catch((err) => {
this.$utils.showToast({ message: data })
})
}
},
sendHandler() {
console.log('request for sending verify code!')
},
changeHandler({ detail }) {
console.log('input value', detail.value)
},
}
</script>
<style>
.login-wrapper {
display: flex;
flex-direction: column;
}
.login-tip {
width: 100%;
height: 100px;
text-align: center;
border-bottom-width: 1px;
border-bottom-color: #eeeeee;
}
.input-border {
border-bottom-width: 1px;
border-bottom-color: #eeeeee;
}
.login-btn {
height: 80px;
width: 100%;
text-align: center;
margin-top: 50px;
background-color: #24b9ff;
color: #ffffff;
}
</style>
\ No newline at end of file
src/pages/My/index.ux
View file @ f175f4c6
<template> <template>
<div class="wrapper"> <div class="wrapper">
<text class="title">{{ title }}</text> <div class="item-wrapper" onclick="pricaryAgreement">
<image src="/../src/assets/images/logo.png"></image>
<text onclick="toLogin" class="loginWrapper">登录</text> <text class="text1">隐私协议</text>
<text class="text2">></text>
</div>
<div class="item-wrapper" onclick="registerAgreement">
<image src="/../src/assets/images/logo.png"></image>
<text class="text1">服务协议</text>
<text class="text2">></text>
</div>
</div> </div>
</template> </template>
<script> <script>
import router from '@system.router' import router from '@system.router'
import webview from '@system.webview'
export default { export default {
data: { data: {
title: '我的', title: '我的',
registerUrl: 'http://gms-api.mints-id.com/gm/register.html',
privacyUrl: 'http://gms-api.mints-id.com/gm/privacy.html',
}, },
onInit() {}, onInit() { },
toLogin:function() { pricaryAgreement() {
router.push({ webview.loadUrl({
uri: '/pages/Login' url: this.privacyUrl,
allowthirdpartycookies: true
})
},
registerAgreement() {
webview.loadUrl({
url: this.registerUrl,
allowthirdpartycookies: true
}) })
}, },
} }
</script> </script>
<style> <style lang="less">
.wrapper { .wrapper {
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
justify-content: center; /* justify-content: center; */
align-items: center; /* align-items: center; */
} }
.title { .item-wrapper {
text-align: center; flex-direction: row;
color: #212121; height: 100px;
width: 100%;
padding: 0 25px;
border-bottom: 1px solid #000;
.text1 {
flex: 1;
}
.text2 {
}
} }
.loginWrapper { .loginWrapper {
margin-top: 10px; margin-top: 10px;
......
src/pages/News/index.ux
View file @ f175f4c6
<template> <template>
<div class="wrapper"> <div class="tutorial-page">
<text class="title">{{ title }}</text> <tabs onchange="onChangeTabIndex">
<tab-bar class="tab-bar" mode="scrollable">
<text onclick="jiami" class="title">加密</text> <div class="tab-bar-wrapper" for="{{newsArr}}">
<text onclick="jiemi" class="title">解密</text> <text class="{{currentIndex === $idx ? 'active' : ''}}">{{
$item.name
}}</text>
</div>
</tab-bar>
<tab-content class="tab-content">
<div class="tab-content-section">
<web
id="web"
src="{{url}}"
showloadingdialog="true"
allowthirdpartycookies="{{allow}}"
onpagestart="onPageStart"
></web>
</div>
</tab-content>
</tabs>
</div> </div>
</template> </template>
<script> <script>
import {encrypt,decrypt} from '../../Common/Api/encry/aesUtil.js' import { getNewsUrlForId, getNewsUrlJson } from '../../helper/baiduNews.js'
import md5 from 'crypto-js/md5'
import webview from '@system.webview'
export default { export default {
data: { data: {
title: '新闻' title: '新闻',
url: '',
newsArr: null,
currentIndex: 0,
allow: false
},
onInit() {
this.newsArr = getNewsUrlJson()
this.url = getNewsUrlForId(this.newsArr[0].id)
this.allow = this.allowthirdpartycookies === 'true'
},
onShow() {
},
/**
* 修改列表中对应索引的数据项
* @param index
*/
modifyListItemData(index) {
this.url = getNewsUrlForId(this.newsArr[index].id)
this.newsArr[index].render = true
}, },
onInit() {}, /**
jiami() { * 监听tabs组件index的改变，index默认为0
// console.log(""+md5('你好')) * @param evt
console.log(encrypt('手动佛山东')) */
onChangeTabIndex(evt) {
this.currentIndex = evt.index
this.modifyListItemData(evt.index)
}, },
jiemi() { arrowLeftIcon() {
var str = 'oQD9u2UYqu1+lXxthjc13nOI6k3eiY5UEJ1PJf/rtIfdYlEoXzKNfg6lbrzuR0xD6INijMcRIWqifoaARZZ3/X+7SeLnC3whRAdthyZwk+2D1Zykrif7GqPO0JtpDlezQaPmqxCC3AYEbV9PiQsm3IlgQAitX/ErcRG+p573xmV7Bdh7ogfmz9Fr4wkgzd/XsW08tMCnULjQOn0OXvAeyM5ygrp9aAkBUHwgKZ0Y9syb2PhSKzyiPqfwrYvoQtJD9AmAnIafKg2DPb1IjtgvdsWP+M/AYh24HOr9YfSAITYptG2cOIPyw3A717aPQu6ru99RChkUHqipFt/mTctKMfw//YHxm5XqdzdMf1I0u+DHFHa3uAFbwJ4yeClPWhKYaATgivFFACGuo08ySKQzk6FMsb7SdBdpCepbxlrD5/1TfokW1/DfuF2lSNRZrYxZtz2RSN3OukYLJBFLhirWXD6U6OwW7DKieDYNvOqBYFg14MIM26lahuEWGrAbWWHO2N3EN0pgChQCjVy+bQOsdqraGCuPbPP2gNv81xvK3H/Dy6wXxXPIhkLI0qpnqVO8yvv45Iiw4qzxkitQgo0kzfERzYM2yqmI5dL0N7nZy8slE5v3lLLqEq+wLT62E7NbRO6tEt9Ne9WhmmxfRY2g5MZy26P8DOxpcQSSombmp+YphDK1pu5AmP+EZp4iibWl75S2YdneQK5xie+kr8ftmMO7xcJHpwAsJDTam2CRbAnu0BHu/se/ShcQEsS1OqK0I6h4S2n+tPwKh64qTCgQx1k89l6fL3ulrav7AKDx/lSUsdxKato8pOqhxpiTrh+xzaq1NU5PlTJgH+wcsEEPLKoT16OMnKdunNoNVcXAnIF2CVBmzUFRf6x+4SdnhBMGpy/VLnRxs0MNIbjXYGtB8+IJZSvDfP0Wvr3IhI4lmbpvb34C9gJXtVhMEO0Y51ZGcGqJ/aX6OFDSs6iNKXzBhg==' this.isCanBack()
console.log( decrypt(str))
}, },
isCanBack() {
this.$element('web').canBack({
callback: function (e) {
if (e) {
// 加载历史列表中的上一个 URL
this.$element('web').back()
} else {
router.back()
}
}.bind(this)
})
// 阻止默认行为，等待异步操作
return true
},
onBackPress() {
console.info(`触发：onBackPress`)
return true
},
onPageStart(evt) {
console.info(`### pagestart ### url: ${evt.url} canBack: ${evt.canBack} canForward: ${evt.canForward}`)
}
} }
</script> </script>
<style> <style lang="less">
.wrapper { .tutorial-page {
flex: 1;
background-color: #00ffff;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} .tab-bar {
.title { /* height: 80px; */
background-color: #eeeeee;
}
.tab-bar .tab-bar-wrapper {
/* height: 100%; */
padding: 0 25px;
}
.tab-bar text {
padding: 15px 0;
text-align: center;
font-size: 34px;
}
.tab-bar .active {
color: #0faeff;
border-bottom: 2px solid #0faeff;
}
.tab-content {
flex: 1;
.tab-content-section {
flex: 1;
margin: 10px;
background-color: #ffffff;
justify-content: center;
text {
text-align: center; text-align: center;
color: #212121; color: #ff0000;
}
}
}
} }
</style> </style>
\ No newline at end of file
src/pages/Sign/index.ux deleted 100644 → 0
View file @ 73a044cb
<template>
<div class="wrapper">
<text onclick="click" class="title">{{ title }}</text>
</div>
</template>
<script>
import geolocation from '@system.geolocation'
import vibrator from '@system.vibrator'
export default {
data: {
title: '视频'
},
onInit() { },
click() {
vibrator.vibrate({
mode: 'short'
})
// geolocation.getLocation({
// success: function (data) {
// console.log(
// `handling success: longitude = ${data.longitude}, latitude = ${
// data.latitude
// }`
// )
// },
// fail: function (data, code) {
// console.log(`handling fail, code = ${code}, errorMsg=${data}`)
// }
// })
}
}
</script>
<style>
.wrapper {
flex: 1;
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
text-align: center;
color: #212121;
}
</style>
\ No newline at end of file
src/pages/Web/index.ux 0 → 100644
View file @ f175f4c6
<template>
<div class="wrapper">
<web
id="web"
src="{{url}}"
showloadingdialog="true"
allowthirdpartycookies="{{allow}}"
onpagestart="onPageStart"
></web>
</div>
</template>
<script>
export default {
private: {
title: '欢迎体验快应用开发',
url: '',
allowthirdpartycookies="{{allow}}"
},
onInit() { },
onBackPress() {
console.info(`触发：onBackPress`)
return true
},
}
</script>
<style>
.wrapper {
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
text-align: center;
color: #212121;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment