微信小程序开发(一)之Hello World!
来源:互联网 发布:.net域名代表什么 编辑:程序博客网 时间:2024/06/15 23:36
一、工欲善其事,必先利其器——搭建开发环境
首先,到官方网站上下载一个开发工具,根据自己电脑的操作系统平台下载相应的版本。安装完成后运行开发工具,此时,需要用微信扫描上面的二维码才能继续后面的操作……
开发工具下载地址
二、创建工程项目——Hello World
具体操作步骤如下图所示,很简单,在此就不在赘述了。
![](http://upload-images.jianshu.io/upload_images/1952409-28135412ac9d7278.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
三、开始写代码
1、点击开发工具左侧的菜单项“编辑”,我们就可以看到我们刚刚创建的工程目录结构
2、在"pages"目录下创建一个目录“hello”。然后在“hello”目录下创建如下几个文件:hello.js,hello.json,hello.wxml,hello.wxss。最终效果图如下:
![](http://upload-images.jianshu.io/upload_images/1952409-fb3a5deee1e23093.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
3、终于可以写代码了
hello.js文件代码如下(注册页面):
Page({ data:{ hello:"我的第一个微信小程序……" }})
hello.json文件代码如下:
{ "navigationBarTitleText":"首页"}
hello.wxml文件代码如下:
<view> <view class="hello">{{hello}}</view></view>
hello.wxss文件代码如下:
.hello{ color:blue; font-size:28rpx; margin-left: 20rpx; margin-top: 20rpx;}
4、在app.json文件里“pages”数组下添加JSON代码“pages/hello/hello”,也就是我们创建的hello页面的路径;并修改“navigationBarBackgroundColor”键的值为:“#13b7f6”,“navigationBarTextStyle”的值修改为:“white”。app.json文件里最终代码如下:
{ "pages":[ "pages/hello/hello", "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#13b7f6", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"white" }, "debug":true}
5、点击左侧菜单“编译”即可运行我们的程序了,运行效果图如下:
![](http://upload-images.jianshu.io/upload_images/1952409-709cdce81eb7267f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
四、总结:
尽管我们已经成功运行了我们的“Hello World”程序,但我相信大家还是一头雾水,比如:我们创建的那几个文件和其他文件是什么关系,为什么要那样修改代码……接下来,我们就总结下吧
1、微信小程序系统分为两块:视图层(View)和逻辑层(App Service)
视图层描述语言是WXML和WXSS,逻辑层框架语言是基于 JavaScript 的。在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。文件关系图如下:
![](http://upload-images.jianshu.io/upload_images/1952409-73fbb8b5808b9ba7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
2、WXML 中的动态数据均来自对应.js文件里 Page()函数里 的 data,如下图:
![](http://upload-images.jianshu.io/upload_images/1952409-f991b004f8c5d579.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
3、app.json是小程序的全局配置文件,在此配置页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。如下图:
![](http://upload-images.jianshu.io/upload_images/1952409-d7ed6b43c4707c10.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
4、当创建好工程后我们可以按如下步骤模式 来完成编码:
(1)在pages目录下新建页面目录,如上面的hello目录
(2)在新建好的目录下(如hello目录)新建.js,.wxml,.wxss,.json四个文件,如上面的hello.js,hello.wxml,hello.wxss,hello.json
(3)在全局配置文件app.json里添加刚刚新建的页面路由信息,即在JSON数组“pages”里添加刚刚新建页面的路径,如上面的“pages/hello/hello”。如要添加更多设置则继续添加其他JSON信息,如网络请求,tab窗口等,详细配置信息指南请自行查看官方文档
(4)在.wxml文件里面编写视图布局代码,如上面的hello.wxml;在.wxss文件里编写CSS样式代码,这里的样式代码将作用于.wxml里面视图的显示样式
(5)用App()函数注册程序,该函数接受一个 object 参数,其指定小程序的生命周期函数等。如开发工具自动生成的app.js文件
(6)用Page()函数注册页面,该函数接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。也就是在.js文件里编写代码,如上面的hello.js
(7)在.json文件里编写JSON数据,如当前页面的标题,标题栏背景等
其实,只要理清楚.wxml,.wxss,.js,.json这4个文件彼此之间的逻辑关系,及其与app.js,app.json,app.wxss之间的关系就容易得多了
【欢迎各位大神批评指正,转载请保留链接……谢谢!】
- 微信小程序开发(一)之Hello World!
- 我的Android开发之旅(一)第一个程序Hello World
- Eclipse开发J2ME程序之Hello World
- Eclipse开发J2ME程序之Hello World
- Eclipse开发J2ME程序之Hello World
- Eclipse插件开发(一)Hello World
- Python Embedding 开发 - Hello World (一)
- iPhone 开发(一) Hello World 初试
- iPhone 开发(一) Hello World 开始
- Android开发历程(一) hello world
- SpringBoot开发入门(一)Hello World
- NDK开发 (一)Hello World!
- (一)nodejs入门之 'Hello World'
- SpringBoot入门(一)之Hello World
- Hello World 之程序人生
- 微信小程序从零开始(零)-Hello World
- 微信小程序从零开始(零)-Hello World
- windows 开发之hello world
- 列关于java 中的 wait()方法和 sleep()方法的区别描述错误的是?
- 从oracle导入到MongoDB-csv乱码-MongoDB3.2.x
- 理解伪元素 :before 和 :after
- CSDN Markdown Learning
- HDU 2588 GCD
- 微信小程序开发(一)之Hello World!
- scala基础3 —— 表达式和控制结构
- Unity3D自学笔记——脚本开发中的3D数学
- js中的this
- 网络编程
- C++实现格式化USB等设备
- docker 指定IP地址、与主机同网段IP
- Java-Review-Note——2.面向对象
- Gaussian Process