标签 安全马克 下的文章

前言

之前写了一个小程序,映思圈,一个提供直接访问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天左右的时间,不得不说小程序真的非常容易上手。



openwrt中的lua脚本和传统的luajit编译后的有点不一样,需要打几个补丁才能正常使用luadec进行反编译,在研究过程中走了很多弯路,把安装过程大概的记录了一下,命令如下


  47  cd ..
  48  mkdir luadec
  49  cd luadec/
  50  git clone https://github.com/viruscamp/luadec
  51  cd luadec/
  52  git submodule update --init lua-5.1
  53  cd lua-5.1
  54  make linux
  55  make clean
  56  mkdir patch
  57  cd patch/
  58  wget https://dev.openwrt.org/export/HEAD/trunk/package/utils/lua/patches/010-lua-5.1.3-lnum-full-260308.patch
  61  wget https://dev.openwrt.org/export/HEAD/trunk/package/utils/lua/patches/030-archindependent-bytecode.patch
  62  wget https://dev.openwrt.org/export/HEAD/trunk/package/utils/lua/patches/011-lnum-use-double.patch
  63  wget https://dev.openwrt.org/export/HEAD/trunk/package/utils/lua/patches/015-lnum-ppc-compat.patch
  64  wget https://dev.openwrt.org/export/HEAD/trunk/package/utils/lua/patches/020-shared_liblua.patch
  67  wget https://dev.openwrt.org/export/HEAD/trunk/package/utils/lua/patches/040-use-symbolic-functions.patch
  68  wget https://dev.openwrt.org/export/HEAD/trunk/package/utils/lua/patches/050-honor-cflags.patch
  69  wget https://dev.openwrt.org/export/HEAD/trunk/package/utils/lua/patches/100-no_readline.patch
  70  wget https://dev.openwrt.org/export/HEAD/trunk/package/utils/lua/patches/200-lua-path.patch
  71  wget https://dev.openwrt.org/export/HEAD/trunk/package/utils/lua/patches/300-opcode_performance.patch
  72  ls -lh|wc
  73  ls -lh
  74  cd ..
  75  mv patch/ patches
  76  for i in ../patches/*.patch; do patch -p1 <$i ; done
  77  for i in ./patches/*.patch; do patch -p1 <$i ; done
  78  make linux

修改 lua-5.1/src/MakeFile


  # USE_READLINE=1
  +PKG_VERSION = 5.1.5
  -CFLAGS= -O2 -Wall $(MYCFLAGS)
  +CFLAGS= -fPIC -O2 -Wall $(MYCFLAGS)
  - $(CC) -o $@ -L. -llua $(MYLDFLAGS) $(LUA_O) $(LIBS)
  + $(CC) -o $@ $(LUA_O) $(MYLDFLAGS) -L. -llua $(LIBS)
  - $(CC) -o $@ -L. -llua $(MYLDFLAGS) $(LUAC_O) $(LIBS)
  + $(CC) -o $@ $(LUAC_O) $(MYLDFLAGS) -L. -llua $(LIBS)

执行


  make linux
  ldconfig
  cd ../luadec
  make LUAVER=5.1
  sudo cp luadec /usr/local/bin/

参考来源

http://storypku.com/2015/07/how-to-decompile-bytecoded-openwrt-lua-files/