微信小程序入门学习

前(che)言(dan):

  近几天,微信小程序的内测引起了众多开发人员的热议,很多人都认为这将会成为一大热门,那么好吧,虽然我是一个小白,但这是个新玩意,花点时间稍稍钻研一下也是无妨的,谁让我没有女朋友呢,给我提供了大量的闲暇时光,对此我只想说:呵呵!。现在微信小程序刚发布还在测试阶段,可以说是1.0版本,所以框架和结构内容都还不多,这时候不学什么时候学?万一成为大牛了呢?万一有哪个妹子看上我了呢?想想还有点小激动呢。。。

 

正文:

  1.什么是微信小程序?

    简单的说很像 H5,它将 应用(功能与app相当) 嵌入到微信公众号中,用户无需安装应用,就能访问。相比app轻便了许多。

  2.开发者学习

    既然我们是程序员,乱七八糟的言论就不说了,像“这个东西以后会不会火啊?会不会取代app啊?好不好用啊?能不能找到女朋友啊?”这些问题,我只想说:除了最后一个问题,其他的管我吊事?好的!bb完了直接过来,干正事,代码看起来

    

    1.首先,我们需要下载安装 微信Web开发者工具,地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

 

    2.打开开发者工具后,扫码进去创建项目,普通用户是没有appid(这里的appid不是普通公众号的appid)的,选择没有appid就好了然后输入项目名称比如:HelloWorld,选择项目保存地址的时候选择一个新创建的空文件夹,并且勾选 quick start, 它就会帮我们创建一个简易的小程序demo,方便我们学习理解

 

    3.进入我们的项目以后,我们看到了一个简单的demo页面,在左边菜单栏中选择“编辑”,可以查看我们这个项目的文件和结构,从文件结构中我们可以看到他的文件类型无非 4种:

      .js : 这就是一个javascript文件,只不过它是微信基于javascript封装过的,所以很多js函数是不能使用的,比如localhost.href,微信加入了很多自身的接口,比如跳转页面是: wx.navigationTo()函数

      .json : 配置文件,可以配置页面头部title信息等

      .wxml : 视图结构文件,功能就像html文件差不多,用于描述页面结构,只不过它有自己独特的标签,不使用html标签

      .wxss : 视图样式文件,格式跟css文件一样,他在css的基础上扩展了几个特性 比如:尺寸单位 / 样式导入

 

 

    4.这时候我们在项目文件夹下看到了三个特别的文件app.js、app.json、app.wxss,你还别说,这三个文件是一个项目必不可少的文件,删除任意一个文件项目都会崩掉,它们都是干吗用的呢?

      app.js: 小程序逻辑,里面用了一个App()函数来注册一个小程序,他有一个object类型的自定义参数,普通页面的js文件中可以通过 getApp()函数拿到App()函数所拥有的参数,并调用其中的数据

      app.json: 这里是项目的全局配置 比如 每一个页面(一个页面包括四个部分[js、json、wxml、wxss])都要在 pages数组中声明不然是访问不到的, windows对象中可以设置窗口的样式

      app.wxss: 这里是一个全局的样式文件,会对项目的每个页面其作用,就如一个全局的css文件

 

    5: 项目运行过程:

      第一步:加载项目根目录下的 app.js、 app.json、 app.wxss文件,同时会执行app.js文件,并触发其中的onLaunch 和 onShow 函数

      第二步:加载app.json中pages数组中配置的第一个页面,作为项目的欢迎页,同时会执行对应页面js文件,并触发 onLoad / onReady 和 onShow 函数

      往后:页面可以通过事件与js文件交互,比如 在标签元素上绑定点击事件,并且指向js文件中的一个函数,就能用js中的逻辑去处理这个事件了

     

    6:几个小问题: 

      第一个问题:他这个东西没有初始访问路径,不科学啊,为什么他一运行就给我进到index.wxml页面了呢?

        答:那是因为我们在配置 app.json的时候,在pages数组中声明了所有页面,而它运行的时候就会默认打开第一个页面,简单粗暴,谁排第一谁就是爸爸!

      第二个问题:他这个index.wxml文件中没有引入index.js、index.wxss和index.json,他是如何调用到它们呢?

        答:我们可以理解为 index 页面被拆分成了四个后缀不同的文件,但事实上他们是一体的,嘻嘻,这种关联方式莫名的很爽  (index页面 = index.js + index.json + index.wxml + index.wxss  , 其中wxss和json文件在没必要时可以没有)

      第三个问题:虽然我知道了他们四个文件是互通的,但是我在index.wxml里要如何调用index.js中的数据和函数呢??

        答:index.js中需要调用一个 Page()函数来注册一个页面,他有一个object类型的参数,其中有一个data对象,比如 Page({data:{key:‘hello‘}}),这样我们在页面中就可以直接使用{{key}} 双大括号来指向这个变量了,而且是同步的哟,js文件中data值变化后,页面中调用他的值也会跟着变。如果要调用的是个function对象的话,那我们就需要通过事件来调用了,比如页面加载事件,他会去js中找onLoad函数,这个他是自动的,如果我们想在我们点击了某个元素后调用一个函数处理相应逻辑,那么我们需要在元素标签中添加 属性了 比如 <view bindtap="myTapEvent">按钮</view>  ,当我点击了“按钮”文字后, 他就能调用到 js > Page()参数 > myTapEvent函数。

 

最后我还是把微信 官方的文档放在这里, 大家可以直接看文档,现在初期内容不多,赶紧学起来

https://mp.weixin.qq.com/debug/wxadoc/dev/

好吧。初级的入门学习算是结束啦,之后会写一些更加深入的学习内容。 ^ ^

               

  

  

微信小程序入门学习

上一篇:微信小程序开发初体验


下一篇:微信openid获取(php),