一、前言

最近学院要求开发一个疫情期间全校使用的线上订餐小程序，因为之前没有学过小程序开发，所以这两天通过b站上的一个小程序商城开发视频，简单的学习了小程序开发的一些知识。

在开始之前想要提醒大家，小程序作为一个比较新的应用，他的开发技术其实是对之前的一些技术做一些包装和结合，所以之前有过前后端编程基础的人学起来会很容易，同样的，小程序的开发文档写的也非常全面，日常的开发完全可以照着开发文档去开发。

开发文档的地址在下面 developers.weixin.qq.com/miniprogram…

下面我们进入正题

二、小程序简介

小程序可以视为只能用微信打开和浏览的网站。小程序和网页的技术模型是一样的，用到的 JavaScript 语言和 CSS 样式也是一样的，只是网页的 HTML 标签被修改成了 WXML 标签，CSS标签被修改成了WXSS标签。

小程序最大的优势就是基于微信，也不需要考虑iOS和Android不同平台间的差异，同时微信也提供了丰富的API接口，例如拍摄、录音、语音识别、二维码等，小程序可以利用原生能力，快速进行开发。

三、知识准备

由于小程序基于网页技术，所以学习之前，最好懂一点网页开发。具体来说，下面两方面的知识是必需的。

（1）JavaScript 语言：懂基本语法，会写简单的 JS 脚本程序。

（2）CSS 样式：理解如何使用 CSS 控制网页元素的外观。

此外，虽然 HTML 标签和浏览器 API 不是必备知识，但是了解浏览器怎么渲染网页，对于理解小程序模型有很大的帮助。

总的来说，先学网页开发，再学小程序，是比较合理的学习途径，而且网页开发的资料比较多，遇到问题容易查到解决方法。但是，网页开发要学的东西太多，不是短期能掌握的，如果想快速上手，先学小程序，遇到不懂的地方再去查资料，也未尝不可。

四、开发前准备

小程序开发的第一步，是去微信公众平台注册申请一个APPID，是免费的。
申请完成后，你会得到一个AppID，这个后面创建项目的时候会用到。然后下载微信提供的开发小程序，后续的开发和调试工作都在上面进行。
安装好之后，打开软件，会提示你扫码登录。

登录后会出现项目管理页面，可以新建不同的项目，默认是新建小程序项目。

点击“+”，进入新建小程序页面

依次输入好项目名称、目录、AppID（注册得到的）、开始的时候可以选择不使用云服务，不使用模板，这样一个新的小程序就创建好了。

五、小程序目录结构

整个小程序的目录主要是由一个描述整体程序的 app 和若干个描述页面的 page 组成的

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件	是否必须	作用
app.json	是	小程序公共配置
app.js	是	小程序逻辑
app.wxss	否	小程序公共样式表

pages目录下每一个目录代表一个页面，每一个页面由四个文件组成，分别是：

文件	是否必须	作用
pagename.js	是	页面逻辑
pagename.wxml	是	页面结构
pagename.json	否	页面配置
pagename.wxss	否	页面样式表

六、主体部分页面介绍

小程序注册每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。详细的参数含义和使用请参考 App 参考文档。
小程序全局配置（app.json） app.json 小程序的全局配置，用于声明页面文件的路径、窗口显示、设置多tab等。完整配置项说明请参考小程序全局配置

七、小程序页面相关文件介绍

page.js 小程序的每个页面，都需要在页面对应的js文件中进行注册，同时可以指定页面的初始数据、生命周期回调、事件处理函数等。同样的，js页面也负责小程序页面的数据传递、页面交互等，功能类似于网页开发里的js。

2. WXML页面 wxml文件用来描述页面展示的代码：它和html页面主要有以下两个区别：

标签名字不太一样，微信小程序提供了丰富的组件供开发者使用，所以不需要使用类似 div、p、span的基础标签。
多了一些wx:if="{{!hasUserInfo && canIUse}}"这种{{}}的表达式，用的是 MVVM 的开发模式，将页面渲染和逻辑进行分离。通过 {{ }} 的语法把一个变量绑定到界面上，称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

八、商城系统开发介绍

以index页面为例，完整代码请看：github.com/liuweiabc/w…

1. 首先需要在app.json里进行导航栏的配置

导航栏的配置很简单，通过list的形式来配置，PagePath代表页面路径，text代表导航栏元素名称，iconPath代表该页面未被点击时的图标，selectedIconPath代表被选中后的图标。

2. 然后写index页面的wxml代码，将页面的内容确定好

```wxml
<!--index.wxml-->

<view class="container">

<swiper circular autoplay indicator-dots>

<swiper-item>

<image src="/images/temp/banner1.jpg"></image>

</swiper-item>

<swiper-item>

<image src="/images/temp/banner2.jpg"></image>

</swiper-item>

<swiper-item>

<image src="/images/temp/banner3.jpg"></image>

</swiper-item>

<swiper-item>

<image src="/images/temp/banner4.jpg"></image>

</swiper-item>

</swiper>


<view class="nav">

<view class = "menu" wx:for="{{navlist}}" wx:key="{{index}}">

<image class src="{{item.src}}"></image>

<text>{{item.title}}</text>

</view>

</view>

<text class="hot">热卖产品</text>

<view class="wrap">

<navigator class="product" wx:for="{{productlist}}" wx:key="{{index}}" url="/pages/info/info?id={{item.id}}">

<image src="{{item.src}}" mode="widthFix"></image>

<view class="info">

<text class="name">{{item.name}}</text>

<text class="price">{{item.price}}</text>

</view>

</navigator>

</view>

</view>

其中需要注意的有两点：

wx:for="{{navlist}}" wx:key="{{index}}"这种语句表示的是对js文件中定义的navlist变量进行遍历。
navigator标签控制了页面的跳转，详情可以参考开发文档中的页面跳转相关内容

3. wxss文件

wxss文件作用类似于css，对wxml文件的内容进行美化

```wxss
/**index.wxss**/

.container{

display: flex;

flex-direction: column;

padding: 0 10rpx;

}
swiper{

width:100%;

height: 400rpx;

}

swiper swiper-item{

width: 100%;

}

image{

width: 100%;

border-radius: 16rpx;

}
.nav{

margin-top: 10rpx;

display:flex;

flex-direction: row;

flex-wrap: wrap;

justify-content: space-between;

}

.nav .menu{

display: flex;

flex-direction: column;

padding: 10rpx 10rpx;

justify-content: center;

align-items: center;

}
.menu image{

height: 100rpx;

width: 100rpx;

border-radius: 50%;

}
.hot{

display: flex;

flex-direction: row;

justify-content: center;

margin: 10rpx;

}

.wrap{

display:flex;

flex-direction: row;

justify-content: center;

background-color: royalblue;

flex-wrap: wrap;

}

.product{

display: flex;

flex-direction: column;

justify-content: center;

border-radius: 16rpx;

width: 46%;

background-color: burlywood;

margin:10rpx 10rpx;
}
.product .info{

display: flex;

flex-direction: row;

justify-content: center;

}
.product .info .name{

font-size: 35rpx;

margin:0 10rpx;

}
.info .price{

font-size: 30rpx;

color: red;

}

.product .image{

width: 100%;

}

wxss文件主要还是遵循盒子模型的规则进行开发
目前使用比较广泛的布局是flex布局，详解介绍请看这里

4. js文件

js文件主要负责页面交互和数据传递 ```javascript // index.js

Page({

data:{

navlist:[],

productlist:[]

},

getNavlist:function(){

let that = this

wx.request({

url: 'http://www.hengyishun.cn/login/navlist',

success(res){

console.log(res)

that.setData({

navlist:res.data

})

}

})

},

getProductlist:function(){

let that = this;

wx.request({

url: 'http://www.hengyishun.cn/login/getProductList',

success(res){

that.setData({

productlist:res.data

});

}

})

数据存放在data里
通过wx.request访问服务器获取资源内容，详情请点击这里

微信小程序开发入门