小程序相关知识总结

1.搭建项目

  • 创建新项目,你需要先注册一个小程序账号,当然也可以暂时先使用一个测试的 appid

  • 小程序配置

2.小程序的生命周期函数

  1. onLoad 生命周期函数--监听页面加载
  2. onReady 生命周期函数--监听页面初次渲染完成
  3. onShow 生命周期函数--监听页面显示
  4. onHide 生命周期函数--监听页面隐藏
  5. onUnload 生命周期函数--监听页面卸载
  6. onPullDownRefresh 页面相关事件处理函数--监听用户下拉动作
  7. onReachBottom 页面上拉触底事件的处理函数
  8. onShareAppMessage 用户点击右上角分享
    注意:
  9. onLoad 只会在小程序中执行一次,比如当前页面是 a 页面,我们在 onLoad 发送请求去获取数据,然后我们切到 b 页面,再切回 a 页面的时候,onLoad 不会再触发,也就是不会再重新发请求获取数据
  10. onShow 跟 onLoad 不同,每次切回 a 页面的时候都会触发这个生命周期函数
  11. 所以到底是在 onLoad 发请求还是在 onShow 发请求,要根据实际的业务去做

3.获取数据

  1. 小程序只支持 https
  2. 需要到小程序后台配置域名白名单
  3. 项目中请求了非 https 和不在域名白名单上的接口会报错
  4. 开发时可以取消域名校验,就可以请求任意接口,设置方法 小程序右上角详情 =》本地设置 => 不校验合法域名.

a 发送请求

文档地址文档首页 => api => 网络 => 发起请求

// 示例
wx.request({
  url: "test.php", //仅为示例，并非真实的接口地址
  data: {
    x: "",
    y: ""
  },
  method: "get", // 也可以是post
  header: {
    "content-type": "application/json" // 默认值
  },
  // 成功的回调
  success(res) {
    console.log(res.data);
  },
  // 失败的回调
  fail(error) {
    console.log(error);
  },
  // 不管是成功还是失败都会调用此方法
  complete() {
    console.log("done");
  }
});

b使用promise封装请求

//config.js
let env = 'prod';
let baseUrl = ""; 
if (env === "dev") { 
// 本地地址 
baseUrl = "https://localhost:3009" 
} else if (env === "prod") {
baseUrl = "https://huruqing.cn:3009" 
}
// 导出 export { baseUrl }

2. ##### 新建/utils/reques.js 文件,内容如下
​```js
import { baseUrl } from "./config.js";

/**
 * 封装请求
 * url：请求地址
 * data：请求参数
 * method: 请求类型
 */
const request = (url, data, method) => {
  // 获取token,登录时存的
  let token = wx.getStorageSync("token");
  url = baseUrl + url;
  return new Promise((resolve, reject) => {
    // 请求
    wx.request({
      url,
      method,
      data,
      header: {
        "user-token": token
      },
      success: res => {
        if (res.data.code == 666) {
          resolve(res.data);
        } else if (res.data.code == 603) {
          wx.removeStorageSync("token");
          wx.showModal({
            title: "提示",
            content: "登录已过期，是否重新登录",
            success(res) {
              if (res.confirm) {
                // 跳转到个人中心页面
                wx.switchTab({
                  url: "/pages/my/my"
                });
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            }
          });
        } else {
          reject(res.data.msg);
        }
      },
      fail: err => {
        reject("网络异常");
      }
    });
  });
};
const get = (url, data) => {
  return request(url, data, "get");
};
const post = (url, data) => {
  return request(url, data, "post");
};
export default {
  get,
  post
};

c挂载到 app,在页面中就不需要重复加载

// app.js
import request from "./utils/request.js";
App({
  onLaunch: function() {
    this.$get = request.get;
    this.$post = request.post;
  }
});

d在页面中使用

// my.js
// 获取app对象
const app = getApp();
Page({
  onShow() {
    this.getData();
  },
  // 发送请求
  getData() {
    let url = "xxxxx";
    let data = { xxx: xxx };
    app
      .$get(url, data)
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      });
  }
});

4.页面数据修改

1.data和setdata

Page({
    data: {
        count:1
    },
    changeCount() {
        // 获取data里count的值
        let count = this.data.count;
        // 加1
        this.setData({
            count: ++count
        })
    }   
})

2.插值表达式 {{}}, wxml中所有的变量都使用{{}}

3.条件渲染 wx:if

4.列表渲染 wx:for 默认有item和index

5.双重wx:for时需要其中一个指定item和index

5.绑定事件

1文档地址

// 例子1
<view id="tapTest" data-username="zhangsan" bindtap="tapName"> Click me! </view>

// js
Page({
  tapName: function(event) {
    console.log(event)
    // 小程序事件不能像vue那样传参,只能通过自定义属性来传参
    let {username} = event.currentTarget.dataset.username;
    console.log(username);
  }
})

2常见事件类型
类型 触发条件 最低版本
touchstart 手指触摸动作开始
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断，如来电提醒，弹窗
touchend 手指触摸动作结束
tap 手指触摸后马上离开
longpress 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发 1.5.0
longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart 会在一个 WXSS animation 动画开始时触发
animationiteration 会在一个 WXSS animation 一次迭代结束时触发
animationend 会在一个 WXSS animation 动画完成时触发
touchforcechange 在支持 3D Touch 的 iPhone 设备，重按时会触发

6.页面跳转

  • 小程序常用两种方式，普通页面跳转和tab栏切换（跳转）

    a.跳转方式一 通过组件navigator进行跳转,需要指定跳转类型open-type

<view class="btn-area">
  <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
  <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
  
     <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
  <navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的小程序</navigator>
</view>

​ b.跳转方式二 通过js进行跳转

// 普通页面跳转
wx.navigateTo({
  url: '/product/product'
})

// tab栏切换
wx.switchTab({
  url: '/index'
})

7.路由传参

路由传参常用方式有以下几种

1.通过url传参

// 产品列表页面
 <navigator url="/pages/detail/detail?productId=12345" hover-class="navigator-hover">详情</navigator>
// 或者
wx.navigateTo({
  url: '/pages/detail/detail?productId=12345'
})

// 产品详情页面
Page({
  onLoad: function(option){
    let productId = option.productId;
    console.log(productId);
  }
})

上面的方式的参数不能是对象,如果需要传对象,可以将对象转成json字符串,然后拼接到url后面,在接收页面再将json字符串转成对象

let info = {
    a:2,
    b:3
}
let infoStr = JSON.stringfy(info);
wx.navigateTo({
  url: '/pages/detail/detail?infoStr='+infoStr
})

// 产品详情页面
Page({
  onLoad: function(option){
    let infoStr = option.infoStr;
    let info = JSON.parse(infoStr);
  }
})

2.通过事件传参

a官网实例

// 产品列表页
wx.navigateTo({
  url: url: '/pages/detail/detail'
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})


// 产品详情页
Page({
  onLoad: function(option){
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})

b简化例子 以上例子,在跳转的时候列表页可以向详情页传数据,详情页也可以向列表页传数据,平时我们经常都只是传数据,很少需要回传,以下是简化的例子

// 列表页
wx.navigateTo({
  url: "/pages/home/detail/detail",
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    let data = {productId: 'sadf2323',productName:'金龙鱼花生油'};
    res.eventChannel.emit("info", data);
  }
});

// 详情页
onLoad: function(options) {
  const eventChannel = this.getOpenerEventChannel();
  // 监听info事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on("info", function(data) {
    console.log(data);
  });
},

总结: 路由传参可以用这两种方式

  1. 通过url拼接参数传输,需要传对象,需要传对象就先讲对象转成json字符串再传
  2. 通过eventChannel(事件通道)进行传输(可以传对象)

8自定义组件使用

生命周期

  1. created 组件实例化，但节点树还未导入，因此这时不能用 setData
  2. attached 节点树完成，可以用 setData 渲染节点，但无法操作节点
  3. ready 组件布局完成，这时可以获取节点信息，也可以操作节点
  4. moved 组件实例被移动到树的另一个位置
  5. detached 组件实例从节点树中移除

1创建组件

  1. 右键点击开发工具中的 components => 新建目录 count
  2. 右键 count 目录 => 新建组件 => 输入 count(组件的名称)

2编写静态文件

<!-- wxml文件 -->
 <view class="count-box">
  <view>
    <text class="total">合计</text>
    <text class="money">¥99.00</text>
  </view>
  <view class="count">
    结算
  </view>
 </view>
 <!-- // js文件暂且不动 -->

3使用组件

新建一个页面,名字随意,比如 shopCart,编写 shopCart 页面的代码,至此我们已经能在 shopCart 页面看到了 count 组件展示出来的内容了

// shopCart.json代码,注册组件
{
  "usingComponents": {
    "count": "../../components/count/count"
  }
}

<!-- shopCart.wxml 代码 -->
<count></count>
 <!-- // js文件暂且不动 -->

4父给子传参

①shopCart.wxml(父组件) 添加一个总价 totalMoney

<count totalMoney="99.99"></count>
// 如果要传变量,请使用
<count totalMoney="{{xxx}}"></count>

②count(子组件) 组件接收参数,需要改动两个地方

  • 修改 count.js 文件,在 properties 里添加
  properties: {
    totalMoney: Number
  },
  // 或者写成这样
   properties: {
    totalMoney: {
        type: Number,
        default: '0.00'
    }
  },

③修改 count.wxml

<count totalMoney="{{totalMoney}}"></count>

5事件和自组件传参

1.shopCart.wxml(父组件) 自定义一个事件,同时给这个事件绑定一个函数

<count totalMoney="99.00" bind:submit="onSubmit"></count>

2.shopCart.js(父组件) 编写 onSubmit 函数,event.detail 接收子组件传来的数据

 onSubmit(event) {
    console.log(event.detail);
  },

3.修改 count.wxml(子组件), 绑定点击事件

<!-- wxml -->
<view class="count-box">
  <view>
    <text class="total">合计</text>
    <text class="money">¥{{totalMoney}}</text>
  </view>
  <view class="count" bindtap="handleClick">
    结算
  </view>
</view>

4.修改 count.js(子组件), 在 methods 添加 handleClick,使用 triggerEvent 触发父组件的自定义事件

 methods: {
    handlClick() {
      this.triggerEvent('submit',{name:'张三',age: 100})
    }
  }

点击结算的时候,父组件的自定义就被触发,控制台打印出{name:'张三',age: 100}

9数据缓存

1异步方法

wx.setStorage({
  key: "key",
  data: "value"
});

wx.getStorage({
  key: "key",
  success(res) {
    console.log(res.data);
  }
});

2同步方法

wx.setStorageSync("key", "value");   //存数据

var value = wx.getStorageSync("key"); //取数据

10用户授权登录

在做小程序电商项目的时候,添加一个商品到购物车,后台需要知道是哪个用户执行了添加的操作,这里就涉及到了用户识别的操作.

整个流程如下:

  1. 前端调用后台的登录接口,获得 token
  2. 前端发送请求带上 token,后台可以通过 token 来识别用户
在第一步中,有分为以下几个步骤

  1. 前端首先调用 wx.login 获取 code,

  2. 紧接着需要调用 wx.getUserInfo 来获得用户信息(userInfo),获得 iv 和 encryptedData需要用户授权

  3. 调用后台登录接口,比如 /user/login,把以上三个参数传给后台

    {
  code, iv, encryptedData;
}

    4.后台根据上面三个参数调用微信接口获得 openid,再将 openid 和用户的其他信息一并存起来,同时生成 userId,根据 userId 生成一个加密的 token 返回给小程序,小程序端再把token放入请求头,每次发请求都带上,这样后台就可以识别用户了,可以回看获取数据

    5.用户授权操作

    要获得用户信息,必须先征得用户同意,那么就需要用户授权,除了开放数据以外,小程序的很多功能都需要获得用户授权,才可以进行下一步的操作,

    用户授权功能列表

​ a.用户授权 hello world

wx.authorize({
  // 授权类型
  scope: "scope.record",
  success() {
    // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
    wx.startRecord();
  }
});

当你在 onLoad 加上以上代码的时候,你会发现你的小程序出现了一个麦克风一样的东西,那就是 wx 正在录音

b检查用户是否已授权

wx.getSetting({
  success(res) {
    // 检查录音功能是否已经授权
    console.log(res.authSetting["scope.record"]);
  }
});

一般来讲,我们会先检查用户是否已授权,没授权我们才会去调用授权接口,所以 1 中的代码我们会写成这样

// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
wx.getSetting({
  success(res) {
    if (!res.authSetting["scope.record"]) {
      wx.authorize({
        scope: "scope.record",
        success() {
          // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
          wx.startRecord();
        }
      });
    }
  }
});

上面的例子是获取录音功能的授权,我们直接使用 wx.authorize({ scope: 'scope.record' }),小程序就会弹出一个窗口去询问用户是否允许使用录音功能,但是获取用户信息的授权不能这样去操作(这是小程序的规定),必须通过用户点击按钮去授权,我想是微信为了保护用户隐私信息所做的改进吧,获取用户信息的授权步骤如下:

// wxml的代码
<button open-type="getUserInfo" bindgetuserinfo='login' >获取用户信息</button>

// js代码
  getUserInfo(event) {
    console.log(event);
  },

当用户点击按钮,时,就能获得 event 的信息,信息如下

{
    "type": "getuserinfo",
    "timeStamp": 2141,
    "target": {
        "id": "",
        "offsetLeft": 0,
        "offsetTop": 0,
        "dataset": {}
    },
    "currentTarget": {
        "id": "",
        "offsetLeft": 0,
        "offsetTop": 0,
        "dataset": {}
    },
    "mark": {},
    "detail": {
        "errMsg": "getUserInfo:ok",
        "iv": "wxPrFbK3bavrAMujWck9DQ==",
        "userInfo": {
            "nickName": "张三",
            "gender": 1,
            "language": "zh_CN",
            "city": "Shenzhen",
            "province": "Guangdong",
            "country": "China",
            "avatarUrl": "https://wx.qlogo.cn/mmopen/vi_32/BD5O3DV5ZDt5pebesxZUiaj1MNYUjjL1NObGHUkxfGTI896rCwHlmQmicPDHDJLFpALoXiajehldX1eVXibZnOHgFQ/132"
        }
    }
}

 login(event) {
    console.log(event);
    wx.setStorageSync('userInfo', event.detail.userInfo)
    wx.setStorageSync('userimage', event.detail.userInfo.avatarUrl)
    wx.setStorageSync('users', event.detail.userInfo.nickName)
    this.setData({
      userInfo: event.detail.userInfo,
      userimage: event.detail.userInfo.avatarUrl,
      users: event.detail.userInfo.nickName,
      hasUserInfo: true
    })
    wx.login({
      success: (res) => {
        let { iv, encryptedData, userInfo } = event.detail;
        let url = '/user/login';
        let data = {
          iv, encryptedData, userInfo, code: res.code
        }
        app.$post(url, data).then(res => {
          console.log(res);
          // 把token存入缓存
          let { token } = res.user;
          wx.setStorageSync('token', token);
         
        }).catch(err => {
          console.log(err);
        })
      }
    })
  }

其中 event.detail.userInfo 就是用户信息了,接下来就可以去用 userInfo 和 wx.login 拿到的 code 去登录了

11使用 vant-ui 库

1.安装 在小程序根目录执行一下命令
npm init -y
npm i vant-weapp -S --production
2构建npm包
image.png
3引用使用组件

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。如果你是通过下载源代码的方式使用 vant-weapp，请将路径修改为项目中 vant-weapp 所在的目录。

// app.json
"usingComponents": {
  "van-button": "vant-weapp/button"
}

引入组件后，可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>
4 其他 (在开发者工具中预览示例小程序)

1下载vant-weapp

2安装依赖和运行

# 安装项目依赖
npm install
# 执行组件编译
npm run dev

  1. 在小程序中运行,打开微信开发者工具，导入example目录的项目就可以预览示例了。

  2. 当在小程序能看到预览之后,上面运行的服务就可以停止了,下次打开小程序预览有赞 ui 库也不需要再执行

    • 该服务运行,页面打开后实际就是 ui 库的文档
    • 运行之后自动编译小程序组件(只需编译一次)
    • 如果我们看文档是到 vant-weapp 官网去看的话,上面的服务就不需要再运行

12模拟数据 (mock)

现在开发项目社会的主流是前后端分离，这样前端和后端就可以根据自己的进度开发，可以不同步。后端同学接口还没做好，前端同学怎么测试呢，这样就要用到模拟数据了。

（一） 请求本地的 json 文件

项目里新建个文件夹用来存放测试用的 json 文件。

reqwest({ url: "mock/user.json" })
  .then(res => {
    console.log(res);
  })
  .fail(err => {
    console.log(err);
  });

(二)用 mock.js

  • 安装：npm install --save mockjs
  • 写模拟数据
import Mock from 'mockjs';
Mock.mock('/v1/user', {
    'list|1-10': [{
        'id|+1': 1,
        'email': '@EMAIL'
    }]
})
  • 发起 ajax 请求
reqwest({
  url: "/v1/user",
  type: "json"
})
  .then(res => {
    console.log(res);
  })
  .fail(err => {
    console.log(err);
  });

(三)用 Node.js 搭建一个服务器模拟后台

个人开源 mockServe 项目，地址：文档地址

1把项目下载到本地=>安装依赖

npm i

2全局安装 nodemon

npm i nodemon -g

3运行项目

npm run dev

4编写接口

1项目的目录结构如下:

image.png

2点开 project 文件夹，新建文件夹输入您的项目名称：比如 taobao

3我们现在在 taobao 的文件夹里写一个 login 的接口，在 taobao 目录里新建文件 login.js 把下面的代码贴到 login.js 里：

const data = {
  code: '666',
  msg: 'success'
}
module.exports = (ctx)=> {
    ctx.body = data;
}

现在你已经成功了创建了第一个接口，在浏览器如输入：http://localhost:3000/tobao/login 就可以访问

4请求参数

ctx.query.username  // 获取get请求参数
ctx.request.body.username  // 获取post请求参数

参考文档

13小程序支付

小程序支付流程

  1. 小程序端请求后端支付接口，把支付总价传给后台
  2. 后端调用小程序统一下单 API,获取预预支付订单信息,给前端返回预支付信息
  3. 小程序端使用 wx.requestPayment 调起支付窗口
  4. 小程序端轮询支付结果,获取结果后给用户展示支付结果

(一) 前端请求后端预支付接口

需要给后台传支付金额,根据后台的需要再传入其他的参数

(二) 后端调用小程序统一下单 API

1小程序支付流程

2统一下单

3 给前端返回支付所需参数

(三) 小程序端使用 wx.requestPayment

1文档地址

2调用

wx.requestPayment({
  // 时间戳
  timeStamp: "",
  // 随机字符串
  nonceStr: "",
  // 统一下单接口返回的 prepay_id 参数值
  package: "",
  // 签名类型
  signType: "",
  // 签名
  paySign: "",
  // 支付成功的回调
  success(res) {},
  // 支付失败的回调
  fail(res) {}
});

(四) 小程序端轮询支付结果

  1. 小程序支付和其他的微信支付,都是用户直接调用微信支付,微信支付再通知商户的服务器,所以需要前端去轮询后端,获得支付结果.

  2. 虽然小程序端调起微信支付也会知道支付的结果,但是为了同步结果(确保后端也收到了同样的支付结果通知),需要轮询

  3. 参考链接如下

    微信小程序调用支付接口支付

    nodejs实现小程序微信支付

14环境判断

//

if (typeof __wxConfig =="object"){
  let version = __wxConfig.envVersion;
  console.log("当前环境:" + version)
  if (version =="develop"){
    //工具或者真机 开发环境
 
  }else if (version =="trial"){
    //测试环境(体验版)
 
  }else if (version =="release"){
    //正式环境
 
  }
}
  • 网络请求的 referer header 不可设置。其格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本；
  • wx.request、wx.uploadFile、wx.downloadFile 的最大并发限制是 10 个；
  • 小程序进入后台运行后（非置顶聊天），如果 5s 内网络请求没有结束，会回调错误信息 fail interrupted；在回到前台之前，网络请求接口调用都会无法调用。
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,736评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,167评论 1赞 291
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,442评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,902评论 0赞 204
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,302评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,573评论 1赞 216
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,847评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,562评论 0赞 197
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,260评论 1赞 241
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2赞 245
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1赞 258
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,367评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,016评论 3赞 235
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0赞 194
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2赞 269

推荐阅读更多精彩内容

  • 2018-09-21 小程序
    小程序面试题 小程序授权登录流程 0、如何获得用户信息...
    X秀秀阅读 1,778评论 0赞 8
  • 微信小程序入门与实例
    第一章 什么是微信小程序 1. 小程序介绍 微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取...
    呆毛和二货阅读 768评论 0赞 1
  • 小程序
    1.搭建项目 创建新项目,你需要先注册一个小程序账号,当然也可以暂时先使用一个测试的 appid 小程序配置 2....
    aYaaWa阅读 502评论 0赞 0
  • 微信小程序开发基础知识总结
    微信小程序在无论在功能、文档及相关支持方面，都是优于前面几种微信账号类型，它提供了很多原生程序才有的接口，使得我们...
    未央大佬阅读 2,266评论 0赞 12
  • 微信小程序进阶(1)-框架
    因新工作主要负责微信小程序这一块，最近的重心就移到这一块，该博客是对微信小程序整体的整理归纳以及标明一些细节点，初...
    majun00阅读 7,210评论 0赞 9