你还不会小程序啊？手把手带你作第一个和服务器交互的小程序

2017年的时候，腾讯推出了微信小程序，当时火的一塌糊涂，圈子里几乎全部的程序员都在讨论小程序的话题；随着腾讯对小程序的功的逐步开放，2018年，尤为是在微信首页下拉增长小程序入口以后，小程序正式爆发了。所以，2018年，应该算得上是小程序的红利年。

首先就来推广一下铲屎官自制的小程序『六十四卦』

这个身轻如燕的查询类小程序，扫描上方的二维码便可体验。素材内容选自『周易神课』，你们自行定夺哈。

接下来我们继续说，这。。。一转眼今年已经剩下不到一半了，既然说了红利年，那还不赶忙放下手中的事情，专心的来看这篇铲屎官精心为你打造的『献给尚未写太小程序的你』这篇文章。

注意：小程序能够要和服务器交互的哦~~~

磨刀霍霍

想要开发小程序，首先得用小程序专门的IDE：微信开发者工具，下载地址：

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

请根据系统版本选择相对应的下载便可。

下载安装好以后，咱们打开IDE，这个时候会让咱们扫二维码登陆，登陆成功，界面就会长这个样子：

咱们点击『小程序项目』，而后咱们须要新建小程序项目，点击右下角的+号，而后就进入了建立界面：

这里咱们看到，有一个AppID，若是小程序没有AppID的话，有些功能会受限制。因此，为了全功能开发，咱们这里就只须要去微信公众号上面注册一下，而后就能够得到到这个AppID了。

微信公众平台地址：

https://mp.weixin.qq.com/

点击左上角的『当即注册』，而后选择小程序：

接着出现以下界面：

填写好你的邮箱，系统会给你邮箱发一封邮件：

从邮箱里面点击连接，而后会进入到信息登记页面：

如实登记，而后一切都准备好以后，就登录到了小程序的管理页面：

这里，咱们须要去补充一下小程序的基本信息。点击『填写』按钮，来到这个页面：

填写提交好以后，咱们就能够在设置里找到咱们的

小程序AppID

了：

那么接下来，咱们回到以前的页面，将小程序AppID填入。点击创建，就来到了小程序默认的模板里面。

这里就简单介绍一下这个模板的几个模块：

pages:

pages目录下都是小程序的页面，每个页面是一个文件夹，里面通常包含四个文件：

• page.js 页面逻辑js文件。
• page.json 页面配置文件，会覆盖掉app.json文件。
• page.wxml WXML充当的就是相似HTML的角色，编写页面。
• page.wxss WXSS和CSS相似，具备CSS大部分特色，负责装饰页面元素。

utils：

一些方法在这里面封装的。

app.js, app.json, app.wxss：

这三个文件的功能和page目录下每一个页面的三个后缀同样的文件功能相似，负责总体app的逻辑、总体app配置和总体app的页面布局。

project.config.json：

app的配置文件。

相关参考文档：

https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html

Daily实战小程序

光说不练，没鸡脖用。嘴炮谁都会打。要把科学知识落实到实际生产上来。那么，咱们就经过小程序的实战项目，将『【Python实战】这一次，他经过公众号访问最新的1024资讯信息』文中提到的 Daily Project 来搬运到小程序上来。

首先，咱们来总体分析一下这个Daily小程序的结构：

• 首页：展现入口
• Daily目录：显示当日信息。
• 内容详情页：展现Daily目录的

接下来，咱们分析咱们可能会用到的组件：

• 按钮
• 页面跳转
• 页面跳转传参数
• 页面的布局
• 网络请求
• 打开网页
• 。。。

好，这里咱们就先分析到这，这个Daily小程序须要用到网络请求接口，即Daily的资料来源，我已经在个人服务器上面写好了，这里就提供给你们，以JSON格式返回：

http://140.143.9.16:8000/meiju/playlist/homepage

接口返回数据长这个样子：

你们注意，这个地址不是https的，因此，在开发的时候，咱们须要在IDE的右上角，点击『详情』，而后在『不校验合法域名』前面打钩

OK，那咱们这里就先创建两个页面，一个叫dailylist，另外一个叫detail。新建页面只须要在app.json中的pages里面把路径输入好就能够。

这里要说明一下：小程序首先启动的页面就是app.json 的 pages 列表中的第一个页面。依照上图，这里咱们启动的是index页面。为了方便调试，咱们这里之后会修改为启动其余页面。

接着，咱们须要把原来index页面里的index.js文件清空整理一下，由于里面的逻辑和咱们如今须要的不同。咱们在这个页面写一个Button，做为 Daily list 页面的入口。因此，在 index.wxml 文件中，写入一下代码便可：

<view class='index_container'>    <button class='index_button' bindtap='gotoDaily'>Daily Project</button></view>复制代码

这里简单解释一下，在 button 标签中，class属性是用来和wxss使用的，修饰样式；bindtap 是用来增添逻辑的，是点击事件。咱们这时候须要在 index.js 文件中完成这个 gotoDaily 逻辑。

因此，在 index.js 文件里面，咱们建立一个函数，函数名字就叫 gotoDaily ，要保证函数名字和 wxml 文件里面写的 bindtap 变量名字如出一辙。

这个Button的逻辑是页面跳转，微信小程序提供两种页面跳转的方法：

• wx.navigateTo，经过这个方法从A页面跳转到B页面，B页面是能够从左上角的返回按钮返回到A页面的。
• wx.redirectTo，这个方法从A页面跳到B页面，A页面会被销毁，没法从B页面跳回A页面。

两个方法中，经过 url 参数来设置页面路径。这里就有微信里面绝对路径和相对路径两种写法了。

// 绝对路径写法    wx.navigateTo({      url: '/pages/dailylist/dailylist',    })    //相对路径写法    wx.navigateTo({      url: '../dailylist/dailylist',    })复制代码

这里页面跳转，用相对路径写法就能够。至于页面跳转之间是支持传递参数的，传递参数的方法以下：

// A页面传递参数    wx.redirectTo({      url: '../detailpage/detailpage?id=' + this.data.id,    })    // B页面读取参数    onLoad: function (options) {        this.setData({          checkNum: options.checkNum        })    }复制代码

wx.navigateTo 和 wx.redirectTo 的文档说明：

https://developers.weixin.qq.com/miniprogram/dev/api/ui-navigate.html

好咧，目前咱们就已经实现了在首页写一个按钮，点击按钮，进入到了 Daily list 页面。

那么咱们在 Daily list 页面，须要经过我上面写的那个地址来获取数据，而且展现到页面上。这里就涉及到了微信小程序的网络请求了： wx.request。

咱们这里是向服务器发送一个GET请求便可。而后解析返回结果便可，这里的代码张下面这个样子：

/**   * 页面的初始数据   */  data: {    hasData: false,    curTime: new String(),    dailyData: new Array  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    var that = this;    wx.request({      url: 'http://140.143.9.16:8000/meiju/playlist/homepage',      method: 'GET',      header: {        "Content-Type": "application/json"      },      success: function(res) {        that.setData({          hasData: true,          // 这里很关键，调用data.data才能够          dailyData: res.data.data        })      },      fail: function(res) {      }    })  },复制代码

这样，咱们就在 page 的 data 里面，将请求回来的数据保存下来。接下来，就是在页面上面渲染了。这里就涉及到微信小程序的数据绑定怎么写，在 wxml 文件里面写的大体以下（里面有for循环的写法）：

<view class='list_container'>    <block wx:if="{{hasData==true}}">        <text>最新美剧排行榜：</text>        <view class='list_data'>            <block wx:for="{{dailyData}}" wx:key="unique">                <text class="list_item" bindtap='gotoDetail' data-url="{{item.tv_play_name}}">TOP {{index + 1}}: {{item.tv_play_name}}</text>            </block>        </view>    </block>    <block wx:else>        <text>加载中。。。</text>    </block></view>复制代码

效果以下：

这里简单给你们讲一下：
微信小程序的数据绑定格式，是用 {{}} 来包裹的，里面的名字，是在page的data里面定义的。wxml支持一些简单的逻辑判断，好比 if 判断和 for循环，上面的例子就完美的展现了这两种逻辑的使用写法。其中，for循环的使用，{{index}}直接表示的是每个item对应的index值。item.post_title也能够写成item['post_title']。

咱们须要给每个text绑定一个点击事件，这里的点击事件最大的不一样就是，点击事件须要传递参数，这里咱们经过dataset来传递，这里咱们看到在text标签里面，有一个属性是 data-url ，这个就是dataset的使用方法。 data- + 任意名字。在js页面，咱们须要实现gotoDetail方法。代码以下：

gotoDetail: function(event) {        console.log(event)        var data_url = event.currentTarget.dataset.url        wx.navigateTo({          url: '../detail/detail?dataurl=' + data_url,        })    },复制代码

这样是否是就很明显了？ 经过event参数的currentTarget.dataset.url来获取页面中的data-url，而后再经过页面之间的参数传递，将url传递给detail页面。

这里有个小技巧，若是不清楚event里面含有什么东西的话，用console.log(event)是能够打印出来里面的结构的，以下图：

有同窗确定会问，这个界面是怎么出来的，别慌，这个界面就是调试器里面的console界面，入口在IDE的左上角：

目前为止，咱们的 Daily list 页面的编写就结束了，下一步就是来开发 detail 页面了。

咱们须要在 detail 页面里打开一个url。要作到这一点，微信小程序为咱们提供了<web-view> 控件。这个页面的写法也很简单，咱们只须要将从 Daily list 页面传过来的url塞给 web-view 就能够了。咱们在detail.wxml里面写：

<web-view class='detail_webview' src="{{pageurl}}"></web-view>复制代码

便可，在detail.js文件里面，经过前文将的获取页面传参数据的方法，将url获取出来，而后设置到 page 的data数据中就能够了。

Page({  /**   * 页面的初始数据   */  data: {    pageurl: new String()  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    var that = this    console.log(options)    that.setData({      pageurl:options.dataurl    })  }})复制代码

啊哈，目前来讲，咱们的开发就算完成了！是否是超级简单？？下面在模拟器里面看一下效果：

是否是很酷炫？小程序是否是开发起来很简单？并且逻辑都很清晰，用到的知识点其实并不算多，只不过就是将简单的知识点串联起来，就能够组成一个功能酷炫的App。

后续，若是写完小程序，想发布怎么整？

发布

每次写完一个版本，都是能够提交代码的。在IDE的上面，有一个『上传』按钮，点击以后，出来一个对话框:

选择『肯定』，而后在里面填写正确格式的版本号描述：

而后点击上传。上传的代码，在微信公众平台网页版的小程序管理后台里面的『开发管理』能够看打了。

而后咱们选择相对于的版本『提交审核』就能够了，在随后的页面，填写相对应的正确的信息就能够了。

以我我的的提交经从来看，审核速度其实挺慢的，通常来讲须要一天的时间吧，固然，也有审核很快的小程序。可是个人『六十四卦』小程序审核很慢。

审核成功，就能够全量发布了。审核成功以后的界面，就应该是这个样子：

这样你就能够告诉亲戚朋友，叔叔阿姨，学长学妹，同事领导，大爷大妈们，你的小程序上线了，他们能够扫描二维码使用，或者在小程序里面搜索名字找到入口。

总结

好了，说了这么多了，我相信好多人都买有看到这里。为了奖励看到这里的人，我特地给你们在小程序里面留了一个彩蛋。

下面的那个

『search poster』

是干吗的？我压根就没说，啊哈哈哈哈哈。我已经把代码提交了，感兴趣的同窗，能够下载下来在本身的机器上跑一下，你就知道铲屎官的彩蛋究竟是什么了。啊哈哈哈哈。

文末小福利，阿里云优惠券免费领取:

https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=nrkmbo9q

算下来一年的服务器能便宜一百多，超级划算。

老样子，获取代码的方式：关注微信公众号『皮爷撸码』，而后进入回复

『代码』

，便可找到你想要的代码。若是有什么疑问，能够点击公众号下方菜单里面的

『进群交流』

，或者回复

『进群』

，里面会详细的说进群方法，到时候你们能够一块儿交流。

密密麻麻的写了一大堆，感谢你们的耐心观看，但愿可以给你带来帮助。