目录

微信小程序开发语言微信小程序开发教程详细步骤

微信小程序开发语言(微信小程序开发教程)详细步骤

微信小程序开发语言

开发微信小程序用什么语言

1、微信小程序开发所需要的语言比较特别,首先介绍一下需要使用到的文件类型大致分为:WXML(WeiXin Mark Language 微信标记语言)、WXSS(WeiXin Style Sheet 微信样式表)、JS(JavaScript 小程序的主体);

2、首先是WXML,它与Android开发中的界面XML描述文件比较像,适合于程序界面的构建;

3、WXSS与前端中使用的CSS在语言上几乎没有差别可以直接通用;

4、JS文件这个与前段中使用的JS也是几乎没有区别,当然针对微信小程序新增了一些微信的API借口,并去除了一些没有必要的功能;

微信小程序开发教程–从零开始

一、注册小程序账号

1、进入微信公众平台

https://i-blog.csdnimg.cn/blog_migrate/8af13ecc3edefec4ad7a0ba9f5b9e063.png#pic_center 2、点击立即注册

https://i-blog.csdnimg.cn/blog_migrate/8d5498fa6c11e817ab20344afd061da1.png#pic_center 3、选择小程序

https://i-blog.csdnimg.cn/blog_migrate/dd90e653ea37e5036fb30a403a2c10e2.png#pic_center 4、填写信息注册即可

https://i-blog.csdnimg.cn/blog_migrate/a98d183ce49bcbcd430cbe0945e53cf9.png#pic_center 5、绑定开发者

https://i-blog.csdnimg.cn/blog_migrate/abdc91115e359cdb16f3c1ecc8e537ae.png#pic_center 6、进入“设置-开发设置”,获取AppID信息。

二、下载微信web开发者工具

https://i-blog.csdnimg.cn/blog_migrate/866a6df826aa1affa3cf6b68d51bbf76.png#pic_center 1、点击小程序后的查看详情

https://i-blog.csdnimg.cn/blog_migrate/933901edd6e618116440d6b906d13248.png#pic_center 2、选择开发者工具

https://i-blog.csdnimg.cn/blog_migrate/2eb245e28af81de934bd718d28efd137.png#pic_center 3、下载对应系统版本的应用程序

https://i-blog.csdnimg.cn/blog_migrate/4af15541eb8d8376e9c9c317fe82110f.png#pic_center 4、安装开发工具

https://i-blog.csdnimg.cn/blog_migrate/d3e13e33bf140fe9bde5ddc9b672c8bb.png#pic_center 三、编写小程序实例

1、打开工具点击小程序项目

https://i-blog.csdnimg.cn/blog_migrate/c26b25c577de514e8e5a49bf0a9ec8e3.png#pic_center 2、填写相应信息,点击确定

https://i-blog.csdnimg.cn/blog_migrate/5a60b61ebb4d1f6e62e411331a6ff921.png#pic_center 3、实例目录结构

https://i-blog.csdnimg.cn/blog_migrate/f6e8f94cd9ae1e4b6bbbfe3076be7908.png#pic_center 4、app.js是小程序的脚本代码(必须),可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量,调用框架提供的丰富的 API。

https://i-blog.csdnimg.cn/blog_migrate/30917f415bfa719979c5a26f8bbf8dd7.png#pic_center 5、app.json是对整个小程序的全局配置(必须),用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成。微信小程序中的每一个页面的【路径+页面名】都需要写在app.json的pages中,且pages中的第一个页面是小程序的首页。

https://i-blog.csdnimg.cn/blog_migrate/d56e90095c16350cb3642fee9994d4db.png#pic_center 6、app.wxss是整个小程序的公共样式表(非必须)。

https://i-blog.csdnimg.cn/blog_migrate/5124970c7a64029f99c30db292f1195b.png#pic_center 7、index.js 是页面的脚本文件(必须),在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。

https://i-blog.csdnimg.cn/blog_migrate/3b7d96fb6401c116540ea57ff0969fd3.png#pic_center 8、index.wxml是页面结构文件(必须)。

https://i-blog.csdnimg.cn/blog_migrate/c0e15d14acfdc46fd5e1a5874cedddf5.png#pic_center 9、index.wxss是页面样式表文件(非必须),当有页面样式表时,页面的样式表中的样式规则会层叠覆盖app.wxss中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用app.wxss中指定的样式规则。

https://i-blog.csdnimg.cn/blog_migrate/30fe557c03a7e1fc1abce4a31ee1a0c8.png#pic_center 10、在编辑配置好后点击真机调试

https://i-blog.csdnimg.cn/blog_migrate/0cc8d1a26413510becece7ff3251d55f.png#pic_center 11、手机微信扫描二维码

https://i-blog.csdnimg.cn/blog_migrate/2587ff875836d5d6a79a2c4808aa851b.png#pic_center 12、自动弹出调试窗口,通过真机调试能够更好的测试小程序

https://i-blog.csdnimg.cn/blog_migrate/69ef45d0f097bc28add6529756b97c8c.png#pic_center 欢迎一起讨论开发知识。