从零单排微信小程序--[0]:Hello World
来源:互联网 发布:大数据平台基础设施 编辑:程序博客网 时间:2024/06/07 00:11
该系列文章是在观看了慕课网的实战课程“微信小程序入门与实战”后的一些所思所想,将学习中所遇到的一些问题列出来,以供大家参考
0:如何开始微信小程序的编写
开发工具的下载:点击打开链接,开发文档:点击打开链接
开发工具的安装非常简单,跟普通程序的安装一样,这里就不列举了。运行之后的界面如下:
点击添加项目后的界面
如果没有AppID时,第一项选择“无AppID”,这样不会影响开发,只是开发出来的项目不能在真机上浏览。项目名称自己取,项目目录选择一个文件夹,初始化就可以了(可以把在当前目录中创建 quick start 项目 前面的勾选中,这样会产生默认的项目结构代码)
创建后的项目目录如图
1.项目结构说明
根目录有三个文件,app.js,app.json,app.wxss.
app.js是项目的脚本文件,app.json为项目的配置文件,app.wxss为项目的样式文件,具体的配置可以参见官方文档
pages目录下是每个页面的文件,每个页面的文件也包括.js .json .wxss,wxml文件,其中第四个是页面的骨架文件,可以联想为一般web开发中的html文件
2.写一个Hello World呗
现在,我们来写我们的第一个页面,即hello world页面
首先,先删除pages下的文件夹,然后再wenlcome文件夹下面依次新建.json,.wxss,.wxml,.js文件,现在的项目结构如图所示
这时候所有的文件都是空的,此时编译,会提示如下错误
查阅文档后发现,新增加一个页面时,要在app.json里进行相应的配置,所以给这个文件做如下代码的编写
{ "pages":[ "pages/welcome/welcome" ]}
这些代码的作用就是注册一个页面,具体到代码里,它告诉IDE,寻找一个在pages文件夹下,welcome文件夹下的名叫welcome.wxml文件
增添了这些后,调试依然出错
这个错误的原因是没有在welcome.js中配置Page函数,那我们配置一个空的Page函数如下
Page({ })
编译不会报错
此时我们去编写welcome.wxml文件,也就是页面文件,代码如下
<view> <text>hello world</text></view>这里,view标签和text标签都是微信小程序官方所定义的标签,具体的设置请前去官方文档,这里我们可以简单的理解为view就相当于div标签,text就相当于p标签,
这是刷新页面,控制台无报错,但是模拟器中是空白,这是怎么回事呢?
这里也让我纠结了好久,后来查到原因是welcome.json里没有配置,所以配置如下
{ }这样,就能看到我们的hello world啦,
如果还是不能解决,并且确定代码没有任何问题,那么建议按照以下步骤尝试:
在调试-》缓存里清除数据、文件缓存;
完全退出微信开发者工具;
再次打开微信开发者工具;
然后再编译一下小程序;
以上步骤一般来说是可以解决问题的。
我们的第一步教程就到此为止啦,下面的教程将沿着学习的脚步,一起制作第一个小程序!
- 从零单排微信小程序--[0]:Hello World
- 【go语言从零单排1】在mac环境下配置go,Hello world!
- 微信小程序从零开始(零)-Hello World
- 微信小程序从零开始(零)-Hello World
- 从零单排开发微信小程序(1)
- JAVA从零单排0-----前因
- 从零单排1
- 从零单排2
- 从零单排3
- 从零单排4
- 从零单排5
- 从零单排6
- 从零单排7
- 从零单排8
- 从零单排9
- 从零单排10
- 从零单排11
- 从零单排12
- linux系统中安装jdk1.6.0-转自红联linux
- HDU:3790 最短路径问题
- AWS、Azure和谷歌云计算价格比较
- java环境配置以及如何在cmd窗口运行java代码
- 保存图片到本地和系统图库
- 从零单排微信小程序--[0]:Hello World
- 为什么 iOS 开发中,控件一般为 weak 而不是 strong?
- 配置weblogic dndi
- adb fastboot 命令总结
- jQuery 效果 - animate() 方法
- 关于C语言的隐式类型转换
- jQuery 效果 - animate() 方法
- Android静默安装和自动安装
- NS2笔记 invalid command name "Agent/TCPSink/mTcpSink"......