前言

之前写了一个小程序，映思圈，一个提供直接访问Instagram的网站，后来发现其实还是有一些用户需求的，就花了2-3天时间将网站写成了微信小程序。
目前过了3-4个月，没事推广推广，现在也有个2w多一点的用户了，分享一下过程

其采用的技术栈如下:

入门

说实话，第一次写微信小程序，前面也没接触过任何前端框架，都说微信小程序类似vue，看的也是一头雾水，因为前期的网站和爬虫写好了，所以后端其实没啥好赘述的，无非就是怎么抓包得到instagram的api，怎么获取用户资料和帖子，并且图片的存储什么的，没啥技术含量。

首先就是学习了一下小程序的结构和基本的语法，发现一个小程序基本的目录结构如下：

其中主要逻辑都是在pages目录下完成，有点类似MVC，代码与识图是分离的，一个完成的page包含四个文件 index.js,index.wxml,index.wxss,index.json
大概我们常用的文件/目录如下：

语法方面分俩块，一块是代码层面，一块是模版视图

语法

代码方面其实没太多好说的，因为他采用的是js进行开发，一个js的初始代码大概如下：

// pages/me/index.js
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    message: "none",
  
  },
    /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

所有的操作都会有一个触发事件，只要在触发事件里面写逻辑就可以了，然后一些常见的内置函数可以去看小程序的官方文档，基本都是在wx这个对象下面

关于模版的语法其实也比较容易上手
我的首页是这样的，一个卡片式的图文列表

代码就这么一些
先通过js的onload事件加载数据

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var openid = wx.getStorageSync('openid');
    openid = openid ? openid : ''
    var that = this
    wx.request({
      url: 'https://api.com/get_myfeed/' + openid,
      success: res => {
        wx.hideToast()
        that.setData({
          searchlist: res.data

        })
      }
    })
  },
<view class="page">
  <view class="page__bd">
    <view class="weui-cells__title">我的关注</view>
    //这里wx:for 就是一个for循环用来遍历数组的数据
    <view class="weui-cells weui-cells_after-title" wx:for="{{searchlist}}" wx:key="pk">
      <view class="weui-cell weui-cell_access" hover-class="weui-cell_active">
        <navigator url="/pages/user/index?url={{item.uploader_id}}" class="weui-cell__hd">
          <image src="{{item.profile_img}}" style="margin-right: 16px;vertical-align: middle;width:30px; height: 30px; float:left; border-radius: 50%; border: 3px solid #eee; overflow: hidden;"></image>
        </navigator>
        <navigator url="/pages/user/index?url={{item.uploader_id}}" class="weui-cell__bd">{{item.uploader_id}}</navigator>
        <view class="weui-cell__ft weui-cell__ft_in-access" bindtap="onUnfeed" data-ownerid="{{item.owner_id}}">点我取关</view>
      </view>
    </view>
  </view>
</view>

其实还是非常简单的，然后最后写好的程序如下,其实还是非常简单的，前后开发小程序也就用了2天左右的时间，不得不说小程序真的非常容易上手。



标签: 安全马克