欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序开发教程 基础篇 01

程序员文章站 2022-03-31 11:04:27
...

最近在实习的工作中,有很多空闲的时间,觉得小程序挺有意思决定自己做一个,最后整合springboot,现在附上学习的过程,记录一下自己做小程序的过程。

 

1.注册小程序开发者id

这步很简单只需要去官网注册一个小程序账号就行。

 

2.下载一个微信开发者编辑器

一个微信小程序开发的编辑器,听说不是一定需要,不过有官方还是尽量用官方的吧比较方便。

 

3.开干!!!入门经典,hello man

首先得知道小程序得几个文件格式得含义

X项目

       Index

              --index.js (js文件)

              --index.json   (页面配置文件)

              --index.wxml (相当于html文件)

              --index.wxss (相当于css文件)

       --app.js (小程序逻辑文件)

       --app.json (小程序配置文件)

       --app.wxss    (小成勋公共样式文件)

 

这是一个微信案例得文件目录格式

如果是完全新建的项目首先:

1.把app.js、app.json、app.wxss文件建立起来,当然内容完全空白

微信小程序开发教程 基础篇 01

2.建立需要显示内容的目录(4个文件都需要,而且得同一个名字,因为mina框架会根据app.json文件下配置的目录将4个相同名字的文件整合起来编译)

微信小程序开发教程 基础篇 01

3.接下来要写 hello man 

按照逻辑在welcome.wxml页面上hello man就可以了

微信小程序开发教程 基础篇 01

写上之后需要让框架知道这个文件的地址,在之前说的app.json当中配置。

微信小程序开发教程 基础篇 01

另外需要注意 welcome.js 和 welcome.json 文件不能为空需要注意了

welcome.js:

Page({})

welcome.json:

{}

 

这样编译就没问题了:

微信小程序开发教程 基础篇 01

超级舒服,预览模式还可以在自己的微信号上查看效果

 

在这里我科普一个小技巧:在每次创建项目的时候不需要每次都自己创建项目,只要在app.json文件当中pages属性配置好路径,点击保存,会自动生成4个启动需要的文件。

相关标签: 微信小程序