快速入门微信小程序开发

首先，你要有一点简单的html和css与js的基础，不过没有也没关系，会抄代码就行。

打开微信开发者工具新建项目（其他文章都有介绍，这里不做详述），这里重点讲解如何快速开发。

在 “1” app.json标示中主要进行文件的创建这里包括配置信息的设置，在"2" pages里面添加所要创建文件的路径(如美食推荐，文件夹为空)，这样编译过程中会自动生成类似于“4”中的 .js .json .wxml .wxss四个文件，当然四个文件各司其职，下面会讲到。

在“3”中，设置小程序底部tabbar的一些内容，这边顾命思议，很好理解每个字段代表的意思，pagepath 路径（选中状态时候加载的小程序页面） text 文字 iconpath 未选中时候图片显示 selectediconpath 选中时候图片显示。

下面讲解具体开发时候页面的绘制以及交互

一、先从.wxxml说起，作为小程序的展示页面，与html页面有点类似却也有不同的地方，这里在入门阶段，我觉得需要掌握的标签有

1、<view></view>

div和view都是盒模型，默认display:block。 盒模型在布局过程中，一般推荐display:flex的写法，配合justify-content:center;align-items:center;的定义实现盒模型在横向和纵向的居中。

2、<text></text>

text是文字元素，类似于行内块，有时候我们需要手动去修改它的display:block 将它强转为块元素，因为布局只对块元素有效果，下面会提到。

3、<image></image>

默认块元素，这边具体与html中的image类似，以及图片处理的三个方法

scaleToFill{使图片的宽高完全拉伸至填满image元素 图片会失真 } aspectFit{使图片的长边能够完全显示出来，但是可能会填充不完整} aspectFill{使图片的短边完全显示出来，但是结果可能会裁剪图片 }

4、<input></input>

input 的类型，有效值：text, number, idcard, digit, time, date 。

input不需要设置line-height或padding来纵向居中，默认placeholder的文字是居中的。 小程序把checkbox和radio都单独做成了组件，默认的input只支持输入文本。 上传文件在小程序里需要调用chooseImage事件完成; 小程序CSS里的 :focus 不生效，需要修改placehoder的样式，通过placeholder-class=”class”来定义。

5、<button></button>

button，顾名思义，按钮，类似于html的button标签。我们可以设置按钮的属性，比如字体颜色大小，背景颜色等，可以给按钮绑定事件，用户点击时会触发事件。

6、<picker></picker>

picker默认支持普通、日期和时间三种选择器。 picker通过bindchange事件来调取range中自定义的数据数据，并展示到页面中，调用的是系统原生的select。 这里小程序废弃了select组件，考虑到的是这个组件的交互不适合移动场景，最终用picker代替了。

7、<navigator></navigator>

navigator支持相对路径和绝对路径的跳转，默认是打开新页面，当前页面打开需要加redirect; navigator仅支持5级页面的跳转; navigator不可跳转到小程序外的链接地址; 登录页 在小程序开发工具里，默认打开新页面，工具左上角有返回按钮。加上redirect，当前页打开，不出现返回按钮。

其他的属性，就不做过多的罗列，以上的属性可以通过其他网站搜索然后学会简单使用即可，下面进入.wxml正题，代码如下图

这边跟html有些类似 "1" class 这里面包含了样式，还有尺寸计算，具体代码会在下面的.wxss文件中讲到。 "2" 中block标签 wx:for-items 是对.js文件数据回调for 循环用法(照抄即可),"3"使用双括号{{}}进行数据解析，item代表的是{{list}}中的一个对象。

二、再从.wxss开讲。

1、先说布局，这边首先要慢慢锻炼全局意思，刚开始还是建议:能包就包的原则。就是从大局划分页面，模块要展示的位置，它的平行元素，它的子元素，依次类推的划分，这块本身有点绕，具体问题具体分析处理。

2、布局本身是针对块元素的， padding margin内边距和外边距(left right top bottom)，eg：margin-top: 190rpx; 其中rpx代表的是相对位置，即随屏幕尺寸等比缩放。

3、布局好了，位置找准了，便是对该元素进行的修饰，可以是颜色color、字体大小fontsize、超出处理:overflow等等。

图中“1”小程序的xmss与css有很多类似的地方，这边的%是以屏幕宽度为基准，rpx是小程序引进来的一个相对的距离，随着屏幕的宽度变化而变化。

图中“2”是圆角的创建，图中"3"是对于文字溢出采用...的处理方法。

三、再一起看看.json文件

这边设置页面的navigation标题。

四、最后学习小程序中的js交互页面。

小程序页面这些方法是在一创建的时候就已经有了的，data中是全局变量，onload 方法类似与viewDidload(ios 程序员懂得) this 类似于self。 setdata方法接收上一个页面的传值。

网络请求方式，这边url是你请求的地址，method是你请求的类型，data是你请求时候传的参数。success是你请求成功时候获取到的数据，以及数据赋值，在赋值完成后，wxxml的block方法就会被调用。然后加载数据一气呵成。

这边navigateto方法实现页面的跳转，url中？后面是要传入hotdetail的值。

那么再回到最开始的那句话:"你可以一知半解，但是你一定要会抄呀。"

demo地址:https://github.com/pengjinguang521/wxSmallprogramDemo1.git

效果图：

转载于:https://juejin.im/post/5a604ab851882573392cc938