258资源分享网

微信小程序最近很火，火到什么程度，只要你一打开微信，就是它的身影，几乎你用的各个APP都可以在微信中找到它的复制版，另外官方自带的跳一跳更是将它推到了空前至高的位置。对比公众号，就我的感觉来说，有以下区别：

公众号略显繁琐：我首先要关注才能看到内容，而小程序不用(个人对微信公众号研究不深，不对之处还望见谅)

小程序性能要好一些：虽然我不是很清楚小程序用什么实现，就体验来说确实更接近原生一点；但是微信公众号是用网页的形式来展示内容的，其中的兼容性和性能问题不用我说，各位luer就已经清楚了吧

小程序更易开发：小程序发布了一套新的代码规则，也提供了一系列的组件，对比公众号百家争鸣的形式确实要统一得多

废话说了这么多，我也是最近才开始看小程序的实现方式，体验了一把，确实比较爽，以下就是个人开发总结：

简易的官网小程序

微信小程序官网中有个简单的小demo，地址在这里：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html，按照它的步骤来，一定是可以运行一个和官方一样的例子出来的，这里就不贴过程了。主要说一下个人整体感受：

js还是原来的js，css还是原来的css，html方面来说，是改了一点东西，比如：div变成了view，文本变成了text，以及img变成了image，但是换汤不换药，该怎么用还是怎么用，而且语义也更加明确。

增加了配置文件.json，全局有一个app.json，是全局的配置，比如导航栏、TAB的配置，全局路由的配置等等，而在每个页面中，依然是可以进行全局覆盖的，比如list.json中单独规定了列表页面长啥样子。

每个页面都具有生命周期(包括启动页)，类似于react/vue的声明周期，更加明确在哪个阶段可以做哪些事情

代码组件化，很多封装的组件都可以简单引用，比如map，而在微信公众号上开发的时候，你可能还需要专门写一个地图插件

API更加好用，虽然我没多少开发过公众号，但是就之前配置的jssdk来说，就感觉比小程序复杂，小程序只需要一个appId就可以了，然后在代码中直接使用wx对象来调用各种API

开发一个类似微信UI的简单聊天程序

只是感兴趣稍微做了一下案例，其中功能可能根本就还只是九牛一毛，但是觉得有必要记录一下，说说自己遇到的问题以及解决办法，界面整体如下：

首先，在app.json中编写页面路由，如下： { "pages":[ "pages/index/index", "pages/list/list", "pages/chat/chat" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#000", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"#fff" } }

这里有3个页面，首页放一个按钮作为入口，列表页表示聊天记录，还有一个聊天页。

列表页没有什么可以讲的，设置列表页的标题可以在list.json中设置即可，如下：

// list.json { "navigationBarTitleText": "聊天列表" } 列表页模拟了一些数据，然后再点击每一条的时候，进入单个聊天页面当中，其中需要将当前点击的一些信息传入下一个页面当中，这里仅仅只有名字。 //chat.js //获取应用实例 const app = getApp() const friends = require('./list-mock-data.js') Page({ data: { friends: friends.list }, gotoChat(event) { const currentUser = event.currentTarget.dataset.user; wx.navigateTo({ url: '../chat/chat?nickname=' + currentUser.nickname }) } })

然后进入聊天页面，首先进入聊天页面我想到的是，每一个气泡加上它的头像是否可以做成一个组件，因为只有左右的区分而已，另外如果再加上时间的话，再将时间传递过去就可以了。

因此chat.wxml最开始就是这样规划的：

<block wx:for="{{ messages }}" wx:key="messages{{ index }}" > <template id="{{ item.id }}" is="bubble" data="{{ ...item }}" /> </block>

template中的代码就不展示了，最开始我写模板的时候，是开了一个codePen，然后模拟写出来之后，再往模板中套，保证基本的样子差不多，然后再在模板上进行细微的改动就可以了。

聊天页顶部的标题是通过列表页中传过来的，在页面加载完成的时候，设置就好了：

// chat.js // 设置昵称 setNickName(option) { const nickname = option.nickname || 'Marry'; wx.setNavigationBarTitle({ title: nickname }); },

最开始的样子就是这样子的:

至此，基本的页面形态就已经完成了。

遇到的一些问题：