wepy如何使用typescript来开发自己的项目?

Wepy网站管理员 Published the article • 0 comments • 34 views • 2019-08-05 15:37 • 来自相关话题

how to create wepy applicate writen in typescript?

### install and config

```bash
npm install @wepy/compiler-typescript typescript --save-dev
```

in `wepy.config.js`
```js
const TypeScriptCompiler = require('@wepy/compiler-typescript');

module.exports = {
"plugins": [
TypeScriptCompiler()
]
};
```

### 如何在wepy的文件中引入ts文件和项目

```

{{age}}



```

### ts文件

```ts
import wepy from '@wepy/core'

wepy.page({
data: {
age: 1
},
created() {
console.log(this.age)
},
computed: {

},
hooks: {

},
methods: {

}
})
```


### 引用

1. [compiler-typescript](https://wepyjs.github.io/wepy- ... script) 查看全部

how to create wepy applicate writen in typescript?

### install and config

```bash
npm install @wepy/compiler-typescript typescript --save-dev
```

in `wepy.config.js`
```js
const TypeScriptCompiler = require('@wepy/compiler-typescript');

module.exports = {
"plugins": [
TypeScriptCompiler()
]
};
```

### 如何在wepy的文件中引入ts文件和项目

```



```

### ts文件

```ts
import wepy from '@wepy/core'

wepy.page({
data: {
age: 1
},
created() {
console.log(this.age)
},
computed: {

},
hooks: {

},
methods: {

}
})
```


### 引用

1. [compiler-typescript](https://wepyjs.github.io/wepy- ... script)

微信小程序云开发可以上传php代码吗?

小程序网站管理员 Published the article • 0 comments • 48 views • 2019-08-04 12:45 • 来自相关话题

微信小程序云开发可以上传php代码吗?

这显然是`不可以的`。为什么这么说?之所以云开发是希望一套javascript代码搞定,所有的前端后端开发只需要你会javascript即可。后台数据库是mongodb,可以帮助我们存储字典对象的数据,对于javascript来说,前端上传什么数据,校验通过直接存储即可,不需要而外的sql或者防范sql注入之类的。

小程序的云开发其实很方便前端的同学,如果你了解MongoDB之类的数据库操作的话,前后端都可以搞定。 查看全部

微信小程序云开发可以上传php代码吗?

这显然是`不可以的`。为什么这么说?之所以云开发是希望一套javascript代码搞定,所有的前端后端开发只需要你会javascript即可。后台数据库是mongodb,可以帮助我们存储字典对象的数据,对于javascript来说,前端上传什么数据,校验通过直接存储即可,不需要而外的sql或者防范sql注入之类的。

小程序的云开发其实很方便前端的同学,如果你了解MongoDB之类的数据库操作的话,前后端都可以搞定。

wepy2.x回滚wepy1.x,wepy2.x从入门到弃坑

小程序网站管理员 Published the article • 0 comments • 717 views • 2019-08-01 15:42 • 来自相关话题

网上有很多开发小程序同学喜欢用官方的开发框架wepy,wepy现在有两个大版本,wepy1.x和wepy2.x。

但是这两个版本差异十分的大,我之前写了一篇文档介绍了,大家可以先看看这一篇[wepy1.x升级wepy2.x,wepy如何实现大的版本升级](https://www.sourcedev.cc/article/188)。

对比一下差异。你会发现当前把wepy的代码从wepy1.x升级到wepy2.x的时候,仿佛进入了新的世界,语法差异十分的大。如果不打算重构自己的代码,需要兼容wepy1.x的话,这将会是一个不小的工程。
我们需要耗费大量的时间重构和调试自己的代码。

那么升级了wepy2.x之后怎么办,我发现自己入坑,想回到wepy1.x怎么办? 这个时候我们也不用着急,应为我们的代码,即使有少量的改动我们也可以恢复的。
将修改的代码放入回收站内,回收站是一个栈。

### 修改的代码恢复保存

```bash
git stash save # 将代码压入栈

git stash pop # 弹出代码
```

### 重新安装wepy1.x的全局包:

```bash
npm install wepy@1.7.x -g
``` 查看全部
网上有很多开发小程序同学喜欢用官方的开发框架wepy,wepy现在有两个大版本,wepy1.x和wepy2.x。

但是这两个版本差异十分的大,我之前写了一篇文档介绍了,大家可以先看看这一篇[wepy1.x升级wepy2.x,wepy如何实现大的版本升级](https://www.sourcedev.cc/article/188)。

对比一下差异。你会发现当前把wepy的代码从wepy1.x升级到wepy2.x的时候,仿佛进入了新的世界,语法差异十分的大。如果不打算重构自己的代码,需要兼容wepy1.x的话,这将会是一个不小的工程。
我们需要耗费大量的时间重构和调试自己的代码。

那么升级了wepy2.x之后怎么办,我发现自己入坑,想回到wepy1.x怎么办? 这个时候我们也不用着急,应为我们的代码,即使有少量的改动我们也可以恢复的。
将修改的代码放入回收站内,回收站是一个栈。

### 修改的代码恢复保存

```bash
git stash save # 将代码压入栈

git stash pop # 弹出代码
```

### 重新安装wepy1.x的全局包:

```bash
npm install wepy@1.7.x -g
```

wepy1.x升级wepy2.x,wepy如何实现大的版本升级升级

小程序网站管理员 Published the article • 0 comments • 806 views • 2019-07-06 14:20 • 来自相关话题

要从wepy1.x升级到2.x这是一件比较困难的事情,因为框架的整个语法都发生了变化。正如官方所言:

> WePY 2 并不是基于 WePY 1 作的版本升级,而是完全重新开发的全新版本。因为实现原理完全不一样,因些比较难实现完全的向下兼容。

与其苦苦纠结如何升级,不如拥抱全新的版本,2.x实现了对typescript的支持,所以我们可以更加愉快的写代码

### 关于wepy1.x和wepy2.x的差异

> 1. 入口申请调整,WePY 1 使用类的继承方式 export default class MyPage extends wepy.page {} 在 WePY 2 中调整为 wepy.page({})。将实例化的过程放在生命周期事件中。

> 2. 数据绑定机制调整,WePY 1 使用脏检查进行数据绑定,却让开发者不知道使用时候去调用 $apply() 方法。在 WePY 2 中使用了 Vue Observer 实现数据绑定,告别$apply()。

> 3. 基于原生组件,WePY 1 是通过文件编译创建的静态组件在动态循环遍历时会出现一些问题,WePY 2 直接基于的小程序原生的组件去实现,避免了这一类问题。

> 4. Vue 模板语法,WePY 2 中推荐使用 HTML 代替 wxml 来写 template,支持除 filter 之外的所有 Vue 模板语法。

> 5. 编译方式改变,WePY 2 从基于文件编译调整为基于入口编译,因此对于图片等静态资源需要指定 static 选项 。


### 引用

[wepy官方2.x文档](https://wepyjs.github.io/wepy-docs/2.x/#/) 查看全部

要从wepy1.x升级到2.x这是一件比较困难的事情,因为框架的整个语法都发生了变化。正如官方所言:

> WePY 2 并不是基于 WePY 1 作的版本升级,而是完全重新开发的全新版本。因为实现原理完全不一样,因些比较难实现完全的向下兼容。

与其苦苦纠结如何升级,不如拥抱全新的版本,2.x实现了对typescript的支持,所以我们可以更加愉快的写代码

### 关于wepy1.x和wepy2.x的差异

> 1. 入口申请调整,WePY 1 使用类的继承方式 export default class MyPage extends wepy.page {} 在 WePY 2 中调整为 wepy.page({})。将实例化的过程放在生命周期事件中。

> 2. 数据绑定机制调整,WePY 1 使用脏检查进行数据绑定,却让开发者不知道使用时候去调用 $apply() 方法。在 WePY 2 中使用了 Vue Observer 实现数据绑定,告别$apply()。

> 3. 基于原生组件,WePY 1 是通过文件编译创建的静态组件在动态循环遍历时会出现一些问题,WePY 2 直接基于的小程序原生的组件去实现,避免了这一类问题。

> 4. Vue 模板语法,WePY 2 中推荐使用 HTML 代替 wxml 来写 template,支持除 filter 之外的所有 Vue 模板语法。

> 5. 编译方式改变,WePY 2 从基于文件编译调整为基于入口编译,因此对于图片等静态资源需要指定 static 选项 。


### 引用

[wepy官方2.x文档](https://wepyjs.github.io/wepy-docs/2.x/#/)

js从Excel拿到日期是一个浮点小数,时间格式问题怎么转换为时间戳?

网站管理员 Published the article • 0 comments • 371 views • 2019-06-20 15:23 • 来自相关话题

### 背景

js从excel中拿到的时间是一个浮点的天数,时间是1900-01-01开始到现在的天数

### 解决思路
1. 首先我们需要处理时区的问题,```getTimezoneOffset()```得到距离UTC的分钟时间差
2. 然后将时间转换为毫秒级时间戳,传入```new Date()```中,初始化对象
3. 由于时间戳开始时间是1970-01-01,所以```getFullYear()```要减去70年,得到UTC年份
4. 毫秒转换为时间戳除以1000即可得到,然后对其取整。

### js代码实例

```js
let value = 4564;
value = value + (new Date()).getTimezoneOffset() / 60 / 24;
let date = new Date((value - 1) * 24 * 3600000 + 1);
date.setUTCFullYear(date.getFullYear() - 70);
return parseInt('' + date.getTime() / 1000);
``` 查看全部

### 背景

js从excel中拿到的时间是一个浮点的天数,时间是1900-01-01开始到现在的天数

### 解决思路
1. 首先我们需要处理时区的问题,```getTimezoneOffset()```得到距离UTC的分钟时间差
2. 然后将时间转换为毫秒级时间戳,传入```new Date()```中,初始化对象
3. 由于时间戳开始时间是1970-01-01,所以```getFullYear()```要减去70年,得到UTC年份
4. 毫秒转换为时间戳除以1000即可得到,然后对其取整。

### js代码实例

```js
let value = 4564;
value = value + (new Date()).getTimezoneOffset() / 60 / 24;
let date = new Date((value - 1) * 24 * 3600000 + 1);
date.setUTCFullYear(date.getFullYear() - 70);
return parseInt('' + date.getTime() / 1000);
```

震惊了,微软在github上开源了PowerShell的源码

网站管理员 Published the article • 0 comments • 306 views • 2019-04-12 17:26 • 来自相关话题

微软在github上开放了powershell的源码,这家伟大的公司已经走在了开源的前沿,可以说没有几家公司能做到微软这个地步。

powerShell的源码是用C#写的,如果你是一个在windows上工作的程序员,还在用cmd的话,可能就过时了,其实还有git的bash等软件可以帮你处理一些自动化的工作。

我是一个linux的忠实粉丝,对windows的软件一般感兴趣吧,但是对于微软的开源我还是很敬佩的,忍不住star了一下。

PowerShell不仅支持window的系统,同样也支持mac,linux等系统,微软的同学编写了详细的文档,Recommended Training and Reading and Commercial Resources,如果你的英语不差的话,学习起来很快,当然微软还列出与bash不同的命令,如:ls -> dir,clear -> cls,touch test.txt -> New-Item -Path test.txt,这里就不一一列举了,想了解的同学,赶紧去star一下PowerShell这个项目吧 查看全部

微软在github上开放了powershell的源码,这家伟大的公司已经走在了开源的前沿,可以说没有几家公司能做到微软这个地步。

powerShell的源码是用C#写的,如果你是一个在windows上工作的程序员,还在用cmd的话,可能就过时了,其实还有git的bash等软件可以帮你处理一些自动化的工作。

我是一个linux的忠实粉丝,对windows的软件一般感兴趣吧,但是对于微软的开源我还是很敬佩的,忍不住star了一下。

PowerShell不仅支持window的系统,同样也支持mac,linux等系统,微软的同学编写了详细的文档,Recommended Training and Reading and Commercial Resources,如果你的英语不差的话,学习起来很快,当然微软还列出与bash不同的命令,如:ls -> dir,clear -> cls,touch test.txt -> New-Item -Path test.txt,这里就不一一列举了,想了解的同学,赶紧去star一下PowerShell这个项目吧

Swift入门笔记,简单摘要只适合个人

网站管理员 Published the article • 0 comments • 174 views • 2019-04-06 23:09 • 来自相关话题

### Swift 入门学习

#### 对苹果应用开发有一定的了解

1. 需要了解Apple的框架和Kit包
2. 苹果有两种开发语言,Object-c和Swift,Object-c是一种类C语言,如果对C语言比较了解的话,很快就能够入门了,而Swift这门语言是一门支持多编程范式和编译式的开源编程语言。
3. 了解环境的搭建,苹果开发当然是```Xcode```,还有一个IDE是AppCode,不过是付费的。
4. 基础语法
5. 关键词,deinit、typealias、subscript、operator,这是区别于其他语言的关键词
- init 构造函数,deinit 析构函数

#### 注意的类型
```swift
var test:Int? = nill
var test:Optional = nil
```

##### ```?```和```!```的区别

```?```表示可选,```!```表示强制解析类型,自动解析

### 数据结构

字符、数字、字符串、浮点、枚举、结构体、字典等。

### 函数

函数参数强制类型,返回强制类型,也支持返回元组,类似于python的返回,如果返回单个元素就不支持元组了。

1. 函数支持泛型
2. 闭包函数

```swift
func add(a: Int, b: Int) -> Int {
return a + b
}

func add(a: Int, b: Int) -> (result: Int, x: Int) {
return (a + b, 2)
}
```

### subscript 下标脚本,数组标 查看全部

### Swift 入门学习

#### 对苹果应用开发有一定的了解

1. 需要了解Apple的框架和Kit包
2. 苹果有两种开发语言,Object-c和Swift,Object-c是一种类C语言,如果对C语言比较了解的话,很快就能够入门了,而Swift这门语言是一门支持多编程范式和编译式的开源编程语言。
3. 了解环境的搭建,苹果开发当然是```Xcode```,还有一个IDE是AppCode,不过是付费的。
4. 基础语法
5. 关键词,deinit、typealias、subscript、operator,这是区别于其他语言的关键词
- init 构造函数,deinit 析构函数

#### 注意的类型
```swift
var test:Int? = nill
var test:Optional = nil
```

##### ```?```和```!```的区别

```?```表示可选,```!```表示强制解析类型,自动解析

### 数据结构

字符、数字、字符串、浮点、枚举、结构体、字典等。

### 函数

函数参数强制类型,返回强制类型,也支持返回元组,类似于python的返回,如果返回单个元素就不支持元组了。

1. 函数支持泛型
2. 闭包函数

```swift
func add(a: Int, b: Int) -> Int {
return a + b
}

func add(a: Int, b: Int) -> (result: Int, x: Int) {
return (a + b, 2)
}
```

### subscript 下标脚本,数组标

Swift Error: Use of 'print' nearly matches global function 'print(_:separator:terminator:)'

网站管理员 Published the article • 0 comments • 280 views • 2019-04-06 22:27 • 来自相关话题

swift开发学习过程中,写了一个demo联系了一下语法,类中写了一个方法为print,这个print中还调用了global函数```print```,结果导致如下错误:

```swift
Use of 'print' nearly matches global function 'print(_:separator:terminator:)' in module 'Swift' rather than instance method 'print()'
```

出现这个问题实在低级了,命名太随意了,导致这样的问题出现。意思就是方法优先匹配最近的函数,因为更近匹配的是类中的函数print,而不是global函数print。 查看全部

swift开发学习过程中,写了一个demo联系了一下语法,类中写了一个方法为print,这个print中还调用了global函数```print```,结果导致如下错误:

```swift
Use of 'print' nearly matches global function 'print(_:separator:terminator:)' in module 'Swift' rather than instance method 'print()'
```

出现这个问题实在低级了,命名太随意了,导致这样的问题出现。意思就是方法优先匹配最近的函数,因为更近匹配的是类中的函数print,而不是global函数print。

required HTML5 input标签使用required的时候如何修改提示文案

网站管理员 Published the article • 0 comments • 208 views • 2018-10-15 15:44 • 来自相关话题

### required HTML5 input标签使用required的时候如何修改提示文案

使用的方法是```setCustomValidity```有一个参数,就是提示的文案,
```oninvalid```是验证是,```oninput```当光标插入到input标签内是,将提示文案设置为空

```html

``` 查看全部

### required HTML5 input标签使用required的时候如何修改提示文案

使用的方法是```setCustomValidity```有一个参数,就是提示的文案,
```oninvalid```是验证是,```oninput```当光标插入到input标签内是,将提示文案设置为空

```html

```

JavaScript/js时间控件WdatePicker按周选择

网站管理员 Published the article • 0 comments • 1256 views • 2018-10-10 15:57 • 来自相关话题

## JavaScript/js时间控件WdatePicker按周选择

### 背景

策划有一个需求,后台统计分析是需要按周来筛选数据

需求如下:

- 选择日期内的任意一天
- 日期上方显示该周的时间范围[这周的开始日期-这周的结束日期]
- 例如:选择10月9号,上方显示时间范围为2018.10.8-2018.10.14
- 选择10月10号,上方显示时间范围仍为2018.10.8-2018.10.14

### 问题

由于后台的时间控件统一选择```WdatePicker```,但是这个时间控件不支持是直接支持这个方案的,需要使用其自定义的方案

### 解决方案

不难看出主要的解决方案就是```onpicked```这个方法,
```js
$dp.cal.getDateStr('yyyy/MM/dd') // 获取选中的时间格式化为: 20181010
$dp.cal.getP('w') // 获取选中时间为: 星期几
```
拿到星期几的话,我们就可以玩前后推算了,```parseInt($dp.cal.getP('w')) - 1```是前几天,```7 + parseInt($dp.cal.getP('w')) - 1``` 则是这周星期天的时间了

然后格式化一下时间就可以得到我们想要的时间了```date.Format('yyyy.mm.dd')```, ```Format```是对象```Date```的一个扩展方法,通过```prototype```实现的,```Date.prototype.Format = function(params) {}```

#### html表单

```html

```

#### picked函数

```js
function pickedFunc() {
var currentDay = new Date($dp.cal.getDateStr('yyyy/MM/dd')),
left = parseInt($dp.cal.getP('w')) - 1,
start = new Date(currentDay.setDate(currentDay.getDate() - left)),
end = new Date(currentDay.setDate(currentDay.getDate() + 7 - 1));
var data = [
start.Format('yyyy.MM.dd'),
end.Format('yyyy.MM.dd'),
];
$dp.$('date').value = data.join('-');
}
```

#### 时间格式化函数

```js
Date.prototype.Format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
}
return fmt;
}
``` 查看全部
## JavaScript/js时间控件WdatePicker按周选择

### 背景

策划有一个需求,后台统计分析是需要按周来筛选数据

需求如下:

- 选择日期内的任意一天
- 日期上方显示该周的时间范围[这周的开始日期-这周的结束日期]
- 例如:选择10月9号,上方显示时间范围为2018.10.8-2018.10.14
- 选择10月10号,上方显示时间范围仍为2018.10.8-2018.10.14

### 问题

由于后台的时间控件统一选择```WdatePicker```,但是这个时间控件不支持是直接支持这个方案的,需要使用其自定义的方案

### 解决方案

不难看出主要的解决方案就是```onpicked```这个方法,
```js
$dp.cal.getDateStr('yyyy/MM/dd') // 获取选中的时间格式化为: 20181010
$dp.cal.getP('w') // 获取选中时间为: 星期几
```
拿到星期几的话,我们就可以玩前后推算了,```parseInt($dp.cal.getP('w')) - 1```是前几天,```7 + parseInt($dp.cal.getP('w')) - 1``` 则是这周星期天的时间了

然后格式化一下时间就可以得到我们想要的时间了```date.Format('yyyy.mm.dd')```, ```Format```是对象```Date```的一个扩展方法,通过```prototype```实现的,```Date.prototype.Format = function(params) {}```

#### html表单

```html
onfocus="WdatePicker({isShowWeek: true, onpicked:pickedFunc, errDealMode: 3, maxDate: '%y-%M-%d'})"
readonly='readonly' name="week"/>
```

#### picked函数

```js
function pickedFunc() {
var currentDay = new Date($dp.cal.getDateStr('yyyy/MM/dd')),
left = parseInt($dp.cal.getP('w')) - 1,
start = new Date(currentDay.setDate(currentDay.getDate() - left)),
end = new Date(currentDay.setDate(currentDay.getDate() + 7 - 1));
var data = [
start.Format('yyyy.MM.dd'),
end.Format('yyyy.MM.dd'),
];
$dp.$('date').value = data.join('-');
}
```

#### 时间格式化函数

```js
Date.prototype.Format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
}
return fmt;
}
```