Taro 从入门到实战

配置文件

更改端口号和域名:

config/index.js

1
2
h5: {
devServer:{ host: 'localhost', port: 8888},

更改 appid:
project.config.json(小程序独有的配置文件)

1
"appid": "touristappid",
阅读更多

变量的解构赋值

解构赋值语法是一种 JavaScript 表达式。通过解构赋值,可以将属性值从对象/数组中取出,赋值给其他变量。

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
// 解构数组
var foo = ["one", "two", "three"];

var [one, two, three] = foo;
console.log(one); //'one'
console.log(two); //'two'
console.log(three); // 'three'

var a, b;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

// 默认值

var a, b;
[a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7

// 交换变量

var a = 1;
var b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

// 解析一个从函数返回的数组

function f() {
return [1, 2];
}

var a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2

// 忽略某些值

function f() {
return [1, 2, 3];
}

var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

// 将剩余数组赋值给一个变量

var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2,3]

// 用正则表达式匹配提取值

function parseProtocol(url) {
var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
if (!parsedURL) {
return false;
}
console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]

var [, protocol, fullhost, fullpath] = parsedURL;
return fullhost;
}

console.log(
parseProtocol("https://developer.mozilla.org/en-US/Web/JavaScript"); // "https"
);

// 解构对象

var o = {p:42,q:true};
var {p,q} = o;

console.log(p); // 42
console.log(q); // true

// 无声明赋值

var a,b;
({a,b} = {a : 1,b : 2})

// 给新的变量名赋值

var o = {p:42,q:true};
var {p:foo,q:bar} = o;

console.log(foo); // 42
console.log(bar); // true

// 默认值

var {a = 10,b = 5} = {a : 3};
console.log(a);
console.log(b);

// 解构嵌套对象和数组

const metadata = {
title: 'Scratchpad',
translations: [
{
locale: 'de',
localization_tags: [],
last_edit: '2014-04-14T08:43:37',
url: '/de/docs/Tools/Scratchpad',
title: 'JavaScript-Umgebung'
}
],
url: '/en-US/docs/Tools/Scratchpad'
};

let {
title: englishTitle, // rename
translations: [
{
title: localeTitle, // rename
},
],
} = metadata;

console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"

// For of 迭代和解构

var people = [
{
name: 'Mike Smith',
family: {
mother: 'Jane Smith',
father: 'Harry Smith',
sister: 'Samantha Smith'
},
age: 35
},
{
name: 'Tom Jones',
family: {
mother: 'Norah Jones',
father: 'Richard Jones',
brother: 'Howard Jones'
},
age: 25
}
];

for (var {name: n, family: {father: f}} of people) {
console.log('Name: ' + n + ', Father: ' + f);
// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"
}

// 从作为函数实参的对象中提取数据

function userId({id}) {
return id;
}

function whois({displayName: displayName, fullName: {firstName: name}}){
console.log(displayName + " is " + name);
}

var user = {
id: 42,
displayName: "jdoe",
fullName: {
firstName: "John",
lastName: "Doe"
}
};

console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"


以上是我对下列视频及文章的归纳和总结。
ES6 免费视频教程

参考资料:
MDN 解构赋值
ECMAScript 6 入门-变量解构赋值

相关代码仓库:
ES6

新的声明方式

声明方式
var 声明语句声明一个变量,并可选地将其初始化为一个值。

语法:

1
var varname1 = [= value1][, varname2][= value2]...[, varnameN][=valueN];

varname
变量名。变量名可以定义为任何合法标识符。
valueN
变量的初始化值。默认值是 undefined。

描述:
变量声明,无论发生在何处,都在执行任何代码之前进行处理
用var声明的变量的作用域是它当前的执行上下文。
重新声明一个 JavaScript 变量,它将不会丢失其值。
将赋值给未声明变量的值在执行赋值时将其隐式地创建为全局变量(它将成为全局对象的属性)。

阅读更多

ES6的开发环境搭建

使用Babel把ES6编译成ES5

  1. 运行以下命令安装软件包

    1
    2
    npm install --save-dev @babel/core @babel/cli @babel/preset-env
    npm install --save @babel/polyfill
  2. 在项目根目录中创建.babelrc文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    {
    "presets": [
    [
    "@babel/preset-env",
    {
    "targets": {
    "edge": "17",
    "firefox": "60",
    "chrome": "67",
    "safari": "11.1",
    },
    "useBuiltIns": "usage",
    }
    ]
    ]
    }
  3. 运行下面命令,将src目录中的所有代码编译到dist
    npx babel src -d dist

以上是我对下列视频及文章的归纳和总结。
ES6 免费视频教程

参考资料:
ES6的开发环境搭建

相关代码仓库:
ES6

如何告别 if else

实际例子:不同管理员权限不一样,能够行使的操作也不一样。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
publicclassJudgeRole{
publicString judge(String roleName ) {
String result = "";
if (roleName.equals( "ROLE_ROOT_ADMIN" )) { // 系统管理员有A权限
result = "ROLE_ROOT_ADMIN: " + "has AAA permission" ;
}elseif( roleName.equals("ROLE_ORDER_ADMIN") ) { // 订单管理员有B权限
result = "ROLE_ORDER_ADMIN: " + "has BBB permission" ;
}elseif( roleName.equals("ROLE_NORMAL") ) {// 普通用户有C权限
result = "ROLE_NORMAL: " + "has CCC permission" ;
}else{
result = "XXX" ;
}
return result;
}
}
阅读更多

GitHub 技巧

GitHub 访问和下载

问题:GitHub 访问不了或下载慢
原因:GitHub 的 CDN 被墙屏了。
解决方法:绕过 DNS 解析,在本地直接绑定 host,该方法也可用于其他 CDN 被屏蔽的网站。
原理:找出 GitHub 域名所对应的 IP 地址,直接添加在本地 host 中。每次请求 GitHub 时就无需再向 DNS 查询地址。
操作:

  1. 访问ipaddress,查看网站域名对应的 IP 地址,输入网址则可查阅对应的 IP 地址。

  2. 修改 host 文件
    Windows 中 host 文件在 C:\Windows\System32\drivers\etc 下。
    修改 host 文件如下:

    1
    2
    3
    4
    5
    6
    # localhost name resolution is handled within DNS itself.
    # 127.0.0.1 localhost
    # ::1 localhost

    192.30.253.112 github.com
    151.101.113.194 github.global.ssl.fastly.net
  3. 刷新 DNS
    Windows:cmd 执行 ipconfig/flushdns
    mac:sudo dscacheutil –flushcache

阅读更多

APICloud 笔记

新手必看篇

视频讲义
视频学习目标:

  • 总体上了解一下 APICloud 平台,重点介绍相关的学习资源,入门资料,常见的 FAQ 等。
  • 明确我们这七天要开发一个什么样的 APP,明确功能需求,跟上每天的课程节奏,可以课前预习
  • 梳理出对于一款 APP,在开发之前(Coding 之前),一些通用而又重要的准备工作,适合于所有 APP 开发,而非单指 APICloud。
  • APICloud 平台介绍

    • 查看 APICloud 平台能力

      APICloud 平台能否满足自己的 APP 开发需求?

      查看 APICloud API 文档了解 APICloud 文档组织结构,学会通过文档搜索,找到需要的功能。
      APICloud 平台功能体系:
      APICloud 平台功能体系

      文档搜索,找到需要的功能
      例如:视频播放功能
      搜索视频播放

      APICloud 提供了很多解决方案;
      视频播放模块

      点开其中一个,可以看到提供的功能、代码示例等等。
      视频播放模块

      • APICloud 应用的开发模式和使用的技术语言
        前端开发者开发模式:HTML/CSS/JavaScript + APICloud 扩展 API
        原生开发者
        代码自动生成

        APICloud 扩展 API 调用方式:

        1
        2
        3
        4
        5
        6
        7
        8
        9
        核心模块在 window.api 对象下,不需要单独引用,可以直接调用
        api.methodName(param, callback);

        扩展模块需要 require 引入,遵守 CommonJS 规范
        var module = api.require('moduleName');
        module.methodName(param, callback);

        param: {} //参数,是一个JSON对象
        callback: function(ret, err){} //回调函数,是一个Function对象,方法调用的结果通过此函数返回

        例如:

        打开新窗口:api.openWin();
        打开系统通讯录:api.openContacts();
        录音:api.startRecord();
        缓存网络图片:api.imageCache();
        加载 fs 模块:var fs = api.require(‘fs’);
        新建一个文件:fs.createFile();
        加载二维码/条形码扫描模块:var scanner = api.require(‘FNScanner’);
        打开二维码/条形码扫描: scanner.openScanner();

        为什么要扩展 API?

        扩展API

        APICloud 聚合 API可以看到 APICloud 扩展的功能

        APICloud 平台定位:
        平台定位

      • APICloud 技术、产品、生态、案例、商业模式的总体介绍

        推荐视频入门概念篇 1-3 讲

      • APICloud 开发者相关的服务支撑体系

        如何解决开发者的问题?能为开发者提供哪些机会?是否有围绕开发者的生态模式?
        是否有一个完善的开发者相关支持服务体系来方便技术学习和社区交流?
        是否有一个完善的生态体系,来支持支撑 APICloud APP 开发,来满足各种不同的行业需求,来支撑实现需求复杂,功能强大的应用

      • 新手应该如何开始入门 APICloud 应用开发

        新手开发指南
        APICloud 新手教程集合贴
        视频教程
        线上培训

  • APICloud 平台使用流程

    • APICloud 云控制台使用

      开发控制台

      APICloud 应用开发的基本流程

      • 创建应用
      • 配置图标启动页
      • 设置证书
      • 同步代码
      • 添加模块
      • 云编译

      推荐视频入门概念篇 第 5 讲

    • 选择一款主流 H5 编码工具并安装相应的 APICloud 插件

      APPLoader 加载 Widget 的路径:
      android: sdcard/UZMap/wgt/
      ios: Document/uzfs/wgt/

      推荐视频:APICloud 视频之初级代码篇第 9-11 讲自定义 loader 使用
      推荐文档:自定义 loader 说明

    • APICloud 应用开发的基础操作流程
      APICloud 应用开发的基础操作流程

      在 APICloud 平台上有 4 种查看 APP 运行效果的手段:

      官方 AppLoader
      自定义 AppLoader
      云编译测试包
      云编译正式包

  • 应用需求分析

    • 梳理需求说明文档

      输出需求说明文档

    • 进行 UE/UI 设计

      输出 UE/UI 设计: 产品原型文件、原始 UI 设计图、UI 切图

  • 总体架构设计

  • APICloud 应用设计思想

UI 架构设计

  • APICloud 应用的 UI 组成结构

UI 组成结构

功能点分解

开放服务选择

数据接口定义


相关资料
APICloud 7 天培训课
APICloud 七天在线培训课教程
模块 store 常见模块必备使用指南
数据云服务
APICloud 优秀案例直播系列活动汇总
APICloud 社区精品源码集合贴
APICloud 视频
30天 App开发从0到1

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.