1、首先下载开发工具

下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

第一个微信小程序开发

我电脑是windows64位的,所以我就下载对应的版本

2、安装,正常软件那样安装即可

3、安装完成后创建项目,生成文件

    APPID没有的话可以不填跳过(微信没邀请是没有APPID的)

4、目录结构如下

第一个微信小程序开发

app.js   app.json   app.wxss为全局文件,定义的参数和属性  全局使用

比如pages下的index包含的文件和logs包含的文件都需要用到同一个wxss的class,则可以写在app.wxss里

 

第一个微信小程序开发

app.json 中的pages 定义了文件目录,如果需要新增文件夹可以参考现有的进行添加

 

第一个微信小程序开发

app.wxss 相当于网页语言的 css ,也是定义样式表的

 

第一个微信小程序开发

 

用于编写函数。

5、index.wxml  类似于网页语言的 HTML5

比如实现一个用户名密码的输入框

第一个微信小程序开发

{{userInfo.nickName}}   是取登录用户的信息

{{kobe}}  是从index.js 读取的数据

第一个微信小程序开发

处理点击后的函数同样写于 index.js

第一个微信小程序开发

 

编译后运行结果在左侧

第一个微信小程序开发

点击登录后触发事件

第一个微信小程序开发

输入用户名和密码,再点击登录

第一个微信小程序开发

更多功能请参考微信小程序官方API

https://mp.weixin.qq.com/debug/wxadoc/dev/api/

转载于:https://my.oschina.net/xiaozhiwen/blog/1490382

相关文章: