微信小程序是2017年推出的一种新型应用,通过微信生态圈提供给开发者一个开发小程序的平台。它可以在微信中打开,不需要下载、安装和卸载。具有原生应用的功能,随用随停,使用方便。在目前各种APP与手机之间良莠不齐的情况下,小程序的优势正凸显出来。
而ts是Javascript的一个超集,它可以编译为纯JavaScript,可以运行在任何JavaScript的环境中,而且ts和Javascript可以很好的进行互相转换,为了写出结构更加清晰、可读性和可维护性更强的代码,ts逐渐被人们所接受和使用。下面是ts开发微信小程序的原理或详细介绍。
1. 开发环境
首先,我们需要对开发环境进行配置,用npm进行安装:
```
npm install -g wepy-cli
```
然后,在命令行中使用如下命令创建一个wepy项目:
```
wepy init standard myapp
```
其中,"standard"参数代表我们要创建一个基本模板的项目,"myapp"是项目的名称。
2. 目录结构
在创建好小程序项目后,我们可以看到如下的目录结构:
```
├── dist // 微信开发者工具指定的编译目录
├── node_modules // 依赖模块
├── src // 代码编写的目录
│ ├── components // 组件目录
│ │ ├── counter.wpy // 组件文件
│ │ └── ... // 其他组件
│ ├── pages // 页面目录
│ │ ├── index.wpy // 页面文件
│ │ └── ... // 其他页面
│ ├── app.wpy // 应用配置文件
│ └── utils // 工具类方法
│ ├── api.js // 接口请求封装
│ ├── config.js // 通用配置
│ └── ... // 其他工具类方法
├── app.wxss // 全局样式
├── app.js // 应用入口文件
├── package.json // 项目配置文件
└── project.config.json // 项目配置文件
```
其中,最重要的是src目录,因为它是我们进行代码编写的地方。我们可以在components、pages和utils等子目录中,编写各种组件、页面和工具方法。
3. 组件开发
组件是小程序的重要构成部分,它可以实现页面的复用。我们可以将一个组件抽象成一个模块,根据需求,多处引用,减少代码冗余。
3.1 组件创建
在src/components目录下,新建一个组件文件:
```
touch counter.wpy
```
接着,在counter.wpy中,编写如下代码:
```html
import wepy from 'wepy';
export default class Counter extends wepy.component {
data = {
number: 0
};
methods = {
add() {
this.$apply(() => {
this.number++;
});
}
}
}
button {
margin: 20px 0;
}
```
这个组件将会添加一个“add”按钮和一个数字,每次点击“add”按钮,数字会增加1。
上面代码中,我们使用了wepy框架进行了一些封装。其中,模板(template)中,我们使用了一个button按钮和一个text文本框。样式(style)中,添加了一个20px的外边距,作为组件的样式修饰。而脚本(script)中,通过wepy.component进行组件的创建。data初始值设定了number为0,methods中的add方法中,使用this.$apply()函数来更新number的值。
3.2 组件使用
接着,在src/pages/index.wpy中,使用新增的组件:
```html
import wepy from 'wepy';
import Counter from '@/components/counter';
export default class Index extends wepy.page {
components = {
counter: Counter
}
}
```
这里我们从components/counter中引入了并创建了一个叫做"counter"的组件,并在模板中使用。
4. 页面开发
页面对小程序的核心功能起到了决定性作用,而小程序的所有页面,都是由一个一个组件组成的。当我们完成了多个组件的开发后,我们就可以把它们组合成一个个的页面,从而实现我们需要的功能。
4.1 页面创建
我们可以通过以下命令在src/pages目录下新建一个page文件:
```
touch index.wpy
```
然后,在index.wpy中,编写如下代码:
```html
import wepy from 'wepy';
import NavBar from '@/components/navBar';
import Counter from '@/components/counter';
export default class Index extends wepy.page {
config = {
navigationBarBackgroundColor: '#fff',
navigationBarTextStyle: 'black',
backgroundColor: '#eeeeee',
backgroundTextStyle: 'dark'
};
components = {
NavBar,
Counter
};
}
.logo {
width: 80px;
height: 80px;
}
.container {
margin-top: 20px;
}
```
在模板部分,我们使用了一个自定义的nav-bar组件,顶部标题为"wepy",左侧为logo图片。下半部分的模板代码与上面的示例组件中相同,添加了两个counter自定义组件。
在脚本部分,我们设置了页面的navigationBarBackgroundColor、navigationBarTextStyle、backgroundColor、backgroundTextStyle等属性,并在components中声明使用了navBar和counter组件。
在样式部分,我们为logo设置宽度和高度,并为container设置20px的上边距。
4.2 页面跳转
在微信小程序中,我们可以使用wx.navigateTo()函数进行页面跳转。下面是示例页面的跳转:
```html
import wepy from 'wepy';
export default class Counter extends wepy.component {
methods = {
navigateTo() {
wx.navigateTo({
url: '/pages/counter'
});
}
}
}
button {
margin: 20px 0;
}
```
在模板中添加一个“go to counter page”按钮,在methods中,添加了一个navigateTo()方法。这个方法使用了wx.navigateTo()函数,并传递了一个url参数,跳转到了pages/counter目录。
5. 接口请求
在小程序中,我们经常需要与后台服务器进行数据交互。我们可以使用微信小程序提供的wx.request()函数来实现数据的请求和处理,而在ts中,可以通过下面的函数进行请求封装:
```typescript
async function request(url: string, data: Object = {}, method: string = "GET") {
return new Promise((resolve, reject) => {
wx.request({
url: url,
data: data,
method: method,
success: function (res) {
resolve(res.data);
},
fail: function (err) {
reject(err);
}
});
});
}
```
我们传递了三个参数:url,data和method。在函数中,我们通过Promise和wx.request()实现了请求的处理和数据的响应。
小结
以上就是使用ts开发微信小程序的原理和详细介绍,从创建组件、组件的使用、创建页面、页面跳转、接口请求等方面进行了讲解。通过这样的方式,我们可以使用ts开发微信小程序,使得代码更加结构化、可读性更高、可维护性更好。学习ts开发微信小程序,具备一定的前端知识储备的同学可以实践一下,对业务开发和个人成长都有很多好处。