微信公众号开发-自定义菜单中链接用MUI前端框架写的网页以及发布到SAE服务器

微信公众号开发-自定义菜单中链接用MUI前端框架写的网页以及发布到SAE服务器，现在继续关于自定义菜单的链接。因为开发者需要自己写网页，所以在SAE中实现自己写的网页是至关重要的。

没有阅读过上一篇的平台搭建的，可以转至：http://blog.csdn.net/sinat_29485667/article/details/56672320 在开始今天的内容之前，我将中间这段时间关于微信开发的摸索及成果做一个系统的说明。

1、关于自定义菜单是在测试号中才能看到的，所以后期我都将采用测试号来开发。当然，有认证的服务号的童鞋可以直接用服务号，大多数做开发学习的学生肯定和我一样，用个人申请的订阅号就可以了。

2、如果是想要自己做微信菜单链接页面的同学，在开始看这篇文章之前，要学习基础的HTML、CSS以及JS　这是前端的基础，简单了解就好。我用的工具是HBuilder 很方便，可以用开发移动app，以及网页web。

详细的可以自己去了解。最主要的一点是，对于摸索中学习网页面开发的人来说，HBuilder有一点很重要。在新建web项目时，有微信项目可以勾选，支持微信JS-SDK的提示。

3、关于WXUI以及MUI 当然，关于前端框架，我知道的很少，而且没有用过。因为向学长取经时，学长推荐了写微信时用这两个框架比较好，所以专门去做了了解。用起来确实很方便。 WXUI 也就是微信的网页开发样式库：参阅开发文档 https://mp.weixin.qq.com/wiki/2/ae9782fb42e47ad79eb7b361c2149d16.html 通俗的讲就是微信自己写好了各种样式(按钮风格以及各种弹窗风格)这也就是为什么我们打开的很多微信页面一眼就知道是微信，风格的同意使得更专业化，也让用户信任。 MUI 是最接近原生APP体验的高性能前端框架 也就是和WXUI类似 只是作用域不局限于微信的开发。前端开发使用的非常多(学长传授经验)官网首页 http://dev.dcloud.net.cn/mui/ 可以在手机上下载Hello mui 来查看各种样式的效果 试了一个 感觉很不错 拿来即用 很赞! 下面以使用MUI为例，在SAE上链接到自定义菜单里。 MUI的文档在GitHub上有：https://github.com/dcloudio/mui 下载下来：

我使用的是MUI的图片轮播效果来演示。我们开发网页时，通常是根据需要来使用MUI的样式。这里演示轮播图的使用。 首先，打开http://dcloud.io/hellomui/ 这里有MUI的样式，建议用电脑打开。方便查看代码。手机打开可以看到在手机端显示的效果。以图片轮播的下方悬浮标题为例。 http://dcloud.io/hellomui/examples/slider-with-title.html 打开这个页面后，按F12 。可以查看网页的源代码。(win10自带的浏览器中没有显示图片的文件夹)

而实际上谷歌浏览器和win10的edge浏览器显示的源代码是不一样的。(图为谷歌浏览器相同页面的源代码)

我也不知道是因为什么，但是有一点是肯定的，image文件夹是绝对不能少的。因为图片轮播需要图片的路径。win10浏览器中的js里的文件在Hbuilder中生成微信项目时，已经自动生成，可以不用拷贝。(图为win10浏览器页面)

这里的hellomui项目里，里面有CSS、js以及examples文件。右边是相应的代码。这些代码就是显示图片轮播效果下方悬浮标题效果的关键。将项目展开，然后将代码copy进HBuilder里的相应文件夹中。Hbuilder的使用就不介绍了，安装后通俗易懂。文件->新建->web项目(勾选微信项目)然后按照MUI项目里的建立代码文件。下图是HBuilder里的项目截图。

可以通过浏览器或者手机调试。查看轮播图效果。图片以及文字等都可以在代码中修改，这里我改了图片。当然相应的代码中的图片路径和名字都要更改。关键显示页面的代码主要在slider-with-title.html页面中。(html以及css基础是关键) 现在是要将项目打包放到新浪云服务器上。 首先，找到Hbuilder的项目文件夹，将刚刚新建的整个项目打包(格式为zip,rar以及) 然后登陆新浪云，打开应用的代码管理->上传代码包->找到刚刚打包的代码包

然后就是编辑代码了，将自定义菜单中的相应链接更改，并重新生成token才能生效。(每次做代码更改都要重新生成token 在上篇中讲过) 将自定义菜单中原先随意写的代码替换，换成slider-with-title.html的链接(生成链接是在服务器中，找到此文件，右击，选择通过URL访问。复制打开的网页链接的地址即可) 重新生成token后，可以在微信测试号中打开新的链接。 注：今日多次尝试，发现新的更改并没有应用。最后发现是测试号需要清空以往内容。长时间没有使用，或者做了大规模的更改之后，最好重新关注，并清空以往内容。

图片是测试号打开菜单相应选项的显示效果。(注意图片的大小，最好压缩压缩再压缩，文档太大时，页面加载很慢，页面的定时轮播选项有可能打不开)

关于微信开发的前期探索基本就到这里，了解了这些之后，就要开始规划我的毕设的相关设计了。