258资源分享网

最近开始针对项目性全面学习了一点js，和同事一起用MUI写了个项目，就敢拿出来献丑，我也是diaodiao的。经过几十个工时业余时间*（最近两周有点忙，周期拖得有点长，本来计划五一之前发出来的） ，在 仿知乎微信小程序demo 基础上，结合玩Android开源API，完成了玩Android小程序版的初版 （和群里基佬们做得比感觉做的太简单了，大家就当练练手）*，扫码或者关注微信公众号 Android精推 即可体验：

本项目主要包含以下几大模块：

首页

项目

体系

我的

登录

先上预览图：

首页：

项目：

体系：

我的：

为什么要写这个？学了点js就飘了，群里大佬们写的都是Android版本的，微信小程序大家似乎都有接触但是可能都觉得比较简单，也是为了便于手持iPhone的基佬们随时点赞刷玩Android。

说几点： 1. 微信小程序开发入门注意事项

这里就不赘述太多，看我基友 阿汤哥 的一篇文章小程序基本介绍就差不多了。简单归简单，不过微信小程序在开发过程中坑还是很多的，我也是边学边百度，我这个人踩坑踩惯了，建议大家初学的时候，找个优质一点的demo照葫芦画瓢，学着写很容易上手。

2. 未实现的功能

首页文章列表搜索*（计划V1.1实现）*

收藏列表*（计划V1.1实现）*

查看文章详情等需要跳转h5页面的功能*（计划搞到企业账号实现）*

收藏项目等*（目前已实现收藏文章）*

剩下的你们提，我做不出来*（或者没时间）*你们fork去

3. 微信小程序代码写法的一些特点

工具类等输出对公共方法

写方法体还是一样

function formatNumber(n) { n = n.toString() return n[1] ? n : '0' + n } 复制代码

或者

function getData(url) { XXXXXX } 复制代码

都和我们原生js写法、jquery等几乎一致，然鹅要注意一点就是如果该方法需要外部调用，需要多加一个：

module.exports = { formatTime: formatTime }; 复制代码

在文件里加上这个，或者也可以写成：

module.exports.getData = getData; 复制代码

####js页面数据刷新html（wxml） 微信小程序绑定js数据不像angular那样，在每个页面的js文件中，都有个类似oncreat的方法，即Page() 函数，它是用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等这里每个页面的WXML 中的动态数据均来自对应 Page 的 data。给页面初始赋值可以在data里面直接放置：

data: { motto: 'Hello World', userInfo: {}, wanUserName: '登录玩Android账户', } 复制代码

而我们经过数据处理以后，需要实时更新页面则可以直接调用：

//更新数据 that.setData({ userInfo: userInfo }) 复制代码

对，就是键值对的方式，和data一样。这里需要注意的是 that 这个，我们一般会在方法体内部先var一个参数that去获取全局实例 this ，这样避免方法自己的实例取代了页面的全局实例。this代表着当前对象，会随着程序的执行过程中的上下文改变，例如在wx.request({});方法的回调函数中，对象已经发生改变，所以已经不是wx.request({});方法对象了，data属性也不存在了。

页面销毁与返回

那么在微信小程序里我们怎么管理页面呢。微信小程序固然没有AMS这些东西，那么我们可以判断page来管理：

// 返回上个页面 setTimeout(function () { wx.navigateBack({ delta: 1 }) }, 1500); 复制代码

这里我设置了一个延迟，核心的代码是wx.navigateBack(),这里面的参数delta指的是退回页面的层数，比如我这里是返回上一页，那么值就是1，以此类推。。。但是我们一般返回上个页面的时候也会带一定的参数，这里就有三种*（可能更多） 介绍给大家： 1、利用本地存储 （类似Android的sp）*方式存储起来，这里去看看官方文档很简单，都是wx.XXX的。 2、利用生命周期传递，例如：

var pages = getCurrentPages(); var currPage = pages[pages.length - 1]; //当前页面 var prevPage = pages[pages.length - 2]; //上一个页面 //直接调用上一个页面的setData()方法，把数据存到上一个页面中去 prevPage.setData({ mydata: {a:1, b:2} }) 复制代码