频道栏目
首页 > 微信学院 > 微信公众平台开发 > 正文

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

2017-03-28 09:55:00      个评论    来源:sinat_29485667的博客  
收藏   我要投稿

微信公众号开发-自定义菜单中链接用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后,可以在微信测试号中打开新的链接。 注:今日多次尝试,发现新的更改并没有应用。最后发现是测试号需要清空以往内容。长时间没有使用,或者做了大规模的更改之后,最好重新关注,并清空以往内容。

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

\
\

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

上一篇:微信开发,分享部分出现的问题
下一篇:微信公众号支持“个人”迁移到“组织”(附详细步骤)
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训

版权所有: 红黑联盟--致力于做实用的IT技术学习网站