目录
            

        

• 事前准备        
  
• 创建项目        
  
• 利用MUI写一个简单的页面        
  
• 关于文件打包        
  

    事前准备

1. # 软件HBuilder X   Web开发IDE 下载地址:https://www.dcloud.io/hbuilderx.html        MUI  前端框架(移动端)    使用文档:https://dev.dcloud.net.cn/mui/ui/#iconWhat is Mui：    - 移动端布局框架 made in China    - 模拟移动App,HTML布局框架    - Css+javascript 模拟出动态效果 CPU瞬时损耗严重(以现在手机的性能可以流畅运行)Mui + HBuilderX 30+  mDoctype(mui-dom结构)mh -->  mHeader(标题栏)mb -->  mBody(主体 里面放内容) mt -->  mTab(底部选项卡)

复制代码

效果展示

1.                     Document                                                    [size=6]新闻快车[/size]
3.                                                                 [url=http://192.168.1.133:88/iotbbs//]推荐[/url]                    [url=http://192.168.1.133:88/iotbbs//]热点[/url]                    [url=http://192.168.1.133:88/iotbbs//]北京[/url]                    [url=http://192.168.1.133:88/iotbbs//]社会[/url]                    [url=http://192.168.1.133:88/iotbbs//]娱乐[/url]                    [url=http://192.168.1.133:88/iotbbs//]科技[/url]               
4.             
5.                                                 [url=http://192.168.1.133:88/iotbbs//#]无锡高架桥侧翻事故已致3死2伤 更多详情披露[align=center] [/align][/url]
6.                     [url=http://192.168.1.133:88/iotbbs//#][align=center][img]http://192.168.1.133:88/iotbbs//2.jpg[/img][/align][/url]
7.                     [url=http://192.168.1.133:88/iotbbs//#][align=center][img]http://192.168.1.133:88/iotbbs//3.jpg[/img][/align][/url]
8.                     [url=http://192.168.1.133:88/iotbbs//#][align=center][img]http://192.168.1.133:88/iotbbs//4.jpg[/img][/align][/url]
9.                
10.             
11.             
12. [list]               
13. [*]                    [align=center] [/align]                                                    首次公开！中国火星探测器.                            中国火星探测器“真容”曝光，个头巨大
14.                         
15.                
16. [*]                    [align=center] [/align]                                                    无锡高架桥垮塌9小时                            无锡高架桥垮塌9小时：值班热线表示不知详情 官方微博只字未提
17.                         
18.                
19. [*]                    [align=center] [/align]                                                    日本紧张备战强台风                            日本紧张备战强台风：电车停运商场关门 胶布卖断货.
20.                         
21.                
22. [*]                    [align=center] [/align]                                                    首次公开！中国火星探测器.                            中国火星探测器“真容”曝光，个头巨大
23.                         
24.                
25. [*]                    [align=center] [/align]                                                    无锡高架桥垮塌9小时                            无锡高架桥垮塌9小时：值班热线表示不知详情 官方微博只字未提
26.                         
27.                 <li class="mui-table-view-cell mui-media">               
28. [*]                    [align=center] [/align]                                                    首次公开！中国火星探测器.                            中国火星探测器“真容”曝光，个头巨大
29.                         
30.                
31. [*]                    [align=center] [/align]                                                    无锡高架桥垮塌9小时                            无锡高架桥垮塌9小时：值班热线表示不知详情 官方微博只字未提
32.                         
33.                 <li class="mui-table-view-cell mui-media">            
34. [/list]        
35.                     [url=http://192.168.1.133:88/iotbbs//]首页[/url]            [url=http://192.168.1.133:88/iotbbs//]视频[/url]            [url=http://192.168.1.133:88/iotbbs//]段子[/url]            [url=http://192.168.1.133:88/iotbbs//]我的[/url]                                    

复制代码

1. 关于如何使用mui,及页面之间的传参调用直接参考官方文档.https://dev.dcloud.net.cn/mui/ui/#icon后台小型项目推荐使用Flask轻量级框架

复制代码

关于文件打包

演示app:点击下载

    作    者：郭楷丰    出    处：https://www.cnblogs.com/guokaifeng/    声援博主：如果您觉得文章对您有帮助，可以点击文章右下角 【推荐】一下。您的鼓励是博主的最大动力！    自    勉：生活，需要追求；梦想，需要坚持；生命，需要珍惜；但人生的路上，更需要坚强。带着感恩的心启程，学会爱，爱父母，爱自己，爱朋友，爱他人。
免责声明：本文内容部分来源于网络，出于网络分享目的，如对您的权益版权有异议我们将予以删除，谢谢合作！

目录
            

        

• 事前准备        
  
• 创建项目        
  
• 利用MUI写一个简单的页面        
  
• 关于文件打包        
  

    事前准备

1. # 软件HBuilder X   Web开发IDE 下载地址:https://www.dcloud.io/hbuilderx.html        MUI  前端框架(移动端)    使用文档:https://dev.dcloud.net.cn/mui/ui/#iconWhat is Mui：    - 移动端布局框架 made in China    - 模拟移动App,HTML布局框架    - Css+javascript 模拟出动态效果 CPU瞬时损耗严重(以现在手机的性能可以流畅运行)Mui + HBuilderX 30+  mDoctype(mui-dom结构)mh -->  mHeader(标题栏)mb -->  mBody(主体 里面放内容) mt -->  mTab(底部选项卡)

复制代码

效果展示

1.                     Document                                                    [size=6]新闻快车[/size]
3.                                                                 [url=http://192.168.1.133:88/iotbbs//]推荐[/url]                    [url=http://192.168.1.133:88/iotbbs//]热点[/url]                    [url=http://192.168.1.133:88/iotbbs//]北京[/url]                    [url=http://192.168.1.133:88/iotbbs//]社会[/url]                    [url=http://192.168.1.133:88/iotbbs//]娱乐[/url]                    [url=http://192.168.1.133:88/iotbbs//]科技[/url]               
4.             
5.                                                 [url=http://192.168.1.133:88/iotbbs//#]无锡高架桥侧翻事故已致3死2伤 更多详情披露[align=center] [/align][/url]
6.                     [url=http://192.168.1.133:88/iotbbs//#][align=center][img]http://192.168.1.133:88/iotbbs//2.jpg[/img][/align][/url]
7.                     [url=http://192.168.1.133:88/iotbbs//#][align=center][img]http://192.168.1.133:88/iotbbs//3.jpg[/img][/align][/url]
8.                     [url=http://192.168.1.133:88/iotbbs//#][align=center][img]http://192.168.1.133:88/iotbbs//4.jpg[/img][/align][/url]
9.                
10.             
11.             
12. [list]               
13. [*]                    [align=center] [/align]                                                    首次公开！中国火星探测器.                            中国火星探测器“真容”曝光，个头巨大
14.                         
15.                
16. [*]                    [align=center] [/align]                                                    无锡高架桥垮塌9小时                            无锡高架桥垮塌9小时：值班热线表示不知详情 官方微博只字未提
17.                         
18.                
19. [*]                    [align=center] [/align]                                                    日本紧张备战强台风                            日本紧张备战强台风：电车停运商场关门 胶布卖断货.
20.                         
21.                
22. [*]                    [align=center] [/align]                                                    首次公开！中国火星探测器.                            中国火星探测器“真容”曝光，个头巨大
23.                         
24.                
25. [*]                    [align=center] [/align]                                                    无锡高架桥垮塌9小时                            无锡高架桥垮塌9小时：值班热线表示不知详情 官方微博只字未提
26.                         
27.                 <li class="mui-table-view-cell mui-media">               
28. [*]                    [align=center] [/align]                                                    首次公开！中国火星探测器.                            中国火星探测器“真容”曝光，个头巨大
29.                         
30.                
31. [*]                    [align=center] [/align]                                                    无锡高架桥垮塌9小时                            无锡高架桥垮塌9小时：值班热线表示不知详情 官方微博只字未提
32.                         
33.                 <li class="mui-table-view-cell mui-media">            
34. [/list]        
35.                     [url=http://192.168.1.133:88/iotbbs//]首页[/url]            [url=http://192.168.1.133:88/iotbbs//]视频[/url]            [url=http://192.168.1.133:88/iotbbs//]段子[/url]            [url=http://192.168.1.133:88/iotbbs//]我的[/url]                                    

复制代码

1. 关于如何使用mui,及页面之间的传参调用直接参考官方文档.https://dev.dcloud.net.cn/mui/ui/#icon后台小型项目推荐使用Flask轻量级框架

复制代码

关于文件打包

演示app:点击下载

    作    者：郭楷丰    出    处：https://www.cnblogs.com/guokaifeng/    声援博主：如果您觉得文章对您有帮助，可以点击文章右下角 【推荐】一下。您的鼓励是博主的最大动力！    自    勉：生活，需要追求；梦想，需要坚持；生命，需要珍惜；但人生的路上，更需要坚强。带着感恩的心启程，学会爱，爱父母，爱自己，爱朋友，爱他人。
免责声明：本文内容部分来源于网络，出于网络分享目的，如对您的权益版权有异议我们将予以删除，谢谢合作！