微信小程序开发流程

1、先从官网下载微信开发者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

下载完成后图标识这个样子：

2、双击后点击加号，新建一个小程序

依次输入项目名，目录。AppID是唯一的，如果没有注册的话可以点击下面的测试号，会自动生成一个APPID，语言选择js即可。

 ---创建成功

 其中文件说明如下：

app.js：项目的入口文件

app.json:整个项目的配置文件

app.wxss:样式文件

自动创建的首页如下，每个页面都会包含四个文件，其实分别对应js、css、html以及该页面的配置文件（json文件）

 下图是utils文件，是一个自带的一个封装的模块文件并导出了，采用的是nodejs中的CommonJS的方式，使用require进行引入。

 下面来看一下app.json文件中的各部分功能：

pages:表示页面的数量，并且位于pages第一个先定义的，就是项目默认加载的页面，因此index就是默认显示的页面

window：表示整个窗体的配置，设置背景颜色、导航栏、文本、标题样式等

可以任意修改

效果如下：

3、小程序基本语法：

index.wxml
（1）通过bind为按钮绑定事件

index.js

（2）通过this.setData来改变数据，可以实现页面数据的双向绑定

（3）data：页面中需要显示的数据就放在这里

（4）在小程序中没有div容器，都是用的view，并且绑定属性用双大括号{{}}，且用bindtap绑定点击事件

（5）在小程序中建议使用rpx作为长度单位，在UI设计给的宽度750px的设计稿中1px=1rpx.

         如果设计稿的宽度为375px， 则1px=2rpx

4、在小程序开发中有各种组件，可以通过微信开放文档进行访问，然后可以在小程序中添加相应的组件

https://developers.weixin.qq.com/miniprogram/dev/component/

下面我们来举个例子，来了解如何使用上面的组件？

（1）首先在pages目录下创建一个home目录，然后在home目录下新建一个Page从，此时会自动创建相关的四个文件，如下图

（2）然后在index.wxml中写入轮播

效果是：

（3）轮播图片较少可以这样写，如果图片较多，这样写就比较复杂，我们可以使用循环的方式，如下：

注意：在小程序中，循环的时候是wx:for，与vue中的循环不一样，且里面的变量需要加上双大括号{{}}，然后在图片中进行调用js文件中data的属性值即可。

index.js：

index.wxml:

这里面的循环中有一个item，这个是小程序在做循环的时候默认带有一个item项，表示循环到的每一项

通过以上方式仍然可以实现效果。

5、小程序开发的时候如何调用接口？

在index.js中写数据请求：

此时保存后会报错：

原因：这是因为在微信小程序开发过程中，所有的这些网络请求的域名都需要在小程序的账号中设置一个白名单，我们可以在开发过程中隐藏掉接口的域名。

如何隐藏？点击页面右上角的详情：

然后点击本地设置，将不校验合法域名打上对勾：

此时就不会报错了。

如下方式调用接口（通过设置data属性），并在页面中进行调用接口中的数据：

这样的话调用接口成功了。

6、设置tabBar，在app.json的全局文件中设置tabBar

效果是如下图，可以进行页面切换：

7、在tabBar中插入图标

新建一个image目录，放入所要插入的图标

然后在tabBar中对图标点击与否设置一下：

效果如下：

 8、小程序页面跳转

在pages目录下新建一个detail文件夹

然后在index.wxml中写入：

 在home中通过navigator标签中的url属性进行跳转。

注意：在小程序跳转的时候使用 ？参数名1=参数值&参数名2=参数值

 第二种跳转方式（编程式路由跳转）：

首先在首页加入一个跳转按钮，需要添加点击事件

 然后在js文件中需要设置点击事件的跳转路径：

注意：navigatorTo方法不能跳转到被设置为tabBar的页面

 要想跳转到被设置为tabBar的页面需要用以下方法：

---------以上就是开发微信小程序的基本内容啦，你学会了吗！！