微信小程序小白开发的自我学习之路一

1、什么是微信小程序

首先咱们先明白什么是微信小程序，打开百度，直接就能收搜到微信小程序，简称小程序英文名Mini Program，是一种不须要下载安装便可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下便可打开应用。

2、开发的工具和开发环境

明白了小程序是什么东西以后，咱们就须要在学习以前准备一下学习开发所用的工具和须要的环境，这部分，腾讯的官方微信公众平台给出了小程序的设计、介绍、使用、注册、工具、数据绑定等几乎所有功能的说明，能够先去浏览一遍，内心对小程序开发有个粗略的认识，将工具下载安装，帐号注册，作好一切准备以后，开始学习之路。
微信开发者工具下载入口： https://developers.weixin.qq....
微信小程序官方平台文档入口：https://developers.weixin.qq....

三 、建立一个小程序

全部的前置工做都作好以后，咱们打开微信开发者工具，输入你的AppID建立一个项目，如图：

建立完成后：

4、小程序的结构

在建立完成以后，咱们会看到这样的结构

首先咱们看到了两个文件夹pages、utils 这两个文件夹，直接通俗易懂页面跟全局，pages文件夹里面放的都是小程序的一个个页面文件，utils里面放的就是小程序的一些全局文件，会影响全部页面的一些配置。而后咱们再看一下出现了四种后缀文件：js、json、wxml、wxss。有没有一种莫名的熟悉感？ 没错他们跟javascrip、html、css差很少：
js：相似于JavaScrip文件，负责页面逻辑。
json：项目配置文件，负责配置一些页面展现的数据。
wxml：相似HTML文件，负责页面结构展现。
wxss：相似CSS文件，负责页面样式。
明白了每种文件的含义，咱们就能够跟其余编程同样在各自的文件里写各自的代码了。
而后咱们打开项目自动生成的app.json配置文件看看里面都生成什么什么配置：

{

"pages": \[

"pages/index/index",

"pages/logs/logs",
\],

"window": {

"backgroundTextStyle": "light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "小程序",

"navigationBarTextStyle": "black"

},
}。

pages下面的表明的是每一个页面，咱们能够看到下面有两个文件index、logs 分别表明的是页面的主页面跟日志，那个页面在最上面，登录小程序第一个页面就是那一个 在编程的时候能够先把正在编程的页面放最上面，方便编程，另外说个小技巧在添加页面是能够先点添加目录，而后再添加的目录上面点击添加pages就不用来回的手动添加js，json，wxss、wxml文件了。
window下面的则定义的是窗口的配置信息。
backgroundTextStyle": 下拉背景字体、loading 图的样式，仅支持 dark/light，
"navigationBarBackgroundColor": 导航定义背景颜色,
"navigationBarTitleText": 定义的是小程序的名称
"navigationBarTextStyle": 导航栏标题颜色，仅支持 black/white。
其实小程序配置不止这几个还有：一、tarBar: 用来定义 tabBar的表现，tarBar下面是一个数组，最少配置2个，最多配置五个。二、networkTimeout: 用来设置各类网络请求的超时时间。

5、页面的美化

咱们点开wxml、css文件 wxml就跟web的html同样，用标签来构建页面的架构、惟一的区别就是微信小程序推出了一些新的标签来使用 例如index.wxml里面的

<view  class\="container">
<view  class\="userinfo">
<button  wx:if\="{{!hasUserInfo && canIUse}}"  open-type\="getUserInfo"  bindgetuserinfo\="getUserInfo"> 获取头像昵称 </button\>
<block  wx:else\>
<image  bindtap\="bindViewTap"  class\="userinfo-avatar"  src\="{{userInfo.avatarUrl}}"  mode\="cover"></image\>
<text  class\="userinfo-nickname">{{userInfo.nickName}}</text\>
</block\>
</view\>
<view  class\="usermotto">
<text  class\="user-motto">{{motto}}</text\>
</view\>
</view\>

相对于html里的div、p、span、微信是推出了view、text、button来使用 view至关于一个模块 text表明着段落其余标签基本相通，同时咱们发现一些熟悉的东西{{ }}
wx：if wx：else 是否是特别熟悉 有种写vue的感受？没错，微信小程序这里借用了他们，也有大括号语法，实现渲染和逻辑，例如：在WXML这么写 :

<text>{{msg}}</text>

在js里面就能够直接

this.setData({ msg: "daydayup" })

还有一些像wx：if/else wx：for的属性 基本也和vue大体相同，能够参考官方文档学习使用：https://developers.weixin.qq....

6、事件的使用

上面说了那么多都是在对页面进行美化，可是这是不够的，没有事件的加持，作出来的页面都是死了，并不能让用户得到体验感、互动感全部仍是须要事件来绑定标签
如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view bindtap="tapName"> 学习小程序 </view>

在相应的Page定义中写上相应的事件处理函数

Page({
  tapName:{
    console.log("daydayup")
  }
})

这就是在组件中绑定事件，同时还其余的一些像响应式的组件在官方的文档中也都有详细的说明能够参考学习https://developers.weixin.qq....以上就是最基本的小程序的搭建，学习更深刻固然能够进行更深刻的操做 如调用地图、相机什么的啦~