微信小程序学习记录
2016-11-24 14:21
483 查看
一、创建一个项目
如果你没有微信小程序的 AppID ,那么就直接起个名字选择个空文件夹点击创建即可,随机将会自动给你生成一个仅有2个页面的简易微信小程序。
二、分析小程序结构
在编辑那一项可看到项目所包含的所有文件。
首先,我们来说一下app.js这个文件。它是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。想了解更多可用 API,可参考 API 文档(https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=1474974350348)。
app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意:1、该文件不可添加任何注释。2、和我们平常写html时所用到的 json文件不是同一概念。
page文件夹包含的是程序中所设计的页面,每个页面拥有一个独立的文件夹(如上图所示)。每个文件夹里又包含同样的4大文件,.js、.wxml、.wxss、.json 。每个文件的作用和外出文件的作用是一样的。就拿index.wcss这个文件来说,如果你在这个文件里写新的样式,并且在app.wxss文件中也写了同样的代码,那么index.wcss的优先级就比较高。一般来说,app.wxss/js/json文件一般用于写一些全局的东西。
三、分析页面代码
如果你懂得 html,那么你会很容易理解 .wxml文件。先看下面这个简单的例子。
有没有一种似曾相似的感觉?把view想象成一个个的div,把<image class="" src=""></image>看成<img src="" />,再把 <text class=""></text>当作<input type="text" value="" >。哈哈,,,万变不离其宗,思路方式都是一样的,就换了一层皮囊。来审查一下元素看看,
哦,原来是这个样子的。。。
最后来看下效果吧,但很不幸的是如果你没有一个微信小程序的AppID,那么将无法在手机上预览,仅能在调试一栏看效果。。。。很悲伤!
好了,今天的记录就到这吧,期待小程序快些开放吧!
如果你没有微信小程序的 AppID ,那么就直接起个名字选择个空文件夹点击创建即可,随机将会自动给你生成一个仅有2个页面的简易微信小程序。
二、分析小程序结构
在编辑那一项可看到项目所包含的所有文件。
首先,我们来说一下app.js这个文件。它是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。想了解更多可用 API,可参考 API 文档(https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=1474974350348)。
app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意:1、该文件不可添加任何注释。2、和我们平常写html时所用到的 json文件不是同一概念。
page文件夹包含的是程序中所设计的页面,每个页面拥有一个独立的文件夹(如上图所示)。每个文件夹里又包含同样的4大文件,.js、.wxml、.wxss、.json 。每个文件的作用和外出文件的作用是一样的。就拿index.wcss这个文件来说,如果你在这个文件里写新的样式,并且在app.wxss文件中也写了同样的代码,那么index.wcss的优先级就比较高。一般来说,app.wxss/js/json文件一般用于写一些全局的东西。
三、分析页面代码
如果你懂得 html,那么你会很容易理解 .wxml文件。先看下面这个简单的例子。
有没有一种似曾相似的感觉?把view想象成一个个的div,把<image class="" src=""></image>看成<img src="" />,再把 <text class=""></text>当作<input type="text" value="" >。哈哈,,,万变不离其宗,思路方式都是一样的,就换了一层皮囊。来审查一下元素看看,
哦,原来是这个样子的。。。
最后来看下效果吧,但很不幸的是如果你没有一个微信小程序的AppID,那么将无法在手机上预览,仅能在调试一栏看效果。。。。很悲伤!
好了,今天的记录就到这吧,期待小程序快些开放吧!
相关文章推荐
- 微信小程序学习笔记——CSS点滴记录
- 微信小程序 运行机制 框架原理(自我学习记录)
- 微信小程序学习记录1-添加页面顺序
- 微信小程序 根据官方文档学习记录
- 微信小程序学习记录二:简单的用户登录
- 微信小程序学习记录一: 参数的传递
- 微信小程序学习记录-视图容器
- 程序设计实践与提高1 - 学习记录
- 鱼油账号记录程序(续) - 零基础入门学习Delphi39
- 汇编语言学习记录--第一个汇编程序
- 开始记录学习程序的经历和领悟
- 1个小爬虫程序的学习记录
- 木其工作室(专业程序代写服务)[原]ok6410学习笔记(11.kobject学习记录)
- 20101009 学习记录:打包winform程序
- 程序设计实践与提高2 - 学习记录
- 微信/易信公共平台开发(三):记录用户状态,优化程序结构
- [转载]Hadoop学习全程记录——在Eclipse中运行第一个MapReduce程序
- 鱼油账号记录程序(续) - 零基础入门学习Delphi39
- 木其工作室(专业程序代写服务)[原]ok6410学习笔记(12.kset学习记录)
- Hadoop学习全程记录——在Eclipse中运行第一个MapReduce程序