Java程序员第一夜：分享微信小程序开发与实践经验

这是Java程序员最不专业的经历。

小程序的受欢迎程度无需多言。年初，老公去浦东的一家公司面试，还被问到有没有测试小程序的经验。看来，小程序已经成为继PC、WAP、Android、IOS之后互联网企业的必备入口。这段时间公司也正好在做一个小程序，所以我也了解到了。当然，由于我是一名Javaer，我是从事后的角度来谈论它，当然不如我的同学一开始。

学一点编程，我觉得对后来的同学比较有用，因为后来的同学还是知道HTML、CSS、JS等前端的基础知识，但是后来的同学在后端就不太常用了。明白了。接下来我根据自己的实践经验简单讨论一个小程序，也算是一个总结和小节。

小程序是用来做什么的？

“在你手里”和“当你走时”。我觉得这两个词完美地描述了小程序的本质。随着微信用户数量的增加，小程序消除了用户安装APP的需要。而且用完之后，不用刻意离开，离开就行了。下次你想起来的时候，再说一遍。这可能会扰乱许多行业。我个人认为，小程序适合业务简单、要求不高、使用频繁的应用。比如垂直电商行业有共同的优势，比如媒体电商、生鲜电商。如果要求用户下载这样的APP，成本非常高，但使用小程序可以悄悄避免吸引新客户。问题。另一个例子是我自己。如果我把我的博客做成一个APP，相信几乎没有学生会下载。不过我用小程序的话，有时候有同学会点击看，哈哈。

启动小程序

首先，开发小程序需要一个专用工具【微信开发者工具】，可以直接从微信公众域下载。

接下来我们先新建一个快速入门模板来看看。如果你有注册过的账号和appid，就可以填写。如果没有，也没关系。点击图中小程序即可使用测试账号。

如上图所示，登录后即可看到这些文件。

可以说是提供了一个小程序。

• app.js 是主要文件，包含面向全球公众的 js 方法的声明和调用。 allow
• app.wxss 是小程序的全局css文件
• 位于页面底部，与所有页面一致。每个页面可以添加四种类型的文件，.json、.wxss、.wxml、.js

另外，下载这四种类型的文件。基本上，小程序页面下的每个文件夹相当于一页。每个文件夹下有四个名称相同但类型不同的文件。这四种类型构成了整个页面。

• .json 附加 JSON 配置文件
• .wxml 附加 › ›❀ 到 开发 html
• .wxss sWXSS 扩展名为 x 的文件，类似于扩展名为 JS 的 CSS 网站开发开发的脚本逻辑文件
• .JS 扩展，不能工作 JS JDOMS 这个。是基于数据绑定的

所以我们看一下JS文件的结构。评论很明确：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})复制代码

了解了这些之后，开发小程序一般就没问题了，剩下的就是看文档了。这里我建议将文档当作字典来阅读。看完简单的教程和系统之后，你就可以看看还需要什么了。不需要像教科书一样逐字阅读。

因为微信创作者工具还比较新，所以在创建页面之前，我先创建一个文件夹，然后创建四个单独的文件。我在这里介绍一个小技巧。您可以首先在app.json中注册您要创建的页面。现在，该工具将自动为您创建四个文件夹和文件。老实说，这很奇怪。我在官方文档中没有看到这个方法。不知道是我看的原因还是没有正式注册。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}复制代码

我们来谈谈页面注册。当我们在app.json文件中注册时，[pages/index/index]会包含页面下的四个index.xx文件，而不必单独编写。此外，文件夹名称和文件名称可能不同。例如，[pages/index/launch]将包含index目录下的所有启动文件。但建议是一样的，不然很难理解。

最后再多说一下小程序中的域名白名单问题。我看到很多学生，包括我周围的同事，都是无知的，他们靠内网访问而茁壮成长。

首先，小程序对应用请求的域名有限制。

1. 所请求的域名必须是在后台创建的。未配置的域名无法申请成功。
2. 域名协议必须为https。如果是http请求，也会失败。

显然，这是针对在线版本的。如果我们把它留在本地，小程序提供了非常好用的功能。你可以忽略这个限制，甚至可以直接请求本地IP地址+端口号，无需使用复杂的内网登录方法。

具体流程是在微信开发者工具中点击【设置】-【项目设置】-【查看】不检查合法域名、Web视图（企业域名）、TLS版本和HTTPS证书。如下图

简单说一下我的自定义小程序。更多信息可以看文档

开源实践

我很早之前正好做了一个yyblog的开源项目。 ，这次我就用这个项目来做一个简单的小程序客户端。这还是常见的做法，我们先看一下版本。

这是一个简单的html、css、js应用程序，没有任何前端框架，所以比较适合参考和学习。 ppps：无论如何，我不会说我不用它，因为我不知道怎么用。呜呜~~~我流泪了，因为我不知道┭┮﹏┭┮。

总的来说，微信小程序虽然上线时间较长，但并不像传统开发语言那么稳定，官方也会定期进行调整。

相信很多同学都面临过这样的情况。首次登录小程序时，会弹出用户资料授权窗口。我刚写的时候是这样处理的，但是后来我上传代码的时候，看到微信在9月12号发了声明。

主要是取消了对分享控制接口的回调，更改了getUserInfo接口来获取用户信息，这样除非用户点击对应的授权元素才进行提示，并且openSetting接口也进行了更改通过点击来触发。因此，在开发微信小程序时，还是需要考虑官方开发，避免成品无法正常使用的尴尬。

全局配置

前面提到过，对应的文件app.xx就是小程序的全局文件。这里我单独讲一下app.js文件。当我们的一些参数是全局需要的时候，我们可以将相关的参数写入到这个文件中，比如我们请求的基础URL，或者用户的个人资料、用户ID等非请求时必须带的参数。同时我们可以在这里写入版本验证码。这里我还要说一件事。微信支持版本验证。当新版本代码可用时，将启用用户更新通知。无需在这里进行背景调查。 ，非常方便。相关代码如下：

App({

  onLaunch() {
    this.checkUpdate();
  },

  globalData: {
    userInfo: {},
    apiBase: "https://www.laoyeye.net",
    userId: ""
  },

  checkUpdate() {
    const updateManager = wx.getUpdateManager();
    updateManager.onCheckForUpdate(function (res) {
      // 请求完新版本信息的回调
      console.log(res.hasUpdate)
    })
    updateManager.onUpdateReady(function () {
      wx.showModal({
        title: '更新提示',
        content: '新版本已经准备好，是否重启应用？',
        success: function (res) {
          if (res.confirm) {
            // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
            updateManager.applyUpdate()
          }
        }
      })
    })

    updateManager.onUpdateFailed(function () {
      // 新版本下载失败
      console.log('更新失败！')
    })
  }
})复制代码

起始页

当用户第一次进入小程序时，会先显示起始页。我第一次不是这样构建的。通常，当用户登录时，会直接进入主页并弹出用户授权窗口。但由于9.12的修正，我不得不做出改变。允许用户先访问起始页进行授权，授权后跳转至首页。授权用户隐藏授权按钮，等待1.5秒后跳转至首页。在这个过程中，除了用户的授权之外，我还要求后台服务器在后台创建用户的数据库，最后将userId返回给小程序。未来，用户在进行评论、点赞、收藏等操作时，都会携带UserId，以便更方便地识别特定用户。

本页有两个重要的知识概念，在此重点强调。

首先我们需要获取当前应用中每个用户的openId，这样就可以避免用户下次访问时重复运行授权。

调用wx.login()接口获取登录凭证（code）并换取用户的身份信息，包括用户的唯一标识（openid）和本次登录的密钥会话（session_key）等。但请注意，openid 的代码交换需要在服务器端完成。如果你换成一个小js程序，你会发现在开发版本中也可以访问正常的方法，但是在生产环境中就不行了，因为小程序的安全性、官方域名的限制名称不能列入白名单。

代码如下：

login(auth) {
    let that = this;
    //调用微信登录接口
    wx.login({
      success: function(res) {
        wx.request({
          url: app.globalData.apiBase + '/api/wx/login?code=' + res.code + '&nickname=' + app.globalData.userInfo.nickName +
            '&avatar=' + app.globalData.userInfo.avatarUrl,
          header: {
            'content-type': 'application/json'
          },
          success: function(res) {
            //userId
            if (res.data.code == 200) {
              app.globalData.userId = res.data.data;
              console.log('获取用户信息=' + res.data.data);
              if (auth == 'auth') {
                that.direct();
              } else {
                let timer = setTimeout(() => {
                  clearTimeout(timer)
                  that.direct()
                }, 1500)
              }
            }
          }
        })
      }
    })
  },复制代码

其次，getUserInfo接口。由于新的限制，过去如果用户未授予权限，就会出现弹出窗口。但新规则之后，如果在没有用户许可的情况下调用该接口，会直接进入回调。所以必须通过元素获得用户的授权，然后在用户点击的回调中调用该方法。

代码如下：

 <button class="show-btn" wx:if="{{userInfo.length == 0}}" type="primary" open-type="getUserInfo" bindgetuserinfo="onGetUserInfo"> 授权登录 </button>复制代码

onGetUserInfo() {
    var that = this;
    wx.getSetting({
      success: function(res) {
        if (res.authSetting['scope.userInfo']) {
          wx.getUserInfo({
            success: function(res) {
              app.globalData.userInfo = res.userInfo;
              that.login('auth');
            },
            fail: function() {
              console.log('系统错误')
            }
          })
        } else {
          wx.showToast({
            title: "授权失败",
            duration: 1000,
            icon: "none"
          })
        }
      },
      fail: function() {
        console.log('获取用户信息失败');
      }
    })
  },复制代码

最后还有一个小问题。我不知道这是不是个人问题。分配页面数据时我将使用 this.data.requestUrl = requestUrl;

或 this.setData({postList:totalData});

方法。 如果是异步的话，就得用2个方法来获取页面中的数据。然而，在某些情况下，使用方法1非异步方式无法获取数据，但我可以清楚地看到数据已安全地成功分配。但这次我同时使用了两种方法，又成功了。我真的不知道为什么，所以尝试使用这两种方法。

首页、技术页面

我们一起来聊聊这两个页面。原因是，虽然两个页面的呈现风格不同，但技术特征仍然相同。唯一的区别是，以后我可能会调整两个页面的数据关系，要求不同的数据。

这个页面基本上有两个想法，上拉加载更多，下拉刷新。

第一个是跳起来输入更多数据。这是官方小程序提供的onReachBottom方法。只要用户移动到一定距离就会出现。这里我做了分页处理。首次登录时会显示五个数据集。当触发该操作时，将请求第二页上的数据。显然，第二页请求的数据不能覆盖前面的数据。否则，当用户向下滚动时，之前的数据就会被删除，这不符合用户的习惯。

到达动作产生的距离可以使用onReachBottomDistance来实现。默认值为 50 像素。默认情况下不启用下拉刷新。需要设置为 *.json 使用enablePullDownRefresh属性启用，默认为false。

如果在app.json中设置启用全局下载更新，则会发送到自定义页面上的当前页面。

相关代码如下：

{
  "navigationBarTitleText":"小卖铺的老爷爷",
  "enablePullDownRefresh": true
}复制代码

  onPullDownRefresh: function (event) {
    var refreshUrl = this.data.requestUrl +
      "?page=0&limit=5";
    this.data.techList = {};
    this.data.isEmpty = true;
    this.data.page = 1;
    util.ajax(refreshUrl, "get", null, this.processData);
    wx.showNavigationBarLoading();
  },复制代码

其实这两种方法你看官方文档的全局配置都会看到。上面我也提到了，学习小程序的时候，还是要看简单的教程和官方的文档结构，其他的并不是那么重要。

详细信息页面

详细信息页面都是关于一件事的，富文本分析。

由于微信小程序不支持html语言，需要转换为微信支持的wxml。

总体来说，微信对富文本的支持不好，官方也没有发布有用的富文本组件。这次我使用了wxParse，github上最流行的小型编程富文本组件。虽然已经相当完整了，但是还是有很多bug，而且作者似乎也无法修复。但到目前为止我还没有找到任何其他好的选择，所以这是我唯一可以使用的。如果您还有其他物品，请告诉我。

wxParse的使用在项目中解释的很清楚。您可以在以下位置找到它：https://github.com/icindy/wxParse。

我对wxParse做了一些修改，主要是解决一些手机错误无法下载的问题。原因是微信小程序不支持console.dir()写法。这个小程序也已经正式向社区进行了说明。

分享

当你在页面的js文件中定义onShareAppMessage函数时，页面就有了分享功能，可以发送给微信好友。

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: this.data.postData.title,
      path: '/pages/post-detail/post-detail?id=' + this.data.id + "&title=" + '小卖铺的老爷爷' + "&share=1" 
    }
  },复制代码

上面是我的章节代码，设置了章节标题、跳转路径等。这里我定义了路径，以便于区分用户的来源。为什么要区分用户来源？因为进入小程序的分享页面后出现了一个很奇怪的问题。没有返回主页的按钮。所以我这里特别区分一下。用户分享后，图标会飘回主页。

相关代码如下：

<!-- 回到首页(分享的时候显示) -->
<image wx:if="{{share}}" bindtap='onBackHome' class='back-home' src='/images/icon/home-page.png' lazy-load></image>复制代码

  /**
  * 回到首页(分享的时候)
  */
  onBackHome: function () {
    wx.reLaunch({
      url: '/pages/launch/launch?share=1"'
    })
  }复制代码

我的

最后说一下我的页面。实际上这个页面上没有什么重要的东西。它只是跳转到静态页面。

稍后我会将这些信息制作成可以链接到PC帐户的格式。

我的收藏已申请，但详情页可能没有具体的收藏条目。我稍后会补充。具体解读如下。

另一个是奖励和支持页面。一开始是打算让小程序之间进行交互，并且使用相同的api访问方式。不过小程序管理器最近也增加了多个小程序之间跳转的限制，所以我就懒得这么做了。

直接跳转到详情页，并在详情页贴出确认码。请注意，小程序页面不支持报纸直接扫描。您需要点击图片并长按弹出的图片才能识别图片上的二维码。

ppps：写完这篇文章后，我想起来我忘了在这个页面上提及一些东西。小程序可以使用阿里巴巴图标库。具体使用指南请上网查看。不用说，有兴趣的可以查看我的源代码中的应用程序。

最后这个

我附上小程序的微信预览地址：

之前说过这个项目是基于之前的开源项目yyblog，所以PC端是在项目中完成的。所有请求的接口均已在 yyblog 中实现。

小程序的源码也已经上传到yyblog了，具体地址是：github.com/allanzhuo/y...

作者：小店里的老人
来源：掘金