首先，编写微信小程序必须知道三个网站：

微信公众平台
小程序代码管理
微信开放文档

一.创建项目

首先进入微信公众平台，扫码登录，选择小程序开发，我们可以看到这样的界面：

按照图中的顺序，我们可以在官网下载微信开发者工具，之后我们主要在这个工具上进行微信小程序的前端页面的开发与调试工作。将其下载下来，安装后如下所示：

打开微信开发者工具，页面如下所示：

按照上图顺序，就可以创建一个新的微信小程序工程了。点击创建之后，我们来到这个界面:

1:项目名称，这个按照自己的意愿可以随意取，只要不为空即可。

2:工程目录，即工程在你电脑上的具体路径

3:AppID，这个重新打开你的微信公众平台网页，点击右上角的头像，在最下方的账号信息中可以看到：

4:开发模式，我们在此选择小程序。

5:后端服务，在此为了更加灵活方便，我们选择不使用云服务，自己使用服务器提供服务。

6.选好之后，我们点击创建，即可进入自己的第一个微信小程序工程中。

界面如下:

刚刚打开一个新工程，我们会发现里面的各种各样的文件与文件夹特别多(和我这个界面有些不同，因为我这个是测试号，每一个微信账号只能有一个正常的开发工程，但是大体结构差不多)。其用意应该是让你了解一下他们的主要功能的用法，但是太复杂了会让人眼花缭乱，因此我们只需要关注两个地方：

page文件夹下面的index文件夹中的四个文件
最外层的app.json文件

现在我们来一个一个分析，首先index文件夹下面的四个文件的后缀名都不相同，分别为.js、.json、.wxml、.wxss。熟悉前端开发的小伙伴们应该就能猜出大概了，没错，js主要是用来写javascript语言的地方，用来放置控制主页面的一些方法，比如弹窗，比如点击按钮发生的事件。json文件用来对页面做一些基础设置。wxml文件类似于网页中的html页面，也就是主页面，用来放置各种标签的展示页面。wxss类似于网页中的css文件，用来写一些class，控制主页面的样式布局。因此写微信小程序需要有一些前端基础，至于如何补充前端基础，请移步菜鸟教程。

而app.json文件内容如下:

{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle":"black"},"style": "v2","sitemapLocation": "sitemap.json"
}

主要是控制整个工程的主样式，其中最重要的就是pages，pages里面放置的就是各个页面的路径，如果没有在这里面写你的页面的路径，程序就无法检测到你的页面，从而报错。

了解到这里，我们大概就可以知道微信小程序中，每一个单独的页面对应着pages文件夹下面的一个个单独的文件夹，文件夹里面有四个主要文件，分别控制着页面的具体内容(wxml)、相关方法(js)、基础数据(json)以及样式(wxss)。

所以，我们就可以大胆的把其他文件夹都删了，只留下index文件夹，我们的开发之路从index开始！

二、页面布局

view容器

视图容器，类似于HTML中的div标签，将页面分割为不同的块进行显示，每个块可以放置我们想要展示的东西。不过相对于div标签，view容器可以做一些比较简单的逻辑判断，比如if/else根据相关数据进行选择性展示内容。

比如:

<!-- index.wxml -->
<view style="width:100px; height:100px; background-color:red"><!-- 红色方块 -->
</view>
<view style="width:100px; height:100px; background-color:green" wx:if="{{1 > 2}}"><!-- 绿色方块 -->
</view>
<view style="width:100px; height:100px; background-color:yellow" wx:else><!-- 黄色方块 -->
</view>

保存之后自动编译并运行，我们可以看到效果如下:

由效果图可以看到，绿色方块没有显示出来，因为view容器内部做了一个简单的逻辑判断，即wx:if="{{1 > 2}}"，1大于2明显是假的，所不显示，将其改为小于号，绿色就能显示出来。但是黄色小方块又不显示了，这是因为第三个view中设置了一个wx:else。

注意:逻辑判断需要用"{{}}"双括号进行括起来，否则不生效。

除了if/else逻辑判断，还可以使用for循环:

<!-- index.wxml -->
<view style="width:100px; height:100px; background-color:red; margin-top:10px" wx:for="{{[1,2,3,4,5]}}"><!-- 红色方块 -->
</view>

保存之后自动编译并运行，我们可以看到如下效果:

因为在for里面传入了一个[1,2,3,4,5]这么一个数组，所以view容器会执行这个循环，从而执行五次，显示五个红色的小方块。

所以我们就可以使用这两种简单的逻辑判断按照自己的想法进行条件展示了。

view容器除了可以做一些简单的逻辑判断，还可以对整个页面进行划分排布，目前官方提供的排布方案主要有两种，一种是横向排布，一种是纵向排布。

横向排布:

display:flex;
flex-direction:row;

<!-- index.wxml -->
<view style="display:flex; flex-direction:row;"><view style="width:100px; height:100px; background-color:red; margin-top:10px; margin-left:10px" wx:for="{{[1,2,3,4,5]}}"><!-- 红色方块 --></view>
</view>

展示效果:

纵向排布:

display:flex;
flex-direction:column;

<!-- index.wxml -->
<view style="display:flex; flex-direction:column;"><view style="width:100px; height:100px; background-color:red; margin-top:10px; margin-left:10px" wx:for="{{[1,2,3,4,5]}}"><!-- 红色方块 --></view>
</view>

展示效果:

由此我们可知，默认是纵向排布的。

注意:无论是纵向还是横向，都是控制子容器的排布方式，而不是自己的排布方式，因此应该在需要排布的view容器上面再套一层view容器，在上层view容器上设置排布方式

这里就介绍一种最重要的view容器了，其他的组件或容器思路都差不多，想要了解更多请移步官方文档。

三、样式修饰

margin与padding

在上一节，我们都是直接在view容器上设置它的style,这样虽然刚开始很方便，但是当代码越来越多的时候，整个代码页面都充斥着这些style代码了，而且必然会出现很多重复的代码，比如第一个例子的三个view容器，他们的大小都是一样的，只是背景色不一样。因此我们可以将其提取出来，放到.wcss文件中，然后再在view容器的class中进行引用。

<!-- index.wxml -->
<view class="style-1"><!-- 红色方块 -->
</view>
<view class="style-2"><!-- 绿色方块 -->
</view>
<view class="style-3"><!-- 黄色方块 -->
</view>

/**index.wxss**/
.style-1 {width: 100px;height: 100px;background-color: red;
}.style-2 {width: 100px;height: 100px;background-color: green;
}.style-3 {width: 100px;height: 100px;background-color: yellow;
}

保存并查看效果:

这样整个代码界面就清新多了，因此建议使用这种方法对主页面进行修饰。

上图我们可以看到三个view容器都是紧密结合在一起的，那么怎么让他们隔开一些，从而让页面更美观呢，此处就用到了三个最重要，也是最容易混淆的css样式设置:margin、padding、border。很多人将这三个混在一起，每一次设置间隔的时候都是在这三个中间进行反复横跳去试(比如我)。

首先看一下官方定义:

margin:外边距,定义元素周围的空间。margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

padding:填充,定义元素边框与元素内容之间的空间，即上下左右的内边距。当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

border:边框属性,指定一个元素边框的样式和颜色。

由官方定义可知，border和margin、padding没有任何关系与交集，暂且放到最后来说。我们先看margin和padding，我们在浏览器上经常会看到这样的画面:

其实这样画很容易让人混淆，以为padding和margin作用差不多。

那我们来实践一下:

<!-- index.wxml -->
<view style="display:flex; flex-direction:row"><view class="style-1"><!-- 红色 --><view class="style-3" style="padding:30px 30px 30px 30px"><!-- 黄色 -->hello</view><view class="style-4" style="padding:30px 30px 30px 30px"><!-- 蓝色 -->hello</view></view><view class="style-2"><!-- 绿色 --><view class="style-3" style="margin:30px 30px 30px 30px"><!-- 黄色 -->hello</view><view class="style-4" style="margin:30px 30px 30px 30px"><!-- 蓝色 -->hello</view></view>
</view>

保存编译:

我们看到如上效果，左边两个方块都是用padding将上下左右添加了30px像素，右边两个方块都是用margin将上下左右添加了30px像素。

可以发现padding的作用是将自身进行扩展，让自己变得更大，从而将身边的容器挤出去。

而margin的作用是将自己身边分割出一片透明的区域，将自己和身边的其他容器分隔开来。所以padding和margin的作用对象还是不一样的。

当然，上面写的是将上右下左同时赋值，还可以单个方向进行赋值，比如margin-left、margin-top、padding-right、padding-bottom之类的。如果直接全部赋值，则从前到后遵循逆时针的顺序，即上、右、下、左。

border

也许有人会将border和margin与padding混淆在一起，但是border和margin与padding完全不一样的，如果只是设置border-top:10px，虽然也没有报错，也能运行，但是完全没有任何效果。因为border表示的是标签/容器的边框，如果只是设定了边框的大小，而没有设置边框的其他样式，那么透明的边框基本等于没有。

border的正常用法应该是border:length style color

其中length代表边框的宽度，style代表边框的样式，目前样式有十种。

样式	描述
none	无边框
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突
dotted	点状边框
dashed	虚线
solid	实线
double	双实线
groove	3D 凹槽边框
ridge	3D 垄状边框
inset	3D inset 边框
outset	3D outset 边框
inherit	从父元素继承边框样式

而颜色就可以随意设置了，只要别设置的和主容器的颜色一样就可以，只有这三者都设置了，边框才能显示出来。

<view style="display:flex; flex-direction:row"><view class="style-1" style="border: 5px dotted yellow"></view><view class="style-2"></view>
</view>

除了这些样式之外，还可以给边框添加圆角，即border-radius，边框大小既可以是像素级别，也可以是比例。

如下所示:

<!-- index.wxml -->
<view style="display:flex; flex-direction:row"><view class="style-1" style="border: 5px dotted yellow; border-radius:25px;"></view><view class="style-2"></view>
</view>

除此之外还有其他各种边框样式可以设置，此处就不一一赘述了，我在此只是说一些比较常用并且比较重要的内容，剩下的可以在W3school网站中详细学习。

四、绑定方法

上面讲了小程序页面中重要的两个文件类型:.wxml和.wxss文件的使用，下面来讲另外一个重要的文件类型:.js文件，这个文件里面就是写一些javascript方法，用来控制页面上一些组件和容器的行为。

点击进入html.js文件，我们可以看到这样的布局(我将不重要的内容都删除了):

// index.js
const app = getApp()Page({data: {},onLoad() {},
})

第一行是实现在 page 页面获取 app.js 定义的属性globalData,即获取全局数据。如果不需要这些globalData可以不写。

第二行的Page表示本页面，一些js方法都在这个Page里面定义。

第三行的data表示本页面中用到的数据，需要在.wxml文件中使用到的数据均可以在data里面进行定义。

后面的是生命周期函数onLoad，这是一系列函数中的一个，这个函数的作用是在页面初始化的时候做一些事情，比如渲染数据之类的。与之相似的函数还有五个

函数	作用
onLaunch	小程序加载完毕后就执行
onReady	页面渲染完成后执行
onShow	页面显示时执行
onHide	页面隐藏时执行
onUnload	页面关闭时执行

这些函数用不到可以不写。所以整个html.js文件中唯一必须的东西就是这个data。那么这个data是做什么用的呢？首先举一个例子：

<!-- index.wxml -->
<view wx:for="{{student}}" wx:key="index">{{student[index]}}
</view>

// index.jsPage({data: {"student": ['小明',"小红","小黄","小黑"]},
})

从上面可以看出，index.wxml文件可以引用index.js中的data中的数据。我们不必再在index.wxml中将我们要用的数据填充到view容器中了。

那如果我想在页面中添加一个按钮，点击一个按钮，添加一个学生，应该怎么办呢，这就需要使用到wxml中的button按钮以及绑定方法了。

<!-- index.wxml -->
<view wx:for="{{student}}" wx:key="index">{{student[index]}}
</view><button bindtap="addStudent">添加学生</button>

// index.jsPage({data: {"student": ['小明',"小红","小黄","小黑"]},addStudent:function() {var newStudent = this.data.student;newStudent.push("小绿");this.setData({student: newStudent})}
})

由上面可以看到使用bindtap可以对按钮绑定方法，只需要写方法名即可，在js文件中对该方法进行实现。

在实现中，我们向data里面的student数组添加数据，从中可以看出，如果方法中想要拿data里面的数据，是通过self.data.xxx进行获取的。但是我们为什么不能直接使用self.data.student.push("小绿")呢。这是因为微信规定不能直接对data中的数据进行修改，而必须要通过this.setData的方式间接修改，否则无法修改data里面的数据。

当然，除了button可以绑定方法，view也可以绑定方法，如下所示:

<!-- index.wxml -->
<view wx:for="{{student}}" wx:key="index" bindtap="updateStudent" data-index="{{index}}">{{student[index]}}
</view><button bindtap="addStudent">添加学生</button>

updateStudent:function(e) {var index = e.currentTarget.dataset.index;var newStudent = this.data.student;newStudent[index] = "我是小绿";this.setData({student: newStudent})
}

从上面可以看出，可以在view上直接绑定方法的，同样也是使用bindtap，同时，还可以传入需要的参数，参数通过data-xxx进行绑定并传入，比如上面绑定的就是student数组的index值。

然后在js文件中实现updateStudent方法，方法的参数中定义一个e，用于接收wxml传来的参数。而在方法内部，则使用e.currentTarget.dataset.xxx来获取wxml传来的参数，从而做出各种改变。

绑定函数的方法有多种，除了使用view、button，还有block等，具体请移步微信开放文档。

五、页面跳转

无参数跳转

我们在上面讲了单页面如何操作，但是一个微信小程序不大可能只有一个页面，那如果多个页面的话，应该如何进行页面之间的跳转与交互呢？

我们创建第二个辅助页面second:

可以选择直接复制index文件夹，然后统一改名即可。统一改名有个便捷的方法:

添加页面文件夹之后，我们要记得在app.json文件中进行注册，不然小程序就识别不到新加的页面:

好，基本工作准备好了，我们可以开始尝试页面跳转了。代码如下:

<!-- index.wxml -->
<view wx:for="{{student}}" wx:key="index" bindtap="updateStudent" data-index="{{index}}">{{student[index]}}
</view><button bindtap="addStudent">添加学生</button>
<button bindtap="toSecond">进入第二个页面</button>

// index.js
toSecond:function() {wx.navigateTo({url: '/pages/second/second',})
}

<!-- second.wxml -->
<button bindtap="backFirst">返回第一个页面</button>

// second.jsPage({data: {},backFirst:function() {wx.navigateBack({})}
})

点击进入第二个页面按钮，我们会进入到第二个页面，在第二个页面点击返回第一个页面按钮，我们会返回到第一个页面。

核心方法就两个:wx.navigateTo和wx.navigateBack，跳转页面时需要说明跳转的页面的url地址，也就是上面在app.json上新添加的那个页面地址pages/second/second但是注意pages前面要加”/“,表示从头开始，否则找不到对应的页面。返回页面就简单了，尤其是返回上一个页面，直接调用back就可以了。

带参数跳转与带参数返回

如果我们想跳转页面的同时，还带上一些信息，从而在下一个页面中进行处理。在下一个页面处理完之后，再返回到前一个页面进行展示，那应该如何做呢？

index页面:

<!-- index.wxml -->
<view wx:for="{{student}}" wx:key="index" bindtap="updateStudent" data-index="{{index}}">{{student[index]}}
</view><button bindtap="addStudent">添加学生</button>
<button bindtap="toSecond" data-index="3">进入小黑详情</button>

// index.jsPage({data: {"student": ['小明',"小红","小黄","小黑"]},addStudent:function() {var newStudent = this.data.student;newStudent.push("小绿");this.setData({student: newStudent})},updateStudent:function(e) {var index = e.currentTarget.dataset.index;var newStudent = this.data.student;newStudent[index] = "我是小绿";this.setData({student: newStudent})},toSecond:function(e) {var index = e.currentTarget.dataset.index;var content = this.data.student[index];wx.navigateTo({url: '/pages/second/second?content=' + content + '&index=' + index,})}
})

第二个页面:

<!-- second.wxml -->
<view>{{content}}
</view>
<button bindtap="backFirst">将小黑变成小兰并返回</button>

// second.jsPage({data: {content:"",index:0},onLoad:function(e) {this.setData({content:e.content,index:e.index})// console.log(e.content)},backFirst:function() {var self = thisvar pages = getCurrentPages();var prevPage = pages[pages.length - 2];wx.navigateBack({success: function() {var newStudent = prevPage.data.student;newStudent[self.data.index] = "小兰";prevPage.setData({student: newStudent})}})}
})

首先在第一个页面中的toSecond函数中，如果跳转页面需要带参数，则使用类似于浏览器的url地址的带参数方式，即?parm1=1&parm2=2&parm3=3....这种格式将参数传入进去。

而如果第二个页面想要接收参数的话，则必须定义一个onLoad方法，在页面加载时将参数获取到并展示到页面上，直接在参数e中取，如果要取参数parm1，则使用e.parm1，取参数parm2，则使用e.parm2，非常简单。

而如果想要在第二个页面修改其他页面的内容，则需要通过var pages = getCurrentPages();方法来获取所有的页面数组。该数组中，本页面在数组的最末尾，所以如果想取前一个页面，则使用pages[pages.length - 2]，拿到的内容就是前一个页面的句柄，可以获取前一个页面的data以及调用前一个页面的方法。最后在返回页面的时候，获取返回是否成功，如果成功，则修改前一个页面的内容。

注意:凡是涉及到在一些block里面，比如wx.xxx({})中使用this，必须在之前转换以下，定义一个其他的变量代表this，然后使用其他变量去取data以及调用本页面的方法，否则就会无法识别。

【微信小程序】(一)创建项目与前端编写相关推荐

【微信小程序】创建项目
微信小程序创建项目 1.新建项目,选择项目配置 2.查看项目目录 3.json配置文件构成 4.小程序的三大API 5.协同工作和发布 1.新建项目,选择项目配置 2.查看项目目录 pages 用来存 ...
详解微信小程序开发（项目从零开始）
关注公众号风色年代(itfantasycc) 280G前端&小程序资料随便拿! 详解微信小程序开发(项目从零开始) 一.序微信小程序,估计大家都不陌生,现在应用场景特别多.今天就系统的介绍 ...
微信小程序宠物商城项目源码来了~
微信小程序蒙服汇项目源码来了~ 微信小程序垃圾分类项目源码来了~ 微信小程序校园社团管理系统项目源码来了~ 团队承接各类小程序定制,需要加微 code_gg_boy .小商城,购物,公司的一些管理,流 ...
微信读书登陆界面java_（JAVA后端）微信小程序-毕设级项目搭建-微信阅读小程序（内含源码，微信小程序+java逻辑后台+vue管理系统）~不求完美，实现就好...
转载地址:(JAVA后端)微信小程序-毕设级项目搭建-微信阅读小程序(内含源码,微信小程序+java逻辑后台+vue管理系统)~不求完美,实现就好转载请注明出处一.环境搭建相关环境软件:JDK1 ...
【微信小程序】创建动态组件和引用的方法
实战内容:创建微信小程序动态组件并在其他页面中引用该组件欢迎关注收藏订阅专栏!!! 文章目录一.今日实战目标二.实战步骤 1.创建动态组件 2. 局部引用组件 3. 全局引用组件三.注意事项 ...
微信小程序电商项目开发实战漫谈
原创文章,若转载请于明显处标明出处和相关链接:https://www.toutiao.com/i6567868839856439822/,否则追究其法律责任! 2018年小程序内容电商风口已成,如果我 ...
微信小程序电商项目商品详情页开发实战之数据绑定与事件应用
各位CSDN的朋友,我们都知道,现在微信小程序电商平台特别火爆,所以我将以一个生鲜电商项目为例,为大家讲述微信小程序的实战化开发,价值几万元的成熟项目,你可千万不要错过哦. 大家直接通过视频链接直接看 ...
微信小程序电商项目实战-前言
各位CSDN的朋友,我们都知道,现在微信小程序电商平台特别火爆,所以我将以一个生鲜电商项目为例,为大家讲述微信小程序的实战化开发,价值几万元的成熟项目,你可千万不要错过哦. 大家直接通过视频链接直接看 ...
微信小程序电商项目源代码开放连载二三事
大家好,我发布的微信小程序电商项目连载视频,正式进入实战化阶段了,为了让大家更好的去学习微信小程序开发,我在gitbub上面,开放了源代码.随着视频的连载更新,我会逐步将源代码进行更新. 源代码发布地 ...
微信小程序练手项目-音乐播放器
微信小程序练手项目-音乐播放器该项目只适合练手,大佬请绕道项目展示图: 项目介绍微信小程序音乐播放器页面: 音乐推荐.播放器.播放列表功能: 播放.暂停.上一首.下一首.跳转播放列表.实时进 ...

【微信小程序】(一)创建项目与前端编写

一.创建项目