初始化课件资料和代码
This commit is contained in:
xiejie
commit
02631cf8bb
65
01. 微信小程序快速入门篇/1-1. 初识微信小程序/课件资料/初识微信小程序.md
Normal file
65
01. 微信小程序快速入门篇/1-1. 初识微信小程序/课件资料/初识微信小程序.md
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
# 初识微信小程序
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 小程序的简单介绍
|
||||||
|
|
||||||
|
小程序是在 2017 年 1 月 9 号正式上线的。
|
||||||
|
|
||||||
|
小程序最大的特点是不需要下载安装，“用完即走”。
|
||||||
|
|
||||||
|
在最早期的时候，小程序的诞生没有造成行业的冲击，之后，在 2017 年年底的时候，出现了一个叫做跳一跳的游戏
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
小程序目前一般就应用在一些轻量级别的应用上面，用户没有必要下载，直接通过小程序操作，用完即走。
|
||||||
|
|
||||||
|
- 工具类：嘀嘀打车、美团、打卡
|
||||||
|
- 资讯类：网易新闻、豆瓣
|
||||||
|
- 电商：京东、网易严选、拼多多
|
||||||
|
- 小型游戏：斗地主、头脑风暴
|
||||||
|
|
||||||
|
但是重型的应用就不适合用小程序来做了，王者荣耀、绝地求生..
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 小程序的准备工作
|
||||||
|
|
||||||
|
- [小程序开发指南](https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0008aeea9a8978ab0086a685851c0a)
|
||||||
|
- [微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/framework/)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
首先需要申请一个账号，注意注册的邮箱不要是之前用过的，最好专门拿一个新的邮箱来进行申请。
|
||||||
|
|
||||||
|
申请完账号之后，有一个非常重要的东西，叫做 AppID
|
||||||
|
|
||||||
|
<img src="https://xiejie-typora.oss-cn-chengdu.aliyuncs.com/2023-01-10-075732.png" alt="image-20230110155732169" style="zoom:50%;" />
|
||||||
|
|
||||||
|
进入之后，在【开发】-【开发管理】-【开发设置】下面能够找到自己的 AppID，这个 ID 非常重要，每次我们创建项目的时候，都需要填写这个 ID
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
接下来是安装“微信开发者工具”，前往官网提供的地址，选择操作系统对应的版本，下载安装即可。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 初始化一个小程序的项目
|
||||||
|
|
||||||
|
初始化好一个项目之后，整体的初始目录如下：
|
||||||
|
|
||||||
|
- pages：小程序里面目前所有的页面
|
||||||
|
- pages 里面一个文件夹表示一个页面，展开之后又分为 4 个部分
|
||||||
|
- js：该页面对应的逻辑
|
||||||
|
- json：该页面的一些配置信息
|
||||||
|
- wxml：全称叫做 wei xin markup language，基本上语法就和 html 一样的，只不过不能使用 html 里面的那些标签，使用的是小程序为我们提供的组件，view、text
|
||||||
|
- wxss：全称叫做 wei xin style sheets，负责样式的，基本上就和 css 是一样的
|
||||||
|
- utils：工具目录
|
||||||
|
- .eslintrc.js：eslint 配置文件
|
||||||
|
- app.js：项目的入口 JS 文件
|
||||||
|
- app.json：全局的配置文件，可以配置 tabBar、navigation 等
|
||||||
|
- app.wxsss：全局的 CSS 样式
|
||||||
31
01. 微信小程序快速入门篇/1-1. 初识微信小程序/课堂代码/mini-demo/.eslintrc.js
Normal file
31
01. 微信小程序快速入门篇/1-1. 初识微信小程序/课堂代码/mini-demo/.eslintrc.js
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
/*
|
||||||
|
* Eslint config file
|
||||||
|
* Documentation: https://eslint.org/docs/user-guide/configuring/
|
||||||
|
* Install the Eslint extension before using this feature.
|
||||||
|
*/
|
||||||
|
module.exports = {
|
||||||
|
env: {
|
||||||
|
es6: true,
|
||||||
|
browser: true,
|
||||||
|
node: true,
|
||||||
|
},
|
||||||
|
ecmaFeatures: {
|
||||||
|
modules: true,
|
||||||
|
},
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 2018,
|
||||||
|
sourceType: 'module',
|
||||||
|
},
|
||||||
|
globals: {
|
||||||
|
wx: true,
|
||||||
|
App: true,
|
||||||
|
Page: true,
|
||||||
|
getCurrentPages: true,
|
||||||
|
getApp: true,
|
||||||
|
Component: true,
|
||||||
|
requirePlugin: true,
|
||||||
|
requireMiniProgram: true,
|
||||||
|
},
|
||||||
|
// extends: 'eslint:recommended',
|
||||||
|
rules: {},
|
||||||
|
}
|
||||||
19
01. 微信小程序快速入门篇/1-1. 初识微信小程序/课堂代码/mini-demo/app.js
Normal file
19
01. 微信小程序快速入门篇/1-1. 初识微信小程序/课堂代码/mini-demo/app.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
// app.js
|
||||||
|
App({
|
||||||
|
onLaunch() {
|
||||||
|
// 展示本地存储能力
|
||||||
|
const logs = wx.getStorageSync('logs') || []
|
||||||
|
logs.unshift(Date.now())
|
||||||
|
wx.setStorageSync('logs', logs)
|
||||||
|
|
||||||
|
// 登录
|
||||||
|
wx.login({
|
||||||
|
success: res => {
|
||||||
|
// 发送 res.code 到后台换取 openId, sessionKey, unionId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
globalData: {
|
||||||
|
userInfo: null
|
||||||
|
}
|
||||||
|
})
|
||||||
14
01. 微信小程序快速入门篇/1-1. 初识微信小程序/课堂代码/mini-demo/app.json
Normal file
14
01. 微信小程序快速入门篇/1-1. 初识微信小程序/课堂代码/mini-demo/app.json
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"pages":[
|
||||||
|
"pages/index/index",
|
||||||
|
"pages/logs/logs"
|
||||||
|
],
|
||||||
|
"window":{
|
||||||
|
"backgroundTextStyle":"light",
|
||||||
|
"navigationBarBackgroundColor": "#fff",
|
||||||
|
"navigationBarTitleText": "Hello",
|
||||||
|
"navigationBarTextStyle":"black"
|
||||||
|
},
|
||||||
|
"style": "v2",
|
||||||
|
"sitemapLocation": "sitemap.json"
|
||||||
|
}
|
||||||
10
01. 微信小程序快速入门篇/1-1. 初识微信小程序/课堂代码/mini-demo/app.wxss
Normal file
10
01. 微信小程序快速入门篇/1-1. 初识微信小程序/课堂代码/mini-demo/app.wxss
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
/**app.wxss**/
|
||||||
|
.container {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 200rpx 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
// index.js
|
||||||
|
// 获取应用实例
|
||||||
|
const app = getApp()
|
||||||
|
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
motto: 'Hello World',
|
||||||
|
userInfo: {},
|
||||||
|
hasUserInfo: false,
|
||||||
|
canIUse: wx.canIUse('button.open-type.getUserInfo'),
|
||||||
|
canIUseGetUserProfile: false,
|
||||||
|
canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
|
||||||
|
},
|
||||||
|
// 事件处理函数
|
||||||
|
bindViewTap() {
|
||||||
|
wx.navigateTo({
|
||||||
|
url: '../logs/logs'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
if (wx.getUserProfile) {
|
||||||
|
this.setData({
|
||||||
|
canIUseGetUserProfile: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getUserProfile(e) {
|
||||||
|
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
|
||||||
|
wx.getUserProfile({
|
||||||
|
desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
|
||||||
|
success: (res) => {
|
||||||
|
console.log(res)
|
||||||
|
this.setData({
|
||||||
|
userInfo: res.userInfo,
|
||||||
|
hasUserInfo: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getUserInfo(e) {
|
||||||
|
// 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
|
||||||
|
console.log(e)
|
||||||
|
this.setData({
|
||||||
|
userInfo: e.detail.userInfo,
|
||||||
|
hasUserInfo: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"usingComponents": {}
|
||||||
|
}
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
<!--index.wxml-->
|
||||||
|
<view class="container">
|
||||||
|
<view class="userinfo">
|
||||||
|
<block wx:if="{{canIUseOpenData}}">
|
||||||
|
<view class="userinfo-avatar" bindtap="bindViewTap">
|
||||||
|
<open-data type="userAvatarUrl"></open-data>
|
||||||
|
</view>
|
||||||
|
<open-data type="userNickName"></open-data>
|
||||||
|
</block>
|
||||||
|
<block wx:elif="{{!hasUserInfo}}">
|
||||||
|
<button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
|
||||||
|
<button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
|
||||||
|
<view wx:else> 请使用1.4.4及以上版本基础库 </view>
|
||||||
|
</block>
|
||||||
|
<block wx:else>
|
||||||
|
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
|
||||||
|
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<view class="usermotto">
|
||||||
|
<text class="user-motto">{{motto}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
/**index.wxss**/
|
||||||
|
.userinfo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userinfo-avatar {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 128rpx;
|
||||||
|
height: 128rpx;
|
||||||
|
margin: 20rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.usermotto {
|
||||||
|
margin-top: 200px;
|
||||||
|
}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
// logs.js
|
||||||
|
const util = require('../../utils/util.js')
|
||||||
|
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
logs: []
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.setData({
|
||||||
|
logs: (wx.getStorageSync('logs') || []).map(log => {
|
||||||
|
return {
|
||||||
|
date: util.formatTime(new Date(log)),
|
||||||
|
timeStamp: log
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"navigationBarTitleText": "查看启动日志",
|
||||||
|
"usingComponents": {}
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<!--logs.wxml-->
|
||||||
|
<view class="container log-list">
|
||||||
|
<block wx:for="{{logs}}" wx:key="timeStamp" wx:for-item="log">
|
||||||
|
<text class="log-item">{{index + 1}}. {{log.date}}</text>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
.log-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 40rpx;
|
||||||
|
}
|
||||||
|
.log-item {
|
||||||
|
margin: 10rpx;
|
||||||
|
}
|
||||||
@ -0,0 +1,51 @@
|
|||||||
|
{
|
||||||
|
"description": "项目配置文件",
|
||||||
|
"packOptions": {
|
||||||
|
"ignore": [],
|
||||||
|
"include": []
|
||||||
|
},
|
||||||
|
"setting": {
|
||||||
|
"bundle": false,
|
||||||
|
"userConfirmedBundleSwitch": false,
|
||||||
|
"urlCheck": true,
|
||||||
|
"scopeDataCheck": false,
|
||||||
|
"coverView": true,
|
||||||
|
"es6": true,
|
||||||
|
"postcss": true,
|
||||||
|
"compileHotReLoad": false,
|
||||||
|
"lazyloadPlaceholderEnable": false,
|
||||||
|
"preloadBackgroundData": false,
|
||||||
|
"minified": true,
|
||||||
|
"autoAudits": false,
|
||||||
|
"newFeature": false,
|
||||||
|
"uglifyFileName": false,
|
||||||
|
"uploadWithSourceMap": true,
|
||||||
|
"useIsolateContext": true,
|
||||||
|
"nodeModules": false,
|
||||||
|
"enhance": true,
|
||||||
|
"useMultiFrameRuntime": true,
|
||||||
|
"useApiHook": true,
|
||||||
|
"useApiHostProcess": true,
|
||||||
|
"showShadowRootInWxmlPanel": true,
|
||||||
|
"packNpmManually": false,
|
||||||
|
"enableEngineNative": false,
|
||||||
|
"packNpmRelationList": [],
|
||||||
|
"minifyWXSS": true,
|
||||||
|
"showES6CompileOption": false,
|
||||||
|
"minifyWXML": true,
|
||||||
|
"babelSetting": {
|
||||||
|
"ignore": [],
|
||||||
|
"disablePlugins": [],
|
||||||
|
"outputPath": ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"compileType": "miniprogram",
|
||||||
|
"libVersion": "2.19.4",
|
||||||
|
"appid": "wx54ae0faaf2778fc5",
|
||||||
|
"projectname": "miniprogram-92",
|
||||||
|
"condition": {},
|
||||||
|
"editorSetting": {
|
||||||
|
"tabIndent": "insertSpaces",
|
||||||
|
"tabSize": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
|
||||||
|
"projectname": "mini-demo",
|
||||||
|
"setting": {
|
||||||
|
"compileHotReLoad": true
|
||||||
|
}
|
||||||
|
}
|
||||||
7
01. 微信小程序快速入门篇/1-1. 初识微信小程序/课堂代码/mini-demo/sitemap.json
Normal file
7
01. 微信小程序快速入门篇/1-1. 初识微信小程序/课堂代码/mini-demo/sitemap.json
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
|
||||||
|
"rules": [{
|
||||||
|
"action": "allow",
|
||||||
|
"page": "*"
|
||||||
|
}]
|
||||||
|
}
|
||||||
19
01. 微信小程序快速入门篇/1-1. 初识微信小程序/课堂代码/mini-demo/utils/util.js
Normal file
19
01. 微信小程序快速入门篇/1-1. 初识微信小程序/课堂代码/mini-demo/utils/util.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
const formatTime = date => {
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = date.getMonth() + 1
|
||||||
|
const day = date.getDate()
|
||||||
|
const hour = date.getHours()
|
||||||
|
const minute = date.getMinutes()
|
||||||
|
const second = date.getSeconds()
|
||||||
|
|
||||||
|
return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatNumber = n => {
|
||||||
|
n = n.toString()
|
||||||
|
return n[1] ? n : `0${n}`
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
formatTime
|
||||||
|
}
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
/*
|
||||||
|
* Eslint config file
|
||||||
|
* Documentation: https://eslint.org/docs/user-guide/configuring/
|
||||||
|
* Install the Eslint extension before using this feature.
|
||||||
|
*/
|
||||||
|
module.exports = {
|
||||||
|
env: {
|
||||||
|
es6: true,
|
||||||
|
browser: true,
|
||||||
|
node: true,
|
||||||
|
},
|
||||||
|
ecmaFeatures: {
|
||||||
|
modules: true,
|
||||||
|
},
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 2018,
|
||||||
|
sourceType: 'module',
|
||||||
|
},
|
||||||
|
globals: {
|
||||||
|
wx: true,
|
||||||
|
App: true,
|
||||||
|
Page: true,
|
||||||
|
getCurrentPages: true,
|
||||||
|
getApp: true,
|
||||||
|
Component: true,
|
||||||
|
requirePlugin: true,
|
||||||
|
requireMiniProgram: true,
|
||||||
|
},
|
||||||
|
// extends: 'eslint:recommended',
|
||||||
|
rules: {},
|
||||||
|
}
|
||||||
26
01. 微信小程序快速入门篇/1-10. 翻译小程序结构与样式/课堂代码/translate-demo/app.js
Normal file
26
01. 微信小程序快速入门篇/1-10. 翻译小程序结构与样式/课堂代码/translate-demo/app.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
// app.js
|
||||||
|
App({
|
||||||
|
onLaunch() {
|
||||||
|
},
|
||||||
|
// 全局的数据，所有页面都可以使用这个数据
|
||||||
|
globalData: {
|
||||||
|
// 所有语言的语言列表
|
||||||
|
lanList : [
|
||||||
|
{'chs': '英文','lang': 'en',"index": 0},
|
||||||
|
{'chs': '中文','lang': 'zh',"index": 1},
|
||||||
|
{'chs': '日语','lang': 'jp',"index": 2},
|
||||||
|
{'chs': '韩语','lang': 'kor',"index": 3},
|
||||||
|
{'chs': '法语','lang': 'fra',"index": 4},
|
||||||
|
{'chs': '德语','lang': 'de',"index": 5},
|
||||||
|
{'chs': '俄语','lang': 'ru',"index": 6},
|
||||||
|
{'chs': '泰语','lang': 'th',"index": 7},
|
||||||
|
{'chs': '西班牙语','lang': 'spa',"index": 8},
|
||||||
|
{'chs': '阿拉伯语','lang': 'ara',"index": 9},
|
||||||
|
{'chs': '意大利语','lang': 'it',"index": 10},
|
||||||
|
{'chs': '葡萄牙语','lang': 'pt',"index": 11},
|
||||||
|
{'chs': '荷兰语','lang': 'nl', 'index':12}
|
||||||
|
],
|
||||||
|
// 当前默认是什么语言，默认设置为英语
|
||||||
|
curLan : {'chs': '英文','lang': 'en',"index": 0}
|
||||||
|
}
|
||||||
|
})
|
||||||
33
01. 微信小程序快速入门篇/1-10. 翻译小程序结构与样式/课堂代码/translate-demo/app.json
Normal file
33
01. 微信小程序快速入门篇/1-10. 翻译小程序结构与样式/课堂代码/translate-demo/app.json
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
{
|
||||||
|
"pages":[
|
||||||
|
"pages/index/index",
|
||||||
|
"pages/change/change",
|
||||||
|
"pages/history/history"
|
||||||
|
],
|
||||||
|
"window":{
|
||||||
|
"backgroundTextStyle":"light",
|
||||||
|
"navigationBarBackgroundColor": "#4b3c96",
|
||||||
|
"navigationBarTitleText": "小度翻译",
|
||||||
|
"navigationBarTextStyle":"white",
|
||||||
|
"backgroundColor": "#4b3c96"
|
||||||
|
},
|
||||||
|
"tabBar": {
|
||||||
|
"borderStyle": "white",
|
||||||
|
"position": "bottom",
|
||||||
|
"color": "#bfbfbf",
|
||||||
|
"selectedColor": "#1c1b21",
|
||||||
|
"list": [{
|
||||||
|
"pagePath": "pages/index/index",
|
||||||
|
"text": "翻译",
|
||||||
|
"iconPath": "imgs/icon-1.png",
|
||||||
|
"selectedIconPath": "imgs/sel-icon-1.png"
|
||||||
|
},{
|
||||||
|
"pagePath": "pages/history/history",
|
||||||
|
"text": "历史",
|
||||||
|
"iconPath": "imgs/icon-2.png",
|
||||||
|
"selectedIconPath": "imgs/sel-icon-2.png"
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
"style": "v2",
|
||||||
|
"sitemapLocation": "sitemap.json"
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
@import "./assets/iconfont/iconfont.wxss";
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
@font-face {font-family: "iconfont";
|
||||||
|
src: url('https://at.alicdn.com/t/font_811118_f7oh8iao9yd.ttf') format('truetype')
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family:"iconfont" !important;
|
||||||
|
font-size:16px;
|
||||||
|
font-style:normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-down:before { content: "\e600"; }
|
||||||
|
|
||||||
|
.icon-close:before { content: "\e78f"; }
|
||||||
|
|
||||||
|
.icon-arrow-right:before { content: "\e682"; }
|
||||||
|
|
||||||
|
.icon-duihao:before { content: "\e601"; }
|
||||||
|
|
||||||
|
.icon-right:before { content: "\e790"; }
|
||||||
BIN
01. 微信小程序快速入门篇/1-10. 翻译小程序结构与样式/课堂代码/translate-demo/imgs/icon-1.png
Executable file
BIN
01. 微信小程序快速入门篇/1-10. 翻译小程序结构与样式/课堂代码/translate-demo/imgs/icon-1.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
01. 微信小程序快速入门篇/1-10. 翻译小程序结构与样式/课堂代码/translate-demo/imgs/icon-2.png
Executable file
BIN
01. 微信小程序快速入门篇/1-10. 翻译小程序结构与样式/课堂代码/translate-demo/imgs/icon-2.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
01. 微信小程序快速入门篇/1-10. 翻译小程序结构与样式/课堂代码/translate-demo/imgs/sel-icon-1.png
Executable file
BIN
01. 微信小程序快速入门篇/1-10. 翻译小程序结构与样式/课堂代码/translate-demo/imgs/sel-icon-1.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
01. 微信小程序快速入门篇/1-10. 翻译小程序结构与样式/课堂代码/translate-demo/imgs/sel-icon-2.png
Executable file
BIN
01. 微信小程序快速入门篇/1-10. 翻译小程序结构与样式/课堂代码/translate-demo/imgs/sel-icon-2.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,7 @@
|
|||||||
|
const app = getApp(); // 获取实例
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
lanList : app.globalData.lanList, // 从全局获取所有的语言
|
||||||
|
curLanIndex : app.globalData.curLan.index// 当前语言的索引
|
||||||
|
},
|
||||||
|
})
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"usingComponents": {}
|
||||||
|
}
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<!-- 一项一项的语言 -->
|
||||||
|
<view
|
||||||
|
class="container"
|
||||||
|
wx:for="{{lanList}}"
|
||||||
|
wx:key="this"
|
||||||
|
data-id="{{index}}"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
wx:if="{{curLanIndex === index}}"
|
||||||
|
>
|
||||||
|
{{item.chs}}
|
||||||
|
<text class="select iconfont icon-duihao"></text>
|
||||||
|
</view>
|
||||||
|
<view wx:else>
|
||||||
|
{{item.chs}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
.container{
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
line-height: 80rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #8995a1;
|
||||||
|
text-indent: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select{
|
||||||
|
float: right;
|
||||||
|
margin-right: 40rpx;
|
||||||
|
}
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
// pages/history/history.js
|
||||||
|
Page({
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 页面的初始数据
|
||||||
|
*/
|
||||||
|
data: {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生命周期函数--监听页面加载
|
||||||
|
*/
|
||||||
|
onLoad(options) {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生命周期函数--监听页面初次渲染完成
|
||||||
|
*/
|
||||||
|
onReady() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生命周期函数--监听页面显示
|
||||||
|
*/
|
||||||
|
onShow() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生命周期函数--监听页面隐藏
|
||||||
|
*/
|
||||||
|
onHide() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生命周期函数--监听页面卸载
|
||||||
|
*/
|
||||||
|
onUnload() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 页面相关事件处理函数--监听用户下拉动作
|
||||||
|
*/
|
||||||
|
onPullDownRefresh() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 页面上拉触底事件的处理函数
|
||||||
|
*/
|
||||||
|
onReachBottom() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 用户点击右上角分享
|
||||||
|
*/
|
||||||
|
onShareAppMessage() {
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"usingComponents": {}
|
||||||
|
}
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
<scroll-view class="container">
|
||||||
|
<!-- 头部 -->
|
||||||
|
<view class="header">
|
||||||
|
<text>翻译历史</text>
|
||||||
|
<text class="iconfont icon-close">清除历史记录</text>
|
||||||
|
</view>
|
||||||
|
<!-- 历史记录 -->
|
||||||
|
<view class="list">
|
||||||
|
<view class="item">
|
||||||
|
<view>你好</view>
|
||||||
|
<view>Hello</view>
|
||||||
|
</view>
|
||||||
|
<view class="item">
|
||||||
|
<view>你好</view>
|
||||||
|
<view>Hello</view>
|
||||||
|
</view>
|
||||||
|
<view class="item">
|
||||||
|
<view>你好</view>
|
||||||
|
<view>Hello</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
.container{
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 100rpx;
|
||||||
|
line-height: 100rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header text{
|
||||||
|
margin: 0 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .icon-close{
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item{
|
||||||
|
margin: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item view{
|
||||||
|
margin: 5rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item view:nth-child(2){
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
const app = getApp()
|
||||||
|
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
|
||||||
|
},
|
||||||
|
// 跳转到选择语言
|
||||||
|
goToChange(){
|
||||||
|
wx.navigateTo({
|
||||||
|
url: '/pages/change/change',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"usingComponents": {}
|
||||||
|
}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<!-- 最外层容器 -->
|
||||||
|
<view class="container">
|
||||||
|
<!-- 目标语言的选择 -->
|
||||||
|
<view class="lanSelectContainer">
|
||||||
|
<text bindtap="goToChange">翻译成英语</text>
|
||||||
|
<text class="iconfont icon-down"></text>
|
||||||
|
</view>
|
||||||
|
<!-- 文本输入框 -->
|
||||||
|
<view class="tranlateTxt">
|
||||||
|
<textarea
|
||||||
|
placeholder="请输入您要翻译的文本"
|
||||||
|
></textarea>
|
||||||
|
</view>
|
||||||
|
<!-- 翻译结果 -->
|
||||||
|
<view class="resultTxt">
|
||||||
|
<view>译文</view>
|
||||||
|
<view class="content">Hello</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
.lanSelectContainer{
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #f7f7fa;
|
||||||
|
text-indent: 20rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #8995a1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lanSelectContainer .icon-down{
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tranlateTxt{
|
||||||
|
width: 100%;
|
||||||
|
height: 400rpx;
|
||||||
|
border-bottom: 1rpx solid #8995a1;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tranlateTxt textarea{
|
||||||
|
margin: 30rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resultTxt{
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #8995a1;
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
margin-top: 10rpx;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
@ -0,0 +1,51 @@
|
|||||||
|
{
|
||||||
|
"description": "项目配置文件",
|
||||||
|
"packOptions": {
|
||||||
|
"ignore": [],
|
||||||
|
"include": []
|
||||||
|
},
|
||||||
|
"setting": {
|
||||||
|
"bundle": false,
|
||||||
|
"userConfirmedBundleSwitch": false,
|
||||||
|
"urlCheck": true,
|
||||||
|
"scopeDataCheck": false,
|
||||||
|
"coverView": true,
|
||||||
|
"es6": true,
|
||||||
|
"postcss": true,
|
||||||
|
"compileHotReLoad": false,
|
||||||
|
"lazyloadPlaceholderEnable": false,
|
||||||
|
"preloadBackgroundData": false,
|
||||||
|
"minified": true,
|
||||||
|
"autoAudits": false,
|
||||||
|
"newFeature": false,
|
||||||
|
"uglifyFileName": false,
|
||||||
|
"uploadWithSourceMap": true,
|
||||||
|
"useIsolateContext": true,
|
||||||
|
"nodeModules": false,
|
||||||
|
"enhance": true,
|
||||||
|
"useMultiFrameRuntime": true,
|
||||||
|
"useApiHook": true,
|
||||||
|
"useApiHostProcess": true,
|
||||||
|
"showShadowRootInWxmlPanel": true,
|
||||||
|
"packNpmManually": false,
|
||||||
|
"enableEngineNative": false,
|
||||||
|
"packNpmRelationList": [],
|
||||||
|
"minifyWXSS": true,
|
||||||
|
"showES6CompileOption": false,
|
||||||
|
"minifyWXML": true,
|
||||||
|
"babelSetting": {
|
||||||
|
"ignore": [],
|
||||||
|
"disablePlugins": [],
|
||||||
|
"outputPath": ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"compileType": "miniprogram",
|
||||||
|
"libVersion": "2.19.4",
|
||||||
|
"appid": "wx54ae0faaf2778fc5",
|
||||||
|
"projectname": "miniprogram-92",
|
||||||
|
"condition": {},
|
||||||
|
"editorSetting": {
|
||||||
|
"tabIndent": "insertSpaces",
|
||||||
|
"tabSize": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
|
||||||
|
"projectname": "translate-demo",
|
||||||
|
"setting": {
|
||||||
|
"compileHotReLoad": true
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
|
||||||
|
"rules": [{
|
||||||
|
"action": "allow",
|
||||||
|
"page": "*"
|
||||||
|
}]
|
||||||
|
}
|
||||||
1
01. 微信小程序快速入门篇/1-10. 翻译小程序结构与样式/课堂代码/translate-demo/utils/md5.min.js
vendored
Executable file
1
01. 微信小程序快速入门篇/1-10. 翻译小程序结构与样式/课堂代码/translate-demo/utils/md5.min.js
vendored
Executable file
@ -0,0 +1 @@
|
|||||||
|
!function (n) { "use strict"; function t(n, t) { var r = (65535 & n) + (65535 & t); return (n >> 16) + (t >> 16) + (r >> 16) << 16 | 65535 & r } function r(n, t) { return n << t | n >>> 32 - t } function e(n, e, o, u, c, f) { return t(r(t(t(e, n), t(u, f)), c), o) } function o(n, t, r, o, u, c, f) { return e(t & r | ~t & o, n, t, u, c, f) } function u(n, t, r, o, u, c, f) { return e(t & o | r & ~o, n, t, u, c, f) } function c(n, t, r, o, u, c, f) { return e(t ^ r ^ o, n, t, u, c, f) } function f(n, t, r, o, u, c, f) { return e(r ^ (t | ~o), n, t, u, c, f) } function i(n, r) { n[r >> 5] |= 128 << r % 32, n[14 + (r + 64 >>> 9 << 4)] = r; var e, i, a, d, h, l = 1732584193, g = -271733879, v = -1732584194, m = 271733878; for (e = 0; e < n.length; e += 16)i = l, a = g, d = v, h = m, g = f(g = f(g = f(g = f(g = c(g = c(g = c(g = c(g = u(g = u(g = u(g = u(g = o(g = o(g = o(g = o(g, v = o(v, m = o(m, l = o(l, g, v, m, n[e], 7, -680876936), g, v, n[e + 1], 12, -389564586), l, g, n[e + 2], 17, 606105819), m, l, n[e + 3], 22, -1044525330), v = o(v, m = o(m, l = o(l, g, v, m, n[e + 4], 7, -176418897), g, v, n[e + 5], 12, 1200080426), l, g, n[e + 6], 17, -1473231341), m, l, n[e + 7], 22, -45705983), v = o(v, m = o(m, l = o(l, g, v, m, n[e + 8], 7, 1770035416), g, v, n[e + 9], 12, -1958414417), l, g, n[e + 10], 17, -42063), m, l, n[e + 11], 22, -1990404162), v = o(v, m = o(m, l = o(l, g, v, m, n[e + 12], 7, 1804603682), g, v, n[e + 13], 12, -40341101), l, g, n[e + 14], 17, -1502002290), m, l, n[e + 15], 22, 1236535329), v = u(v, m = u(m, l = u(l, g, v, m, n[e + 1], 5, -165796510), g, v, n[e + 6], 9, -1069501632), l, g, n[e + 11], 14, 643717713), m, l, n[e], 20, -373897302), v = u(v, m = u(m, l = u(l, g, v, m, n[e + 5], 5, -701558691), g, v, n[e + 10], 9, 38016083), l, g, n[e + 15], 14, -660478335), m, l, n[e + 4], 20, -405537848), v = u(v, m = u(m, l = u(l, g, v, m, n[e + 9], 5, 568446438), g, v, n[e + 14], 9, -1019803690), l, g, n[e + 3], 14, -187363961), m, l, n[e + 8], 20, 1163531501), v = u(v, m = u(m, l = u(l, g, v, m, n[e + 13], 5, -1444681467), g, v, n[e + 2], 9, -51403784), l, g, n[e + 7], 14, 1735328473), m, l, n[e + 12], 20, -1926607734), v = c(v, m = c(m, l = c(l, g, v, m, n[e + 5], 4, -378558), g, v, n[e + 8], 11, -2022574463), l, g, n[e + 11], 16, 1839030562), m, l, n[e + 14], 23, -35309556), v = c(v, m = c(m, l = c(l, g, v, m, n[e + 1], 4, -1530992060), g, v, n[e + 4], 11, 1272893353), l, g, n[e + 7], 16, -155497632), m, l, n[e + 10], 23, -1094730640), v = c(v, m = c(m, l = c(l, g, v, m, n[e + 13], 4, 681279174), g, v, n[e], 11, -358537222), l, g, n[e + 3], 16, -722521979), m, l, n[e + 6], 23, 76029189), v = c(v, m = c(m, l = c(l, g, v, m, n[e + 9], 4, -640364487), g, v, n[e + 12], 11, -421815835), l, g, n[e + 15], 16, 530742520), m, l, n[e + 2], 23, -995338651), v = f(v, m = f(m, l = f(l, g, v, m, n[e], 6, -198630844), g, v, n[e + 7], 10, 1126891415), l, g, n[e + 14], 15, -1416354905), m, l, n[e + 5], 21, -57434055), v = f(v, m = f(m, l = f(l, g, v, m, n[e + 12], 6, 1700485571), g, v, n[e + 3], 10, -1894986606), l, g, n[e + 10], 15, -1051523), m, l, n[e + 1], 21, -2054922799), v = f(v, m = f(m, l = f(l, g, v, m, n[e + 8], 6, 1873313359), g, v, n[e + 15], 10, -30611744), l, g, n[e + 6], 15, -1560198380), m, l, n[e + 13], 21, 1309151649), v = f(v, m = f(m, l = f(l, g, v, m, n[e + 4], 6, -145523070), g, v, n[e + 11], 10, -1120210379), l, g, n[e + 2], 15, 718787259), m, l, n[e + 9], 21, -343485551), l = t(l, i), g = t(g, a), v = t(v, d), m = t(m, h); return [l, g, v, m] } function a(n) { var t, r = "", e = 32 * n.length; for (t = 0; t < e; t += 8)r += String.fromCharCode(n[t >> 5] >>> t % 32 & 255); return r } function d(n) { var t, r = []; for (r[(n.length >> 2) - 1] = void 0, t = 0; t < r.length; t += 1)r[t] = 0; var e = 8 * n.length; for (t = 0; t < e; t += 8)r[t >> 5] |= (255 & n.charCodeAt(t / 8)) << t % 32; return r } function h(n) { return a(i(d(n), 8 * n.length)) } function l(n, t) { var r, e, o = d(n), u = [], c = []; for (u[15] = c[15] = void 0, o.length > 16 && (o = i(o, 8 * n.length)), r = 0; r < 16; r += 1)u[r] = 909522486 ^ o[r], c[r] = 1549556828 ^ o[r]; return e = i(u.concat(d(t)), 512 + 8 * t.length), a(i(c.concat(e), 640)) } function g(n) { var t, r, e = ""; for (r = 0; r < n.length; r += 1)t = n.charCodeAt(r), e += "0123456789abcdef".charAt(t >>> 4 & 15) + "0123456789abcdef".charAt(15 & t); return e } function v(n) { return unescape(encodeURIComponent(n)) } function m(n) { return h(v(n)) } function p(n) { return g(m(n)) } function s(n, t) { return l(v(n), v(t)) } function C(n, t) { return g(s(n, t)) } function A(n, t, r) { return t ? r ? s(t, n) : C(t, n) : r ? m(n) : p(n) } "function" == typeof define && define.amd ? define(function () { return A }) : "object" == typeof module && module.exports ? module.exports = A : n.md5 = A }(this);
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
const formatTime = date => {
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = date.getMonth() + 1
|
||||||
|
const day = date.getDate()
|
||||||
|
const hour = date.getHours()
|
||||||
|
const minute = date.getMinutes()
|
||||||
|
const second = date.getSeconds()
|
||||||
|
|
||||||
|
return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatNumber = n => {
|
||||||
|
n = n.toString()
|
||||||
|
return n[1] ? n : `0${n}`
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
formatTime
|
||||||
|
}
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
/*
|
||||||
|
* Eslint config file
|
||||||
|
* Documentation: https://eslint.org/docs/user-guide/configuring/
|
||||||
|
* Install the Eslint extension before using this feature.
|
||||||
|
*/
|
||||||
|
module.exports = {
|
||||||
|
env: {
|
||||||
|
es6: true,
|
||||||
|
browser: true,
|
||||||
|
node: true,
|
||||||
|
},
|
||||||
|
ecmaFeatures: {
|
||||||
|
modules: true,
|
||||||
|
},
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 2018,
|
||||||
|
sourceType: 'module',
|
||||||
|
},
|
||||||
|
globals: {
|
||||||
|
wx: true,
|
||||||
|
App: true,
|
||||||
|
Page: true,
|
||||||
|
getCurrentPages: true,
|
||||||
|
getApp: true,
|
||||||
|
Component: true,
|
||||||
|
requirePlugin: true,
|
||||||
|
requireMiniProgram: true,
|
||||||
|
},
|
||||||
|
// extends: 'eslint:recommended',
|
||||||
|
rules: {},
|
||||||
|
}
|
||||||
36
01. 微信小程序快速入门篇/1-11. 翻译小程序功能实现/课堂代码/translate-demo/app.js
Normal file
36
01. 微信小程序快速入门篇/1-11. 翻译小程序功能实现/课堂代码/translate-demo/app.js
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
// app.js
|
||||||
|
App({
|
||||||
|
onLaunch() {
|
||||||
|
// 一开始启动应用的时候，拿出本地缓存进行加载
|
||||||
|
wx.getStorage({
|
||||||
|
key : "history",
|
||||||
|
success:(res)=>{
|
||||||
|
// 我们需要将其赋值给 globalData 里面的 history
|
||||||
|
this.globalData.history = res.data;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 全局的数据，所有页面都可以使用这个数据
|
||||||
|
globalData: {
|
||||||
|
// 所有语言的语言列表
|
||||||
|
lanList : [
|
||||||
|
{'chs': '英文','lang': 'en',"index": 0},
|
||||||
|
{'chs': '中文','lang': 'zh',"index": 1},
|
||||||
|
{'chs': '日语','lang': 'jp',"index": 2},
|
||||||
|
{'chs': '韩语','lang': 'kor',"index": 3},
|
||||||
|
{'chs': '法语','lang': 'fra',"index": 4},
|
||||||
|
{'chs': '德语','lang': 'de',"index": 5},
|
||||||
|
{'chs': '俄语','lang': 'ru',"index": 6},
|
||||||
|
{'chs': '泰语','lang': 'th',"index": 7},
|
||||||
|
{'chs': '西班牙语','lang': 'spa',"index": 8},
|
||||||
|
{'chs': '阿拉伯语','lang': 'ara',"index": 9},
|
||||||
|
{'chs': '意大利语','lang': 'it',"index": 10},
|
||||||
|
{'chs': '葡萄牙语','lang': 'pt',"index": 11},
|
||||||
|
{'chs': '荷兰语','lang': 'nl', 'index':12}
|
||||||
|
],
|
||||||
|
// 当前默认是什么语言，默认设置为英语
|
||||||
|
curLan : {'chs': '英文','lang': 'en',"index": 0},
|
||||||
|
// 历史记录
|
||||||
|
history : []
|
||||||
|
}
|
||||||
|
})
|
||||||
33
01. 微信小程序快速入门篇/1-11. 翻译小程序功能实现/课堂代码/translate-demo/app.json
Normal file
33
01. 微信小程序快速入门篇/1-11. 翻译小程序功能实现/课堂代码/translate-demo/app.json
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
{
|
||||||
|
"pages":[
|
||||||
|
"pages/index/index",
|
||||||
|
"pages/change/change",
|
||||||
|
"pages/history/history"
|
||||||
|
],
|
||||||
|
"window":{
|
||||||
|
"backgroundTextStyle":"light",
|
||||||
|
"navigationBarBackgroundColor": "#4b3c96",
|
||||||
|
"navigationBarTitleText": "小度翻译",
|
||||||
|
"navigationBarTextStyle":"white",
|
||||||
|
"backgroundColor": "#4b3c96"
|
||||||
|
},
|
||||||
|
"tabBar": {
|
||||||
|
"borderStyle": "white",
|
||||||
|
"position": "bottom",
|
||||||
|
"color": "#bfbfbf",
|
||||||
|
"selectedColor": "#1c1b21",
|
||||||
|
"list": [{
|
||||||
|
"pagePath": "pages/index/index",
|
||||||
|
"text": "翻译",
|
||||||
|
"iconPath": "imgs/icon-1.png",
|
||||||
|
"selectedIconPath": "imgs/sel-icon-1.png"
|
||||||
|
},{
|
||||||
|
"pagePath": "pages/history/history",
|
||||||
|
"text": "历史",
|
||||||
|
"iconPath": "imgs/icon-2.png",
|
||||||
|
"selectedIconPath": "imgs/sel-icon-2.png"
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
"style": "v2",
|
||||||
|
"sitemapLocation": "sitemap.json"
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
@import "./assets/iconfont/iconfont.wxss";
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
@font-face {font-family: "iconfont";
|
||||||
|
src: url('https://at.alicdn.com/t/font_811118_f7oh8iao9yd.ttf') format('truetype')
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family:"iconfont" !important;
|
||||||
|
font-size:16px;
|
||||||
|
font-style:normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-down:before { content: "\e600"; }
|
||||||
|
|
||||||
|
.icon-close:before { content: "\e78f"; }
|
||||||
|
|
||||||
|
.icon-arrow-right:before { content: "\e682"; }
|
||||||
|
|
||||||
|
.icon-duihao:before { content: "\e601"; }
|
||||||
|
|
||||||
|
.icon-right:before { content: "\e790"; }
|
||||||
BIN
01. 微信小程序快速入门篇/1-11. 翻译小程序功能实现/课堂代码/translate-demo/imgs/icon-1.png
Executable file
BIN
01. 微信小程序快速入门篇/1-11. 翻译小程序功能实现/课堂代码/translate-demo/imgs/icon-1.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
01. 微信小程序快速入门篇/1-11. 翻译小程序功能实现/课堂代码/translate-demo/imgs/icon-2.png
Executable file
BIN
01. 微信小程序快速入门篇/1-11. 翻译小程序功能实现/课堂代码/translate-demo/imgs/icon-2.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
01. 微信小程序快速入门篇/1-11. 翻译小程序功能实现/课堂代码/translate-demo/imgs/sel-icon-1.png
Executable file
BIN
01. 微信小程序快速入门篇/1-11. 翻译小程序功能实现/课堂代码/translate-demo/imgs/sel-icon-1.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
01. 微信小程序快速入门篇/1-11. 翻译小程序功能实现/课堂代码/translate-demo/imgs/sel-icon-2.png
Executable file
BIN
01. 微信小程序快速入门篇/1-11. 翻译小程序功能实现/课堂代码/translate-demo/imgs/sel-icon-2.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,20 @@
|
|||||||
|
const app = getApp(); // 获取实例
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
lanList : app.globalData.lanList, // 从全局获取所有的语言
|
||||||
|
curLanIndex : app.globalData.curLan.index// 当前语言的索引
|
||||||
|
},
|
||||||
|
selectHandle(options){
|
||||||
|
const index = options.currentTarget.dataset.id;
|
||||||
|
// 接下来需要修改全局的当前语言
|
||||||
|
for(let i=0;i<app.globalData.lanList.length;i++){
|
||||||
|
if(app.globalData.lanList[i].index === index){
|
||||||
|
app.globalData.curLan = app.globalData.lanList[i];
|
||||||
|
// 再重新设置一下 curLanIndex
|
||||||
|
this.setData({
|
||||||
|
curLanIndex : app.globalData.curLan.index// 当前语言的索引
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"usingComponents": {}
|
||||||
|
}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<!-- 一项一项的语言 -->
|
||||||
|
<view
|
||||||
|
class="container"
|
||||||
|
wx:for="{{lanList}}"
|
||||||
|
wx:key="this"
|
||||||
|
data-id="{{index}}"
|
||||||
|
bindtap="selectHandle"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
wx:if="{{curLanIndex === index}}"
|
||||||
|
>
|
||||||
|
{{item.chs}}
|
||||||
|
<text class="select iconfont icon-duihao"></text>
|
||||||
|
</view>
|
||||||
|
<view wx:else>
|
||||||
|
{{item.chs}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
.container{
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
line-height: 80rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #8995a1;
|
||||||
|
text-indent: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select{
|
||||||
|
float: right;
|
||||||
|
margin-right: 40rpx;
|
||||||
|
}
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
const app = getApp();
|
||||||
|
Page({
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 页面的初始数据
|
||||||
|
*/
|
||||||
|
data: {
|
||||||
|
historyList : app.globalData.history
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 生命周期函数--监听页面显示
|
||||||
|
*/
|
||||||
|
onShow() {
|
||||||
|
this.setData({
|
||||||
|
historyList : app.globalData.history
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 清除历史记录
|
||||||
|
clearHistory(){
|
||||||
|
// 1. 清除全局 history 的值，清除 historyList
|
||||||
|
this.setData({
|
||||||
|
historyList : ""
|
||||||
|
});
|
||||||
|
app.globalData.history = [];
|
||||||
|
// 2. 清除本地缓存，下次进来的时候，历史记录也是空的
|
||||||
|
wx.removeStorage({
|
||||||
|
key: 'histroy',
|
||||||
|
success(){
|
||||||
|
console.log("本地缓存已清除")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"usingComponents": {}
|
||||||
|
}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
<scroll-view class="container">
|
||||||
|
<!-- 头部 -->
|
||||||
|
<view class="header">
|
||||||
|
<text>翻译历史</text>
|
||||||
|
<text class="iconfont icon-close" bindtap="clearHistory">清除历史记录</text>
|
||||||
|
</view>
|
||||||
|
<!-- 历史记录 -->
|
||||||
|
<view class="list">
|
||||||
|
<view class="item" wx:for="{{historyList}}" wx:key="this">
|
||||||
|
<view>{{item.sourceTxt}}</view>
|
||||||
|
<view>{{item.resultTxt}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
.container{
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 100rpx;
|
||||||
|
line-height: 100rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header text{
|
||||||
|
margin: 0 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .icon-close{
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item{
|
||||||
|
margin: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item view{
|
||||||
|
margin: 5rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item view:nth-child(2){
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
import transFunc from "../../utils/util.js"
|
||||||
|
const app = getApp()
|
||||||
|
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
query : "", // 用户输入的要翻译的文本
|
||||||
|
content : "", // 翻译的文本
|
||||||
|
curLanTxt : app.globalData.curLan.chs
|
||||||
|
},
|
||||||
|
// 跳转到选择语言
|
||||||
|
goToChange(){
|
||||||
|
wx.navigateTo({
|
||||||
|
url: '/pages/change/change',
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 翻译事件
|
||||||
|
tanslateHandler(){
|
||||||
|
// 1. 拿到用户输入的值 2. 调用接口进行翻译
|
||||||
|
transFunc(this.data.query,"auto", app.globalData.curLan.lang)
|
||||||
|
.then(txt=>{
|
||||||
|
// 1）修改 content 的值，以便翻译结果能够显示出来
|
||||||
|
this.setData({
|
||||||
|
content: txt
|
||||||
|
});
|
||||||
|
// 2）将此次翻译结果存储到全局的 history 里面
|
||||||
|
app.globalData.history.unshift({
|
||||||
|
sourceTxt : this.data.query, // 翻译的原文
|
||||||
|
resultTxt : txt
|
||||||
|
});
|
||||||
|
// 3）将 history 存储到本地，方便下一次进入小程序的时候，能够加载之前的历史记录
|
||||||
|
wx.setStorage({
|
||||||
|
key : 'history',
|
||||||
|
data : app.globalData.history
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onShow(){
|
||||||
|
this.setData({
|
||||||
|
curLanTxt : app.globalData.curLan.chs
|
||||||
|
})
|
||||||
|
},
|
||||||
|
inputHandle(){}
|
||||||
|
})
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"usingComponents": {}
|
||||||
|
}
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
<!-- 最外层容器 -->
|
||||||
|
<view class="container">
|
||||||
|
<!-- 目标语言的选择 -->
|
||||||
|
<view class="lanSelectContainer">
|
||||||
|
<text bindtap="goToChange">翻译成{{curLanTxt}}</text>
|
||||||
|
<text class="iconfont icon-down"></text>
|
||||||
|
</view>
|
||||||
|
<!-- 文本输入框 -->
|
||||||
|
<view class="tranlateTxt">
|
||||||
|
<textarea
|
||||||
|
placeholder="请输入您要翻译的文本"
|
||||||
|
bindblur="tanslateHandler"
|
||||||
|
model:value="{{query}}"
|
||||||
|
bindinput="inputHandle"
|
||||||
|
></textarea>
|
||||||
|
</view>
|
||||||
|
<!-- 翻译结果 -->
|
||||||
|
<view class="resultTxt">
|
||||||
|
<view>译文</view>
|
||||||
|
<view class="content">{{content}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
.lanSelectContainer{
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #f7f7fa;
|
||||||
|
text-indent: 20rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #8995a1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lanSelectContainer .icon-down{
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tranlateTxt{
|
||||||
|
width: 100%;
|
||||||
|
height: 400rpx;
|
||||||
|
border-bottom: 1rpx solid #8995a1;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tranlateTxt textarea{
|
||||||
|
margin: 30rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resultTxt{
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #8995a1;
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
margin-top: 10rpx;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
@ -0,0 +1,51 @@
|
|||||||
|
{
|
||||||
|
"description": "项目配置文件",
|
||||||
|
"packOptions": {
|
||||||
|
"ignore": [],
|
||||||
|
"include": []
|
||||||
|
},
|
||||||
|
"setting": {
|
||||||
|
"bundle": false,
|
||||||
|
"userConfirmedBundleSwitch": false,
|
||||||
|
"urlCheck": true,
|
||||||
|
"scopeDataCheck": false,
|
||||||
|
"coverView": true,
|
||||||
|
"es6": true,
|
||||||
|
"postcss": true,
|
||||||
|
"compileHotReLoad": false,
|
||||||
|
"lazyloadPlaceholderEnable": false,
|
||||||
|
"preloadBackgroundData": false,
|
||||||
|
"minified": true,
|
||||||
|
"autoAudits": false,
|
||||||
|
"newFeature": false,
|
||||||
|
"uglifyFileName": false,
|
||||||
|
"uploadWithSourceMap": true,
|
||||||
|
"useIsolateContext": true,
|
||||||
|
"nodeModules": false,
|
||||||
|
"enhance": true,
|
||||||
|
"useMultiFrameRuntime": true,
|
||||||
|
"useApiHook": true,
|
||||||
|
"useApiHostProcess": true,
|
||||||
|
"showShadowRootInWxmlPanel": true,
|
||||||
|
"packNpmManually": false,
|
||||||
|
"enableEngineNative": false,
|
||||||
|
"packNpmRelationList": [],
|
||||||
|
"minifyWXSS": true,
|
||||||
|
"showES6CompileOption": false,
|
||||||
|
"minifyWXML": true,
|
||||||
|
"babelSetting": {
|
||||||
|
"ignore": [],
|
||||||
|
"disablePlugins": [],
|
||||||
|
"outputPath": ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"compileType": "miniprogram",
|
||||||
|
"libVersion": "2.19.4",
|
||||||
|
"appid": "wx54ae0faaf2778fc5",
|
||||||
|
"projectname": "miniprogram-92",
|
||||||
|
"condition": {},
|
||||||
|
"editorSetting": {
|
||||||
|
"tabIndent": "insertSpaces",
|
||||||
|
"tabSize": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
|
||||||
|
"projectname": "translate-demo",
|
||||||
|
"setting": {
|
||||||
|
"compileHotReLoad": true
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
|
||||||
|
"rules": [{
|
||||||
|
"action": "allow",
|
||||||
|
"page": "*"
|
||||||
|
}]
|
||||||
|
}
|
||||||
1
01. 微信小程序快速入门篇/1-11. 翻译小程序功能实现/课堂代码/translate-demo/utils/md5.min.js
vendored
Executable file
1
01. 微信小程序快速入门篇/1-11. 翻译小程序功能实现/课堂代码/translate-demo/utils/md5.min.js
vendored
Executable file
@ -0,0 +1 @@
|
|||||||
|
!function (n) { "use strict"; function t(n, t) { var r = (65535 & n) + (65535 & t); return (n >> 16) + (t >> 16) + (r >> 16) << 16 | 65535 & r } function r(n, t) { return n << t | n >>> 32 - t } function e(n, e, o, u, c, f) { return t(r(t(t(e, n), t(u, f)), c), o) } function o(n, t, r, o, u, c, f) { return e(t & r | ~t & o, n, t, u, c, f) } function u(n, t, r, o, u, c, f) { return e(t & o | r & ~o, n, t, u, c, f) } function c(n, t, r, o, u, c, f) { return e(t ^ r ^ o, n, t, u, c, f) } function f(n, t, r, o, u, c, f) { return e(r ^ (t | ~o), n, t, u, c, f) } function i(n, r) { n[r >> 5] |= 128 << r % 32, n[14 + (r + 64 >>> 9 << 4)] = r; var e, i, a, d, h, l = 1732584193, g = -271733879, v = -1732584194, m = 271733878; for (e = 0; e < n.length; e += 16)i = l, a = g, d = v, h = m, g = f(g = f(g = f(g = f(g = c(g = c(g = c(g = c(g = u(g = u(g = u(g = u(g = o(g = o(g = o(g = o(g, v = o(v, m = o(m, l = o(l, g, v, m, n[e], 7, -680876936), g, v, n[e + 1], 12, -389564586), l, g, n[e + 2], 17, 606105819), m, l, n[e + 3], 22, -1044525330), v = o(v, m = o(m, l = o(l, g, v, m, n[e + 4], 7, -176418897), g, v, n[e + 5], 12, 1200080426), l, g, n[e + 6], 17, -1473231341), m, l, n[e + 7], 22, -45705983), v = o(v, m = o(m, l = o(l, g, v, m, n[e + 8], 7, 1770035416), g, v, n[e + 9], 12, -1958414417), l, g, n[e + 10], 17, -42063), m, l, n[e + 11], 22, -1990404162), v = o(v, m = o(m, l = o(l, g, v, m, n[e + 12], 7, 1804603682), g, v, n[e + 13], 12, -40341101), l, g, n[e + 14], 17, -1502002290), m, l, n[e + 15], 22, 1236535329), v = u(v, m = u(m, l = u(l, g, v, m, n[e + 1], 5, -165796510), g, v, n[e + 6], 9, -1069501632), l, g, n[e + 11], 14, 643717713), m, l, n[e], 20, -373897302), v = u(v, m = u(m, l = u(l, g, v, m, n[e + 5], 5, -701558691), g, v, n[e + 10], 9, 38016083), l, g, n[e + 15], 14, -660478335), m, l, n[e + 4], 20, -405537848), v = u(v, m = u(m, l = u(l, g, v, m, n[e + 9], 5, 568446438), g, v, n[e + 14], 9, -1019803690), l, g, n[e + 3], 14, -187363961), m, l, n[e + 8], 20, 1163531501), v = u(v, m = u(m, l = u(l, g, v, m, n[e + 13], 5, -1444681467), g, v, n[e + 2], 9, -51403784), l, g, n[e + 7], 14, 1735328473), m, l, n[e + 12], 20, -1926607734), v = c(v, m = c(m, l = c(l, g, v, m, n[e + 5], 4, -378558), g, v, n[e + 8], 11, -2022574463), l, g, n[e + 11], 16, 1839030562), m, l, n[e + 14], 23, -35309556), v = c(v, m = c(m, l = c(l, g, v, m, n[e + 1], 4, -1530992060), g, v, n[e + 4], 11, 1272893353), l, g, n[e + 7], 16, -155497632), m, l, n[e + 10], 23, -1094730640), v = c(v, m = c(m, l = c(l, g, v, m, n[e + 13], 4, 681279174), g, v, n[e], 11, -358537222), l, g, n[e + 3], 16, -722521979), m, l, n[e + 6], 23, 76029189), v = c(v, m = c(m, l = c(l, g, v, m, n[e + 9], 4, -640364487), g, v, n[e + 12], 11, -421815835), l, g, n[e + 15], 16, 530742520), m, l, n[e + 2], 23, -995338651), v = f(v, m = f(m, l = f(l, g, v, m, n[e], 6, -198630844), g, v, n[e + 7], 10, 1126891415), l, g, n[e + 14], 15, -1416354905), m, l, n[e + 5], 21, -57434055), v = f(v, m = f(m, l = f(l, g, v, m, n[e + 12], 6, 1700485571), g, v, n[e + 3], 10, -1894986606), l, g, n[e + 10], 15, -1051523), m, l, n[e + 1], 21, -2054922799), v = f(v, m = f(m, l = f(l, g, v, m, n[e + 8], 6, 1873313359), g, v, n[e + 15], 10, -30611744), l, g, n[e + 6], 15, -1560198380), m, l, n[e + 13], 21, 1309151649), v = f(v, m = f(m, l = f(l, g, v, m, n[e + 4], 6, -145523070), g, v, n[e + 11], 10, -1120210379), l, g, n[e + 2], 15, 718787259), m, l, n[e + 9], 21, -343485551), l = t(l, i), g = t(g, a), v = t(v, d), m = t(m, h); return [l, g, v, m] } function a(n) { var t, r = "", e = 32 * n.length; for (t = 0; t < e; t += 8)r += String.fromCharCode(n[t >> 5] >>> t % 32 & 255); return r } function d(n) { var t, r = []; for (r[(n.length >> 2) - 1] = void 0, t = 0; t < r.length; t += 1)r[t] = 0; var e = 8 * n.length; for (t = 0; t < e; t += 8)r[t >> 5] |= (255 & n.charCodeAt(t / 8)) << t % 32; return r } function h(n) { return a(i(d(n), 8 * n.length)) } function l(n, t) { var r, e, o = d(n), u = [], c = []; for (u[15] = c[15] = void 0, o.length > 16 && (o = i(o, 8 * n.length)), r = 0; r < 16; r += 1)u[r] = 909522486 ^ o[r], c[r] = 1549556828 ^ o[r]; return e = i(u.concat(d(t)), 512 + 8 * t.length), a(i(c.concat(e), 640)) } function g(n) { var t, r, e = ""; for (r = 0; r < n.length; r += 1)t = n.charCodeAt(r), e += "0123456789abcdef".charAt(t >>> 4 & 15) + "0123456789abcdef".charAt(15 & t); return e } function v(n) { return unescape(encodeURIComponent(n)) } function m(n) { return h(v(n)) } function p(n) { return g(m(n)) } function s(n, t) { return l(v(n), v(t)) } function C(n, t) { return g(s(n, t)) } function A(n, t, r) { return t ? r ? s(t, n) : C(t, n) : r ? m(n) : p(n) } "function" == typeof define && define.amd ? define(function () { return A }) : "object" == typeof module && module.exports ? module.exports = A : n.md5 = A }(this);
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
import md5 from "./md5.min.js";
|
||||||
|
|
||||||
|
// 百度翻译的 APPID 以及 key
|
||||||
|
// 请填写你自己的 appid 和 key
|
||||||
|
const appid = "";
|
||||||
|
const key = "";
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {*} q 要翻译的文本
|
||||||
|
* @param {*} from 原来的语言
|
||||||
|
* @param {*} to 目标语言
|
||||||
|
*/
|
||||||
|
function transFunc(q, from = "auto", to) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
// 生成随机数
|
||||||
|
const salt = Date.now(); // 随机数
|
||||||
|
// 制作签名 appid+q+salt+密钥的MD5值
|
||||||
|
const sign = md5(`${appid}${q}${salt}${key}`);
|
||||||
|
// 发送请求进行翻译
|
||||||
|
wx.request({
|
||||||
|
url: 'https://fanyi-api.baidu.com/api/trans/vip/translate',
|
||||||
|
data: {
|
||||||
|
q, // 要翻译的文本
|
||||||
|
from, // 原来的语言
|
||||||
|
to, // 目标语言
|
||||||
|
appid,
|
||||||
|
salt, // 随机数
|
||||||
|
sign // 签名
|
||||||
|
},
|
||||||
|
success(res) {
|
||||||
|
console.log(res)
|
||||||
|
if (res.data && res.data.trans_result) {
|
||||||
|
// 说明翻译成功
|
||||||
|
// 返回翻译的文本
|
||||||
|
resolve(res.data.trans_result[0].dst)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail() {
|
||||||
|
wx.showToast({
|
||||||
|
title: '网络异常',
|
||||||
|
icon: "error",
|
||||||
|
duration: 2000
|
||||||
|
})
|
||||||
|
reject({
|
||||||
|
status: "error",
|
||||||
|
msg: "翻译失败"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = transFunc;
|
||||||
168
01. 微信小程序快速入门篇/1-2. 小程序骨架—WXML/课件资料/小程序的骨架—WXML.md
Normal file
168
01. 微信小程序快速入门篇/1-2. 小程序骨架—WXML/课件资料/小程序的骨架—WXML.md
Normal file
@ -0,0 +1,168 @@
|
|||||||
|
# 小程序的骨架—WXML
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 数据绑定
|
||||||
|
|
||||||
|
基本语法和 vue 非常的类似：
|
||||||
|
|
||||||
|
```js
|
||||||
|
// index.js
|
||||||
|
// 获取应用实例
|
||||||
|
const app = getApp()
|
||||||
|
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
name : "张三",
|
||||||
|
time : (new Date()).toString()
|
||||||
|
},
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
```wxml
|
||||||
|
<view>
|
||||||
|
<text>我的名字是：{{name}}</text>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<text>当前时间：{{time}}</text>
|
||||||
|
</view>
|
||||||
|
```
|
||||||
|
|
||||||
|
undefined值不会被输出到 wxml 中
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
在猫须语法中（ {{ }} ），是支持表达式的，这一点和 vue 也是相同的
|
||||||
|
|
||||||
|
例如：
|
||||||
|
|
||||||
|
```js
|
||||||
|
<text>{{ a > b ? "Hello" : "world"}}</text>
|
||||||
|
<text>{{ a + b }}</text>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 条件逻辑
|
||||||
|
|
||||||
|
基本上也就是和 vue 是相同的，只不过需要注意语法上面的区别。
|
||||||
|
|
||||||
|
- wx:if
|
||||||
|
- wx:elif
|
||||||
|
- wx:else
|
||||||
|
|
||||||
|
例如：
|
||||||
|
|
||||||
|
```wxml
|
||||||
|
<view wx:if="{{age > 18}}">
|
||||||
|
<text>可以进入网吧</text>
|
||||||
|
</view>
|
||||||
|
<view wx:elif="{{ age===18 }}">
|
||||||
|
<text>刚好到能够进入网吧的年龄</text>
|
||||||
|
</view>
|
||||||
|
<view wx:else>
|
||||||
|
<text>不能进入网吧</text>
|
||||||
|
</view>
|
||||||
|
```
|
||||||
|
|
||||||
|
block 有点类似于 vue 里面的 tempalte，表示要渲染的一整块内容。
|
||||||
|
|
||||||
|
```wxml
|
||||||
|
<block wx:if="{{age>18}}">
|
||||||
|
<view>
|
||||||
|
<text>{{ a > b ? "Hello" : "world"}}</text>
|
||||||
|
<text>{{ a + b }}</text>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<text>当前时间：{{time}}</text>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 列表渲染
|
||||||
|
|
||||||
|
基本上也是和 vue 是相同的，使用的是 wx:for
|
||||||
|
|
||||||
|
相比 v-for，在 wx:for 中已经将下标和迭代的元素变量默认确定好了，下标对应的是 index，迭代的每一项为 item
|
||||||
|
|
||||||
|
例如：
|
||||||
|
|
||||||
|
```wxml
|
||||||
|
<view wx:for="{{fruits}}" wx:key="index">
|
||||||
|
<text>{{index}}</text> - <text>{{item}}</text>
|
||||||
|
</view>
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
...
|
||||||
|
fruits : ["苹果","香蕉","哈密瓜"]
|
||||||
|
},
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
注意，在进行列表渲染的时候，和 v-for 一样，也是需要添加 key，通过 wx:key
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 定义模板和引入模板
|
||||||
|
|
||||||
|
定义模板通过 template，使用 name 来设置模板的名称，模板中可以使用猫须语法接收动态的数据
|
||||||
|
|
||||||
|
```wxml
|
||||||
|
<template name="msgItem">
|
||||||
|
<view>
|
||||||
|
<text>{{index}} : {{ msg }}</text>
|
||||||
|
<view>Time : {{ time }}</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
引入模板的时候，可以使用 import 和 include
|
||||||
|
|
||||||
|
例如下面是使用 import 来引入模板
|
||||||
|
|
||||||
|
```wxml
|
||||||
|
<import src="../../templates/msgItem"/>
|
||||||
|
```
|
||||||
|
|
||||||
|
在使用的时候通过 is 属性来指定模板的名称，并且通过 data 属性来传入模板所需要的数据
|
||||||
|
|
||||||
|
```wxml
|
||||||
|
<template is="msgItem" data="{{index : 1, msg: '你好', time:'2023.1.10'}}"></template>
|
||||||
|
```
|
||||||
|
|
||||||
|
> 注意，在使用 import 引入模板的时候，有一个作用域相关的问题，详细请参阅文档。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
还可以 include 来引入模板，这种方式一般适用于静态模板，做的实际上就是一个简单的替换操作。
|
||||||
|
|
||||||
|
```wxml
|
||||||
|
<view>
|
||||||
|
<text>这是一个头部</text>
|
||||||
|
</view>
|
||||||
|
```
|
||||||
|
|
||||||
|
```wxml
|
||||||
|
<view>
|
||||||
|
<text>这是一个页尾</text>
|
||||||
|
</view>
|
||||||
|
```
|
||||||
|
|
||||||
|
```wxml
|
||||||
|
<include src="../../templates/header"/>
|
||||||
|
|
||||||
|
// ....
|
||||||
|
|
||||||
|
<include src="../../templates/footer"/>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
整个 wxml 并不难，如果你有 vue 的编程经验，那么上手会更加轻松。
|
||||||
|
|
||||||
|
更多关于 wxml 的内容，请参阅：*https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000ee2c29d4f805b0086a37a254c0a*
|
||||||
31
01. 微信小程序快速入门篇/1-2. 小程序骨架—WXML/课堂代码/mini-demo/.eslintrc.js
Normal file
31
01. 微信小程序快速入门篇/1-2. 小程序骨架—WXML/课堂代码/mini-demo/.eslintrc.js
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
/*
|
||||||
|
* Eslint config file
|
||||||
|
* Documentation: https://eslint.org/docs/user-guide/configuring/
|
||||||
|
* Install the Eslint extension before using this feature.
|
||||||
|
*/
|
||||||
|
module.exports = {
|
||||||
|
env: {
|
||||||
|
es6: true,
|
||||||
|
browser: true,
|
||||||
|
node: true,
|
||||||
|
},
|
||||||
|
ecmaFeatures: {
|
||||||
|
modules: true,
|
||||||
|
},
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 2018,
|
||||||
|
sourceType: 'module',
|
||||||
|
},
|
||||||
|
globals: {
|
||||||
|
wx: true,
|
||||||
|
App: true,
|
||||||
|
Page: true,
|
||||||
|
getCurrentPages: true,
|
||||||
|
getApp: true,
|
||||||
|
Component: true,
|
||||||
|
requirePlugin: true,
|
||||||
|
requireMiniProgram: true,
|
||||||
|
},
|
||||||
|
// extends: 'eslint:recommended',
|
||||||
|
rules: {},
|
||||||
|
}
|
||||||
19
01. 微信小程序快速入门篇/1-2. 小程序骨架—WXML/课堂代码/mini-demo/app.js
Normal file
19
01. 微信小程序快速入门篇/1-2. 小程序骨架—WXML/课堂代码/mini-demo/app.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
// app.js
|
||||||
|
App({
|
||||||
|
onLaunch() {
|
||||||
|
// 展示本地存储能力
|
||||||
|
const logs = wx.getStorageSync('logs') || []
|
||||||
|
logs.unshift(Date.now())
|
||||||
|
wx.setStorageSync('logs', logs)
|
||||||
|
|
||||||
|
// 登录
|
||||||
|
wx.login({
|
||||||
|
success: res => {
|
||||||
|
// 发送 res.code 到后台换取 openId, sessionKey, unionId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
globalData: {
|
||||||
|
userInfo: null
|
||||||
|
}
|
||||||
|
})
|
||||||
14
01. 微信小程序快速入门篇/1-2. 小程序骨架—WXML/课堂代码/mini-demo/app.json
Normal file
14
01. 微信小程序快速入门篇/1-2. 小程序骨架—WXML/课堂代码/mini-demo/app.json
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"pages":[
|
||||||
|
"pages/index/index",
|
||||||
|
"pages/logs/logs"
|
||||||
|
],
|
||||||
|
"window":{
|
||||||
|
"backgroundTextStyle":"light",
|
||||||
|
"navigationBarBackgroundColor": "#fff",
|
||||||
|
"navigationBarTitleText": "Hello",
|
||||||
|
"navigationBarTextStyle":"black"
|
||||||
|
},
|
||||||
|
"style": "v2",
|
||||||
|
"sitemapLocation": "sitemap.json"
|
||||||
|
}
|
||||||
10
01. 微信小程序快速入门篇/1-2. 小程序骨架—WXML/课堂代码/mini-demo/app.wxss
Normal file
10
01. 微信小程序快速入门篇/1-2. 小程序骨架—WXML/课堂代码/mini-demo/app.wxss
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
/**app.wxss**/
|
||||||
|
.container {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 200rpx 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
// index.js
|
||||||
|
// 获取应用实例
|
||||||
|
const app = getApp()
|
||||||
|
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
a : 10,
|
||||||
|
b : 15,
|
||||||
|
time : (new Date()).toString(),
|
||||||
|
age : 20,
|
||||||
|
fruits : ["苹果","香蕉","哈密瓜"]
|
||||||
|
},
|
||||||
|
})
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"usingComponents": {}
|
||||||
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
<import src="../../templates/msgItem"/>
|
||||||
|
<include src="../../templates/header"/>
|
||||||
|
<block wx:if="{{age>18}}">
|
||||||
|
<view>
|
||||||
|
<text>{{ a > b ? "Hello" : "world"}}</text>
|
||||||
|
<text>{{ a + b }}</text>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<text>当前时间：{{time}}</text>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
|
||||||
|
<template is="msgItem" data="{{index : 1, msg: '你好', time:'2023.1.10'}}"></template>
|
||||||
|
|
||||||
|
<view wx:if="{{age > 18}}">
|
||||||
|
<text>可以进入网吧</text>
|
||||||
|
</view>
|
||||||
|
<view wx:elif="{{ age===18 }}">
|
||||||
|
<text>刚好到能够进入网吧的年龄</text>
|
||||||
|
</view>
|
||||||
|
<view wx:else>
|
||||||
|
<text>不能进入网吧</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view wx:for="{{fruits}}" wx:key="index">
|
||||||
|
<text>{{index}}</text> - <text>{{item}}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<include src="../../templates/footer"/>
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
// logs.js
|
||||||
|
const util = require('../../utils/util.js')
|
||||||
|
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
logs: []
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.setData({
|
||||||
|
logs: (wx.getStorageSync('logs') || []).map(log => {
|
||||||
|
return {
|
||||||
|
date: util.formatTime(new Date(log)),
|
||||||
|
timeStamp: log
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"navigationBarTitleText": "查看启动日志",
|
||||||
|
"usingComponents": {}
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<!--logs.wxml-->
|
||||||
|
<view class="container log-list">
|
||||||
|
<block wx:for="{{logs}}" wx:key="timeStamp" wx:for-item="log">
|
||||||
|
<text class="log-item">{{index + 1}}. {{log.date}}</text>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
.log-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 40rpx;
|
||||||
|
}
|
||||||
|
.log-item {
|
||||||
|
margin: 10rpx;
|
||||||
|
}
|
||||||
@ -0,0 +1,51 @@
|
|||||||
|
{
|
||||||
|
"description": "项目配置文件",
|
||||||
|
"packOptions": {
|
||||||
|
"ignore": [],
|
||||||
|
"include": []
|
||||||
|
},
|
||||||
|
"setting": {
|
||||||
|
"bundle": false,
|
||||||
|
"userConfirmedBundleSwitch": false,
|
||||||
|
"urlCheck": true,
|
||||||
|
"scopeDataCheck": false,
|
||||||
|
"coverView": true,
|
||||||
|
"es6": true,
|
||||||
|
"postcss": true,
|
||||||
|
"compileHotReLoad": false,
|
||||||
|
"lazyloadPlaceholderEnable": false,
|
||||||
|
"preloadBackgroundData": false,
|
||||||
|
"minified": true,
|
||||||
|
"autoAudits": false,
|
||||||
|
"newFeature": false,
|
||||||
|
"uglifyFileName": false,
|
||||||
|
"uploadWithSourceMap": true,
|
||||||
|
"useIsolateContext": true,
|
||||||
|
"nodeModules": false,
|
||||||
|
"enhance": true,
|
||||||
|
"useMultiFrameRuntime": true,
|
||||||
|
"useApiHook": true,
|
||||||
|
"useApiHostProcess": true,
|
||||||
|
"showShadowRootInWxmlPanel": true,
|
||||||
|
"packNpmManually": false,
|
||||||
|
"enableEngineNative": false,
|
||||||
|
"packNpmRelationList": [],
|
||||||
|
"minifyWXSS": true,
|
||||||
|
"showES6CompileOption": false,
|
||||||
|
"minifyWXML": true,
|
||||||
|
"babelSetting": {
|
||||||
|
"ignore": [],
|
||||||
|
"disablePlugins": [],
|
||||||
|
"outputPath": ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"compileType": "miniprogram",
|
||||||
|
"libVersion": "2.19.4",
|
||||||
|
"appid": "wx54ae0faaf2778fc5",
|
||||||
|
"projectname": "miniprogram-92",
|
||||||
|
"condition": {},
|
||||||
|
"editorSetting": {
|
||||||
|
"tabIndent": "insertSpaces",
|
||||||
|
"tabSize": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
|
||||||
|
"projectname": "mini-demo",
|
||||||
|
"setting": {
|
||||||
|
"compileHotReLoad": true
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
|
||||||
|
"rules": [{
|
||||||
|
"action": "allow",
|
||||||
|
"page": "*"
|
||||||
|
}]
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
<view>
|
||||||
|
<text>这是一个页尾</text>
|
||||||
|
</view>
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
<view>
|
||||||
|
<text>这是一个头部</text>
|
||||||
|
</view>
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<template name="msgItem">
|
||||||
|
<view>
|
||||||
|
<text>{{index}} : {{ msg }}</text>
|
||||||
|
<view>Time : {{ time }}</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
19
01. 微信小程序快速入门篇/1-2. 小程序骨架—WXML/课堂代码/mini-demo/utils/util.js
Normal file
19
01. 微信小程序快速入门篇/1-2. 小程序骨架—WXML/课堂代码/mini-demo/utils/util.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
const formatTime = date => {
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = date.getMonth() + 1
|
||||||
|
const day = date.getDate()
|
||||||
|
const hour = date.getHours()
|
||||||
|
const minute = date.getMinutes()
|
||||||
|
const second = date.getSeconds()
|
||||||
|
|
||||||
|
return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatNumber = n => {
|
||||||
|
n = n.toString()
|
||||||
|
return n[1] ? n : `0${n}`
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
formatTime
|
||||||
|
}
|
||||||
70
01. 微信小程序快速入门篇/1-3. 小程序外观—WXSS/课件资料/小程序的外观—WXSS.md
Normal file
70
01. 微信小程序快速入门篇/1-3. 小程序外观—WXSS/课件资料/小程序的外观—WXSS.md
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
# 小程序的外观—WXSS
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
WXSS 英语全称为 Wei Xin Style Sheets
|
||||||
|
|
||||||
|
回顾每一个页面下面，有 4 个文件：
|
||||||
|
|
||||||
|
- wxml：当前页面的结构（必须）
|
||||||
|
- wxss：当前页面的样式（可选）
|
||||||
|
- js：当前页面的逻辑（必须）
|
||||||
|
- json：当前页面的配置（可选）
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
app.wxsss 位于项目的根目录下面，是整个项目的公共样式，它会被注入到小程序的每个页面。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**尺寸单位**
|
||||||
|
|
||||||
|
在微信小程序中，专门对尺寸进行了优化。为了适配不同分辨率的屏幕，小程序引入了新的单位：rpx
|
||||||
|
|
||||||
|
同一个元素，在不同宽度的屏幕下，如果使用px为尺寸单位，有可能造成页面留白过多。
|
||||||
|
|
||||||
|
以前在开发 WebApp 的时候，我们通过 JS 获取到屏幕的尺寸信息，然后手动去计算应该如何进行缩放。（手机端如何适配）
|
||||||
|
|
||||||
|
但是在小程序里面就不存在这个问题，因为它已经为我们封装好了。我们只需要使用 rpx 这个单位即可。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**WXSS引用**
|
||||||
|
|
||||||
|
基本上和 CSS 也是相同的，使用 @import 来进行引用。
|
||||||
|
|
||||||
|
但是和原生 CSS 有一个区别在于，WXSS 会把 @import 引用的 CSS 打包到一块儿
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**内联样式**
|
||||||
|
|
||||||
|
关于内联样式，基本上和原生 CSS 一模一样。
|
||||||
|
|
||||||
|
在此基础上支持动态的样式。
|
||||||
|
|
||||||
|
```wxml
|
||||||
|
<text style="color:{{color}};font-size: {{eleFontsize}};">当前时间：{{time}}</text>
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
// ...
|
||||||
|
color: 'blue',
|
||||||
|
eleFontsize: '48rpx'
|
||||||
|
},
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**组件库**
|
||||||
|
|
||||||
|
微信小程序官方提供了一套组件库，扫码如下：
|
||||||
|
|
||||||
|
<img src="https://xiejie-typora.oss-cn-chengdu.aliyuncs.com/2023-01-11-010523.png" alt="image-20230111090523483" style="zoom: 33%;" />
|
||||||
|
|
||||||
|
关于这个组件，我们会在第二章专门拿一个章节来说，这一章就不展开了。
|
||||||
|
|
||||||
|
这节课结束后，下来通读官方文档对应的：*https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000c44c49141887b00864fbba5100a*
|
||||||
31
01. 微信小程序快速入门篇/1-3. 小程序外观—WXSS/课堂代码/mini-demo/.eslintrc.js
Normal file
31
01. 微信小程序快速入门篇/1-3. 小程序外观—WXSS/课堂代码/mini-demo/.eslintrc.js
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
/*
|
||||||
|
* Eslint config file
|
||||||
|
* Documentation: https://eslint.org/docs/user-guide/configuring/
|
||||||
|
* Install the Eslint extension before using this feature.
|
||||||
|
*/
|
||||||
|
module.exports = {
|
||||||
|
env: {
|
||||||
|
es6: true,
|
||||||
|
browser: true,
|
||||||
|
node: true,
|
||||||
|
},
|
||||||
|
ecmaFeatures: {
|
||||||
|
modules: true,
|
||||||
|
},
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 2018,
|
||||||
|
sourceType: 'module',
|
||||||
|
},
|
||||||
|
globals: {
|
||||||
|
wx: true,
|
||||||
|
App: true,
|
||||||
|
Page: true,
|
||||||
|
getCurrentPages: true,
|
||||||
|
getApp: true,
|
||||||
|
Component: true,
|
||||||
|
requirePlugin: true,
|
||||||
|
requireMiniProgram: true,
|
||||||
|
},
|
||||||
|
// extends: 'eslint:recommended',
|
||||||
|
rules: {},
|
||||||
|
}
|
||||||
19
01. 微信小程序快速入门篇/1-3. 小程序外观—WXSS/课堂代码/mini-demo/app.js
Normal file
19
01. 微信小程序快速入门篇/1-3. 小程序外观—WXSS/课堂代码/mini-demo/app.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
// app.js
|
||||||
|
App({
|
||||||
|
onLaunch() {
|
||||||
|
// 展示本地存储能力
|
||||||
|
const logs = wx.getStorageSync('logs') || []
|
||||||
|
logs.unshift(Date.now())
|
||||||
|
wx.setStorageSync('logs', logs)
|
||||||
|
|
||||||
|
// 登录
|
||||||
|
wx.login({
|
||||||
|
success: res => {
|
||||||
|
// 发送 res.code 到后台换取 openId, sessionKey, unionId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
globalData: {
|
||||||
|
userInfo: null
|
||||||
|
}
|
||||||
|
})
|
||||||
14
01. 微信小程序快速入门篇/1-3. 小程序外观—WXSS/课堂代码/mini-demo/app.json
Normal file
14
01. 微信小程序快速入门篇/1-3. 小程序外观—WXSS/课堂代码/mini-demo/app.json
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"pages":[
|
||||||
|
"pages/index/index",
|
||||||
|
"pages/logs/logs"
|
||||||
|
],
|
||||||
|
"window":{
|
||||||
|
"backgroundTextStyle":"light",
|
||||||
|
"navigationBarBackgroundColor": "#fff",
|
||||||
|
"navigationBarTitleText": "Hello",
|
||||||
|
"navigationBarTextStyle":"black"
|
||||||
|
},
|
||||||
|
"style": "v2",
|
||||||
|
"sitemapLocation": "sitemap.json"
|
||||||
|
}
|
||||||
10
01. 微信小程序快速入门篇/1-3. 小程序外观—WXSS/课堂代码/mini-demo/app.wxss
Normal file
10
01. 微信小程序快速入门篇/1-3. 小程序外观—WXSS/课堂代码/mini-demo/app.wxss
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
/**app.wxss**/
|
||||||
|
.container {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 200rpx 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
// index.js
|
||||||
|
// 获取应用实例
|
||||||
|
const app = getApp()
|
||||||
|
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
a : 10,
|
||||||
|
b : 15,
|
||||||
|
time : (new Date()).toString(),
|
||||||
|
age : 20,
|
||||||
|
fruits : ["苹果","香蕉","哈密瓜"],
|
||||||
|
color: 'blue',
|
||||||
|
eleFontsize: '48rpx'
|
||||||
|
},
|
||||||
|
})
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"usingComponents": {}
|
||||||
|
}
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
<import src="../../templates/msgItem"/>
|
||||||
|
<include src="../../templates/header"/>
|
||||||
|
<block wx:if="{{age>18}}">
|
||||||
|
<view>
|
||||||
|
<text>{{ a > b ? "Hello" : "world"}}</text>
|
||||||
|
<text>{{ a + b }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="timerContainer">
|
||||||
|
<text class="time">当前时间：{{time}}</text>
|
||||||
|
<view></view>
|
||||||
|
<text style="color:{{color}};font-size: {{eleFontsize}};">当前时间：{{time}}</text>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
|
||||||
|
<view class="test">
|
||||||
|
<text>this is a test</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<template is="msgItem" data="{{index : 1, msg: '你好', time:'2023.1.10'}}"></template>
|
||||||
|
|
||||||
|
<view wx:if="{{age > 18}}">
|
||||||
|
<text>可以进入网吧</text>
|
||||||
|
</view>
|
||||||
|
<view wx:elif="{{ age===18 }}">
|
||||||
|
<text>刚好到能够进入网吧的年龄</text>
|
||||||
|
</view>
|
||||||
|
<view wx:else>
|
||||||
|
<text>不能进入网吧</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view wx:for="{{fruits}}" wx:key="index">
|
||||||
|
<text>{{index}}</text> - <text>{{item}}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<include src="../../templates/footer"/>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
.timerContainer{
|
||||||
|
border: 1rpx solid;
|
||||||
|
}
|
||||||
|
.time{
|
||||||
|
color : red;
|
||||||
|
font-size: 36rpx;
|
||||||
|
}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
// logs.js
|
||||||
|
const util = require('../../utils/util.js')
|
||||||
|
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
logs: []
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.setData({
|
||||||
|
logs: (wx.getStorageSync('logs') || []).map(log => {
|
||||||
|
return {
|
||||||
|
date: util.formatTime(new Date(log)),
|
||||||
|
timeStamp: log
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"navigationBarTitleText": "查看启动日志",
|
||||||
|
"usingComponents": {}
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user