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

发布于 2月23日  约 7 分钟

一、什么是微信小程序

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

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

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

三 、创建一个小程序

所有的前置工作都做好之后,我们打开微信开发者工具,输入你的AppID创建一个项目,如图:
image.png
创建完成后:image.png

四、小程序的结构

在创建完成之后,我们会看到这样的结构
image.png
首先我们看到了两个文件夹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。
其实小程序配置不止这几个还有:1、tarBar: 用来定义 tabBar的表现,tarBar下面是一个数组,最少配置2个,最多配置五个。2、networkTimeout: 用来设置各种网络请求的超时时间。

五、页面的美化

我们点开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....

六、事件的使用

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

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

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

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

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

阅读 279发布于 2月23日

推荐阅读
目录