微信小程序入门学习

Posted 2020-08-10 毅毅毅毅毅丶

前(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/

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