手把手一条龙教程，专门献给还没有写过小程序的你，干货福利依旧

2018-07-23 本文已影响64人 c2aa1d94244a

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

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

image

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

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

磨刀霍霍

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

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

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

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

image

我们点击『小程序项目』，然后我们需要新建小程序项目，点击右下角的+号，然后就进入了创建界面：

image

这里我们看到，有一个AppID，如果小程序没有AppID的话，有些功能会受限制。所以，为了全功能开发，我们这里就只需要去微信公众号上面注册一下，然后就可以获得到这个AppID了。

微信公众平台地址：

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

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

image

接着出现如下界面：

image

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

image

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

image

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

image

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

image

填写提交好之后，我们就可以在设置里找到我们的小程序AppID了：

image

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

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

image

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/daily/1024.json

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

image

大家注意，这个地址不是https的，所以，在开发的时候，我们需要在IDE的右上角，点击『详情』，然后在『不校验合法域名』前面打钩

image

OK，那我们这里就先建立两个页面，一个叫dailylist，另一个叫detail。新建页面只需要在app.json中的pages里面把路径输入好就可以。

image

这里要说明一下：小程序首先启动的页面就是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/daily/1024.json',
      method: 'GET',
      header: {
        "Content-Type": "application/json"
      },
      success: function(res) {
        that.setData({
          hasData: true,
          // 这里很关键，调用data.data才可以
          curTime:res.data.data.curTime,
          dailyData: res.data.data.block
        })
      },
      fail: function(res) {

      }
    })
  },

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

<view class='list_container'>
    <block wx:if="{{hasData==true}}">
        <text>1024 Daily: {{curTime}}</text>
        <view class='list_data'>
            <block wx:for="{{dailyData}}" wx:key="unique">
                <text class="list_item" bindtap='gotoDetail' data-url="{{item.post_url}}">{{index + 1}}: {{item.post_title}}</text>
            </block>
        </view>
    </block>
    <block wx:else>
        <text>加载中。。。</text>
    </block>
</view>

效果如下：

image

这里简单给大家讲一下：
微信小程序的数据绑定格式，是用 {{}} 来包裹的，里面的名字，是在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)是可以打印出来里面的结构的，如下图：

image

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

image

目前为止，我们的 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
    })
  }})

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

image

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

后续，如果写完小程序，想发布怎么整？

发布

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

image

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

image

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

image

然后我们选择相对于的版本『提交审核』就可以了，在随后的页面，填写相对应的正确的信息就可以了。

以我个人的提交经历来看，审核速度其实挺慢的，一般来说需要一天的时间吧，当然，也有审核很快的小程序。但是我的『六十四卦』小程序审核很慢。

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

image

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

总结

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

image

下面的那个『search poster』是干嘛的？我压根就没说，啊哈哈哈哈哈。我已经把代码提交了，感兴趣的同学，可以下载下来在自己的机器上跑一下，你就知道铲屎官的彩蛋到底是什么了。啊哈哈哈哈。

文末小福利，阿里云优惠券免费领取:
https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=nrkmbo9q
算下来一年的服务器能便宜一百多，超级划算。

老样子，获取代码的方式：关注微信公众号『皮克啪的铲屎官』，然后进入回复『代码』，即可找到你想要的代码。如果有什么疑问，可以点击公众号下方菜单里面的『进群交流』，或者回复『进群』，里面会详细的说进群方法，到时候大家可以一起交流。

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

手把手一条龙教程，专门献给还没有写过小程序的你，干货福利依旧

磨刀霍霍

pages:

utils：

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

project.config.json：

Daily实战小程序

发布

总结

推荐阅读

猜你喜欢

热点阅读