微信小程序是一种轻应用程序,它可以在微信内部运行,无需下载安装即可使用,因此使用方便,成为了很多人的选择。想要使用微信小程序进行开发,可以使用微信开发者工具,也可使用VS2015进行开发。下面将介绍详细的开发教程。
1.准备工作
在开始开发之前,需要做一些准备工作,如下:
1.1微信小程序开发工具
首先需要下载微信小程序开发工具,可以在微信公众平台上下载,选择自己的操作系统对应的版本。
1.2微信公众平台账号
想要开发小程序,需要拥有微信公众平台账号,并申请小程序的权限。
1.3VS2015
如果想要使用VS2015进行开发,需要安装VS2015。
1.4小程序demo
可以在微信小程序demo中下载模版并进行开发。
2.创建项目并下载代码
在VS2015中新建空项目,并选择“ASP.NET Web Application (.NET Framework)”模版。
在ASP.NET Web Application (.NET Framework)下的模版中选择“Empty”, 创建名为mini_demo的项目。
在创建的项目中添加“wwwroot”文件夹和项目文件。其中wwwroot文件夹中为代码子项目,项目文件为JSON文件。
在Command Line中进入项目文件夹,并执行npm i wepy-cli -g和wepy init standard mini_demo,安装wepy,并创建wepy项目mini_demo。
3.配置微信开发者工具
打开微信小程序开发者工具,选择“新建项目”,将mini_demo添加进去,选择所需要的项目根目录,在app.js中加入下列代码:
```
App(
wepy.$createPage({
data: {
},
onShow: function () {
},
onLoad: function () {
}
})
)
```
4.运行项目
在微信小程序开发者工具中,选择“编译”,检查是否出现出错信息。
选择“预览”,扫描二维码并进入微信小程序。可以看到已经可以正常运行。
5.开发
在完成以上步骤后,即可正式开发。
5.1目录结构
mini_demo文件夹中,wwwroot包含了web项目内部的代码,pages文件夹内定义了各个页面的具体表现和交互逻辑的封装。
5.2页面编写
在pages文件夹下,添加test.wpy文件,用于测试。
在test.wpy中,写入如下代码:
```
{{msg}}
import wepy from 'wepy'
export default class TestPage extends wepy.page {
data = {
msg: 'Hello World'
}
click () {
this.msg = 'clicked!'
}
onLoad () {
console.log('test.wpy is loaded')
}
}
.container {
background: #f1f1f1;
width: 100%;
height: 100vh;
}
.title {
text-align: center;
font-size: 24px;
margin-top: 100px;
}
.test {
text-align: center;
font-size: 24px;
margin-top: 50px;
}
```
在微信小程序开发者工具中,选择“编译”,检查是否出现出错信息。
选择“预览”,扫描二维码并进入微信小程序,可以看到test.wpy已经被成功展示。
注意:在这里的例子中出现了wepy这个框架,它是一个将vue类脚手架应用到微信小程序中的框架。
6.上传并发布
6.1上传
在微信小程序开发者工具中,选择“上传”,确认并等待上传完成。
6.2发布
上传完成后,在微信公众平台中找到小程序,选择“提交审核”,等待审核通过后即可发布小程序。
这便是用VS2015开发微信小程序的详细介绍。