学习教程-微信小程序开发一-路羽博客-第1张图片

学习教程-微信小程序开发一

学习教程-微信小程序开发一-路羽博客-第2张图片

作者: 路羽

原创资源分享博客

学习教程-微信小程序开发一-路羽博客-第3张图片微信小程序

路羽博客 资源分享

下载开发者工具
连接地址:
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html


注册小程序AppId等信息
连接地址:https://mp.weixin.qq.com/


创建项目

学习教程-微信小程序开发一-路羽博客-第4张图片

第一个小程序
1.删除所有文件,只保留project.config.json和sitemap.json

学习教程-微信小程序开发一-路羽博客-第5张图片

2.鼠标移动到项目名的哪一行,点击+号,创建app.js,app.json,app.wxss文件

学习教程-微信小程序开发一-路羽博客-第6张图片

3.新建文件夹,名为pages

学习教程-微信小程序开发一-路羽博客-第7张图片

4.右键pages,点击新建文件夹,输入home,然后右键home,点击新建page,输入home,会出现 home.js,home.json,home.wxml,home.wxss四个文件,同时app.json中也会出现home页面被添加 到pages的数组中(pages数组中的第一个页面为启动页面,当前启动页面为pages/home/home)

学习教程-微信小程序开发一-路羽博客-第8张图片

5.编写布局文件,点开pageshomehome.wxml文件,添加一个text,名为hello world。此时保存,可以看到模拟器上出现hello world。

学习教程-微信小程序开发一-路羽博客-第9张图片

6.设置text的颜色,点开pageshomehome.wxss,添加如下代码,保存即可。

学习教程-微信小程序开发一-路羽博客-第10张图片

 真机调试
点击开发工具上的预览,选择自动预览,点击编译并预览,即可再真机上看到效果,真机的微信必须和开发工具的微信保持一直,并且微信在前台运行。

学习教程-微信小程序开发一-路羽博客-第11张图片

本文最后更新于2020-5-31,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
分享到:
未经允许不得转载:

作者: 路羽, 转载或复制请以 超链接形式 并注明出处 路羽博客
原文地址: 《学习教程-微信小程序开发一》 发布于2020-5-31

评论

          
       
  1. 好想吃雪糕 游客 Lv.1

    如果更详细一点就好了

切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏