前言：
小程序 ——实际上就是基于微信平台的H5轻应用，微信将系统底层功能（设备、位置、媒体、文件等）和微信自身功能（登录、支付、分享等）封装成相应API供小程序调用。
自从微信小程序出来后，一直想找个机会上手体验一下，因为它跟我们移动端非常像，开发思想也很契合，而且很轻量，开发效率也很高。趁着公司最近在做技术分享，然后花了两天业余时间写了两个页面，算是有个大概的入门吧，在此做个笔记备忘。
因为本人之前写过一个开源的仿想去App的项目，有现成的接口和页面，我就直接拿那个项目的UI写了两个页面，以后有时间和机会再继续完善一下吧，本文可能没有什么技术含量哈，纯粹为了自己练手简单学习一下滴~
下面是小程序运行的效果，本文项目地址：WxDesigner
wxapp.gif
技术要点：
1、对网络请求进行了封装
2、banner的实现
3、横向列表和纵向列表及网格布局的实现
4、圆角图片的展示
《一》开发环境及账号准备
1、下载对应系统（Windows/Mac os）的微信开发者工具
image.png
2、注册一个小程序帐号，用于管理你的小程序。具体操作官方文档微信公众平台都有说明，在此不赘述。
《二》项目初建
1、打开微信开发者工具，新建项目，AppID选测试号即可。
image.png
2、新建的项目预览(左)及项目默认目录(右)如下，下面详细介绍一下项目目录结构。
image.png
小程序的目录结构及含义，我们基本都可以用Android项目开发的知识类比：
（1）app.json是小程序的全局配置文件，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。app.json可以理解为Android项目中的AndroidManifest.xml文件，写的所有的页面都要在"pages"里面配置。
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json"
}
（2）wxml文件，所有的页面都有对应的xxx.wxml文件，类似 HTML 的角色， 由标签、属性等等构成，用来描述当前页面的结构。与 HTML 标签不同的是wxml中的标签是微信包装好的开发组件，例如scroll-view、button、 text还有音视频组件等，wxml可以理解为Android中的xml布局文件。
<!--logs.wxml-->
<view class="container log-list">
<block wx:for="{{logs}}" wx:for-item="log">
<text class="log-item">{{index + 1}}. {{log}}</text>
</block>
</view>
（3）wxss文件，所有的页面都有对应的xxx.wxss文件，用来描述页面的样式风格的，类似于CSS。app.wxss为全局样式，每个页面下的为局部样式。wxss可以理解为我们Android开发中UI组件对应的各个属性样式，例如布局位置、颜色、字体大小、间距等。
.log-list {
display: flex;
flex-direction: column;
padding: 40rpx;
}
.log-item {
margin: 10rpx;
}
（4）js文件，所有的页面都有对应的xxx.js文件，用来处理用户操作和业务逻辑处理的。可以理解为Android中的Activity。
《三》入门开发小技巧
开发小程序跟开发移动端App类似，无非就是页面+数据+用户交互。
一般项目刚开始都是先实现几个Tab的切换来构建项目主体内容的展示，在小程序Tab的实现超级简单，直接在app.json中配置一下就搞定了。相比Android首页Tab及Fragment的搭建，真的是不能再省事了😂
"tabBar": {
"backgroundColor": "#fff",
"color": "#212121",
"selectedColor": "#d1a938",
"list": [
{
"pagePath": "pages/home/home",
"text": "设计",
"iconPath": "src/icn_designer.png",
"selectedIconPath": "src/icn_designer_highlight.png"
},
{
"pagePath": "pages/discovery/discovery",
"text": "发现",
"iconPath": "src/icn_guang.png",
"selectedIconPath": "src/icn_guang_highlight.png"
}
]
}
下面我们以logs页面为例，来了解一下页面的样式及数据绑定是如何实现的，以及如何处理简单的用户操作：
1、页面样式：这个就需要有扎实的CSS基础了，反正我的基础一般般😭
image.png
2、数据绑定：
image.png
①我们在js文件中的data:{ }声明需要绑定的变量及类型。然后通过
this.setData({声明的变量名称:变量的值})
给变量赋值，一般而言动态赋值都是从网络异步获取数据，固定数据的绑定直接写死就行。
②在wxml中通过 {{ }} 的语法把该变量绑定到界面上，即可完成数据的绑定。
③写一个列表就用一个 wx:for循环就完成了，对比Android写一个列表，这个简直不能太爽😂。
wx:for="{{logs}}" 表示对遍历数组logs；
wx:for-item="log" 表示声明数组每个对象的名称，可以不声明，默认名称为item，数组默认下标为index。
3、处理用户操作及页面数据的传递：这就简单讲一下点击事件的处理及页面数据的传递。
（1）点击事件：我们只需要给UI组件声明catchTap就能给对应的控件绑定点击事件了，即可以理解为Android中在xml中声明onClick事件
image.png
（2）当我们进行页面跳转时，肯定需要传递一些数据，下面就介绍一下类似Android中通过Intent来携带数据一样的方式来传递页面参数。
以本文案例中的home.js为例，点击首页分类菜单，进入商品分类列表。
image.png
通过在wxml中声明data-id,即要传的参数的值，然后在事件处理函数中通过 e.currentTarget.dataset.id获取到该参数的值，然后调用navigateTo进行页面跳转时，在页面路径中携带参数传递给要跳转的页面。
/**
* 点击分类进入分类详情
*/
categoryDetail: function(e) {
var categoryId = e.currentTarget.dataset.id;
console.log(categoryId)
wx.navigateTo({
url: '../category/category?id=' + categoryId
})
}
跳转的新页面在onLoad函数中的options取出传递的参数即可。关于页面参数传递的详细介绍可以参考：小程序页面传参
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
console.log("接收页面传递过来的参数" + options.id)
}
4、开发调试
（1）我们可以在Console中查看我们打印的日志，例如我在网络请求net.js中统一处理了接口返回的数据,打印出接口返回的结果。
image.png
（2）我们可以在AppData查看每个页面绑定的具体数据
image.png
（3）还可以在Network中查看到所有的网络请求的详细情况。
image.png
《四》新手遇到的一些小问题
（1）写wx:for时提示下面警告，需加上wx:key=""即可。
image.png
（2）由于微信小程序只支持https的网络请求，所以如果是http的接口，真机调试时，需要打开调试模式，才能正常访问到数据。
网友评论