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

371 阅读11分钟

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.jsonpages 列表中的第一个页面。依照上图,这里我们启动的是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

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

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

『代码』
,即可找到你想要的代码。如果有什么疑问,可以点击公众号下方菜单里面的
『进群交流』
,或者回复
『进群』
,里面会详细的说进群方法,到时候大家可以一起交流。

密密麻麻的写了一大堆,感谢大家的耐心观看,希望能够给你带来帮助。