微信小程序学习之初探小程序_相关技巧

前言

9月21日,传言已久的微信应用号正式以“微信公众平台小程序”的名义发布,依然采取了内测制度,目前只有少部分开发者可使用。“微信之父”张小龙在朋友圈介绍,这种小程序是一种不需要下载安装即可使用的应用,用户扫一扫或者搜一下即可打开应用,对用户来说应用触手可及,对微信来说体现了用完即走的理念。应用号出来之后,有人说微信这次要颠覆AppStore了,开发者直接基于微信开发小程序就可以了,不用开发什么App了。更有人说微信就是一个操作系统,真的如此吗?不管怎样,我们下面先来一探微信小程序。

一 项目文件结构

当打开微信小程序的Demo的时候,我个人习惯是先看整个项目的文件结构,先大致弄清这部分是干什么的,那部分又是干什么的,微信小程序基本的文件结构如下图:

首先我们一眼就可以看到,在项目根目录有三个文件,app.jsapp.json,以及app.wxss,下面来谈谈我对这三个文件的理解。

1 . app.js

app.js中包含一个App()函数,我把它理解为微信小程序真正意义上的入口,也就是说当启动一个小程序的时候,首先会执行到这里。App()函数用来注册一个小程序,参数为Object类型,可以在其中指定小程序的生命周期函数(理解还不是很透彻), 当然,也可以定义一个全局的数据和函数,
我们可以在页面中调用全局的getApp()方法,获得小程序实例,从而来调用我们定义的全局数据和函数。

2 . app.json

app.json可以对小程序进行全局的配置,比如我们可以配置小程序有哪些页面、窗口表现形式、设置网络超时时间、设置多tab等。下面就是一个简单的配置:

{
"pages": [
"page/index/index",
"page/logs/index"
],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [{
"pagePath": "page/index/index",
"text": "首页"
},{
"pagePath": "page/logs/logs",
 "text": "日志"
}]
 },
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true
}

3 .app.wxss

app.wxss文件比较好理解了,它相当于一个全局的样式表,等同于前端中的css文件,任何页面都可以使用这个样式表,当然,如果某个页面重复定义了某个属性的表现形式的话,则会覆盖app.wxss文件中定义的。

以上三个文件中,app.js和app.json是每个微信小程序必须要有的,app.wxss则根据需要来添加。

在图一的文件结构中,还有三个文件夹目录:images,pages,utils,这种形式就类似我们开发中分包的做法(其实就是)-将具有类型性质的文件或者类分目录存放,这样便于维护项目。

我们来关注下pages目录,这个目录存放了小程序的所有页面。

这里我们定义了两个页面,index(首页)和logs(显示某种日志)。
可以看到,在每个页面中,也有类似前边儿我们所说的app.jsapp.json等文件,下面我们就来看看它们具体是什么。
以logs页面为例:

1 .logs.js

我们看一下这个文件中简单的代码:

//logs.js
var util = require('../../utils/util.js')
Page({
 data: {
 logs: []
 },
 onLoad: function () {
 this.setData({
 logs: (wx.getStorageSync('logs') || []).map(function (log) {
 return util.formatTime(new Date(log))
 })
 })
 }
})

如果你有过开发经验或者是js开发经验,那么一样就可以看出,这个类的结构很简单:1.引入了一个外部文件,2.有一个函数,进行了某种处理。

我们看一下官方文档是怎么介绍这个以js结尾的文件的:包含一个Page()函数,Page()函数用来注册一个页面。接受一个object参数,其指定页面的初始数据、生命周期函数、事件处理函数等。它是页面的逻辑文件,页面逻辑在这里处理。

在这个文件中,我们可以定义变量,函数等。

2 .logs.json

app.json是小程序的全部配置文件,那么不难理解,logs.json则是logs页面的配置文件,在这里我们可以配置页面标题等属性。

3 .logs.wxml

wxml文件是页面独有的,它相当于界面,它是与用户交互的入口,微信提供了很多基础组件,例如按钮,文本以及进度条等,都可以在这个文件中配置并显示出具体的效果。

4 .logs.wxss

wxss跟app.wxss文件一样,都是样式表文件,不过每个页面下的这个文件时对于某个页面的,而app.wxss则是全局的样式配置,相同属性的话,logs.wxss会覆盖掉app.wxss中的。

对于页面下的文件配置,我们来看一下官方的说明:

总结

以上就是微信小程序的整体项目文件结构,由宏观到具体,弄清整体框架后,再一步一步学习其中的细节,可能会更加轻松。想学习更多关于微信小程序的文章请继续关注。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索微信小程序
, 微信小程序开发
怎么开发
,以便于您获取更多的相关知识。

时间: 2024-09-11 14:35:14

微信小程序学习之初探小程序_相关技巧的相关文章

程序员学英语的一个方法_相关技巧

你可能会问程序员学英语干嘛?是啊.一个小的普普通通的程序员可能真的不用学习英语,甚至可以说学习英语就是浪费他的时间,还不如利用这些时间去敲一些代码,看看计算机的书,或者出去跟朋友喝喝酒,都会比这个有用的多! 话说回来,如果你想做的不仅仅是一个程序员,而是要做一个工程师,一个架构师--那么学习英语就会非常有必要了. 大家都知道计算机室外国佬发明的,编程语言也是外国佬创造的,很多的软件例如各种操作系统,桌面软件基本上都是由外国人发明的.所以如果你想梦想成真,那么学习英语将是你通过成功路上必不可少的一

微信 小程序开发环境搭建详细介绍_相关技巧

微信小程序可谓是今天最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会给移动端App带来一个寒冬,身为一个Android开发者我是不相信的,即使有,那也是很遥远的未来. 不管微信小程序是否能颠覆当今的开发格局,我们都要以好奇的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们一起来开始吧. 先放一张Github上demo的动态图 开发工具下载是看到GitHub上的分享.那么你可以直接

JavaScript/VBScript脚本程序调试(Wscript篇)_相关技巧

在实际工作中,我发现程序员对脚本抱怨最多的就是脚本程序很难调试这个缺点,特别是调试.vbs等WSH程序的时候,总是: 1. 在资源管理器里面双击一个.vbs文件. 2. 程序里面发生了一个错误,例如异常,或者编程逻辑错误. 3. 一行行阅读源文件,然后在估计发生错误的地方,添加很多的Msgbox.Show,打印一些变量的值. 4. 重新执行.vbs文件 5. "当当当",一系列的 "确定"点完了以后,人也晕了,重新回到第三步继续-- 其实我们也是可以用Visual

微信小程序版的知乎日报开发实例_相关技巧

先看看效果图 开发环境准备 小程序 出来第二天就被破解,第三天微信就把开发工具开发下载了, 现在只需要下载 微信开发者工具 就可以使用了, 创建项目的时候,要选择无 appid, 这样就不会有 appid 的验证了. 目录结构      1.app.js 注册app逻辑, app.wxss 全局样式文件 app.json 配置信息      2.pages 存放页面文件      3.utils 工具类代码      4.images 图片资源文件 小程序中每一个页面都会有三个文件 .wxml

ASP.NET也像WinForm程序一样运行的实现方法_实用技巧

由于现在会使用WinForm的人是越来越少了,可能有时候做点小东西就只好用ASP.NET去完成了(喜欢控制台的朋友请不要顶针),如果是这样,悲剧就发生了:一个小工具(或者小的演示项目),发给朋友去用,总不至于让人家也装个IIS或者VS20XX吧?如果没有这二样,这种小工具还真不方便运行.怎么办?做过ASP.NET开发的人都知道:网站通常要布署到IIS上才能直接运行,当然也不排除你用VS打开项目并使用VS自带的WebDev.WebServer.exe来启动程序.这种方式难免有不方便的时候. 我平时

千万要避免的五种程序注释方式小结_相关技巧

我把这些让人郁闷的注释方式归为了五类,同时把写出这些注释的程序员也归为了五类.我希望读了这篇文章后你感觉自己不属于其中的任何一种类型.如果你有兴趣的话可以读一下另外一篇文章 五种程序员(英文),和这篇讲到的五种程序员对比一下. 1. 高傲的程序员 复制代码 代码如下: public class Program { static void Main(string[] args) { string message = "Hello World!"; // 07/24/2010 Bob Co

写给正在读计算机专业的同学 该如何学习_相关技巧

一.这多东西啥时候能学完? 现在IT新技术日新月异.就常用编程语言而言,有c/c++.汇编.java,c#.Python等:操作系统平台有unix/linux,windows系列:开发工具有VC.VisualStudio2008.Eclipse.NetBeans等:每个大平台下,还有很多的的方向:如网络.数据库.脚本.HTML.动态网站.游戏开发等:有人还在学Dreamweaver做网页.Flash做动画.Photoshop做美工.3DMax做三维动画----是的,我们什么都想学.恨不得把所有的

微信小程序设置http请求的步骤详解_相关技巧

http请求介绍 HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则.计算机专家设计出HTTP,使HTTP客户(如Web浏览器)能够从HTTP服务器(Web服务器)请求信息和服务,HTTP目前协议的版本是1.1.HTTP是一种无状态的协议,无状态是指Web浏览器和Web服务器之间不需要建立持久的连接,这意味着当一个客户端向服务器端发出请求,然后Web服务器返回响应(response),连接就被关闭了,在服务器端不保留连接的有关信息.HTTP遵循请

微信小程序下载工具及调试详解_相关技巧

昨天晚些时候微信团队发布了微信小程序开发者工具.微信小程序开发文档和微信小程序设计指南,全新的开发者工具,集成了开发调试.代码编辑及程序发布等功能,帮助开发者简单和高效地开发微信小程序.以下是官方文档,内含小程序开发者工具下载地址及调试指南. 下载地址:开发者工具0.9.092300版 windows 64版:windows 32版:mac版 为了帮助开发者简单和高效地开发微信小程序,我们推出了全新的开发者工具,集成了开发调试.代码编辑及程序发布等功能. devtools 扫码登录 启动工具时,