下载文档原格式
第7章综合案例：仿华为商城微信小程序教学过程7.1 需求描述仿华为商城微信小程序需要完成以下主要功能：（1）完成首页显示商品功能设计，首页内容包括搜索区域、海报轮播图片区域、精选商品列表区域、手机列表区域、笔记本电脑列表区域，如图所示。
首页手机笔记本电脑（2）完成分类页面里商品导航和导航对应商品显示设计，动态获取导航内容和导航对应的商品，如图所示。
分类（3）完成我的界面设计，包括账号相关设计和列表式导航设计，如图所示。
我的（4）完成登录设计，包括账号密码登录和手机快捷登录，如图所示。
账号密码登录手机快捷登录（5）完成账号注册功能，来获取用户账号信息，如图所示。
注册7.2 设计思路（1）设计底部标签导航，准备好底部标签导航的图标，并建立3个相应的页面；设置默认时图片和选中时图片，标签名称采用两种颜色，红色为选中颜色，灰色为默认颜色。
（2）设计我的页面，先进行我的页面布局设计，然后实现通过微信授权用户的方式来获取用户头像和昵称，来达到登录的效果，这也是很多小程序会采用的一种设计方式。
（3）除了通过微信授权的方式获取用户，也可以自行设计登录界面，本案例设计账号密码登录和手机快捷登录。
（4）完成登录设计之后，开始设计注册功能来获取用户账号。
（5）设计首页功能，首页功能包括搜索区域、海报轮播区域、宫格导航区域、精选商品区域、手机区域、笔记本电脑区域的布局，然后通过API接口动态的来获取海报轮播图片列表和商品列表。
（6）设计分类页面功能，先进行分类页面布局设计，然后通过API接口动态获取分类导航信息和导航对应商品列表。
7.3 相关知识点（1）在界面布局的时候，会用到微信小程序的组件，包括view视图容器组件、scroll-view可滚动视图区域组件、image图片组件、swiper滑块视图容器组件、icon图标组件、form表单组件、radio单项选择器组件、checkbox多项选择器组件等组件的使用。
（2）scroll-view可滚动视图区域组件用来实现首页精选商品左右滑动效果来查看所有的商品。
第3章资讯类：仿今⽇头条微信⼩程序微信⼩程序开发全案精讲主讲⼈：⼩刚⽼师第3章资讯类：仿今⽇头条微信⼩程序3.1需求描述及交互分析3.2设计思路和相关知识点3.3新闻频道滑动效果设计3.4⾸页新闻内容设计微信⼩程序开发全案精讲第3章资讯类：仿今⽇头条微信⼩程序3.5⾸页新闻详情页设计3.6我的界⾯列表式导航设计3.7系统设置⼆级界⾯设计微信⼩程序开发全案精讲第3章资讯类：仿今⽇头条微信⼩程序3.1需求描述及交互分析需求描述（1）新闻频道滑动效果设计，包括底部标签导航设计、新闻检索框设计、新闻频道滑动效果设计；微信⼩程序开发全案精讲第3章资讯类：仿今⽇头条微信⼩程序3.1需求描述及交互分析需求描述（2）⾸页新闻内容设计，包括新闻标题、新闻图⽚以及新闻评论设计；微信⼩程序开发全案精讲第3章资讯类：仿今⽇头条微信⼩程序3.1需求描述及交互分析需求描述（3）⾸页新闻详情页设计，显⽰新闻的详细内容，包括标题、发布⼈、发布时间、正⽂内容以及底部评论区域；微信⼩程序开发全案精讲第3章资讯类：仿今⽇头条微信⼩程序3.1需求描述及交互分析需求描述（4）我的界⾯列表式导航式设计，采⽤列表式导航来设计我的界⾯，同时作为⼆级界⾯的导航；微信⼩程序开发全案精讲第3章资讯类：仿今⽇头条微信⼩程序3.1需求描述及交互分析需求描述（5）系统设置⼆级界⾯设计；微信⼩程序开发全案精讲第3章资讯类：仿今⽇头条微信⼩程序3.1需求描述及交互分析交互分析（1）⾸页、我的底部标签导航，单击不同标签导航，显⽰对应的导航内容界⾯；（2）新闻频道滑动效果设计，新闻频道可以向左向右滑动，单击不同的新闻频道可以显⽰对应新闻频道内容；（3）⾸页新闻内容可以点击进去查看完整的新闻内容，展⽰新闻的标题、发布⼈、发布时间以及正⽂等等新闻内容；（4）我的界⾯采⽤列表式导航设计，通过列表式导航可以进⼊到⼆级界⾯；微信⼩程序开发全案精讲第3章资讯类：仿今⽇头条微信⼩程序3.2设计思路及相关知识点设计思路（1）设计底部标签导航，准备好底部标签导航的图标和建⽴相应的两个页⾯；（2）设计新闻频道滑动效果，需要借助于scroll-view可滚动视图容器组件，允许⽔平⽅向上进⾏滑动；（3）设计新闻频道页签切换效果，单击新闻频道页签，显⽰相应的内容；（4）设计⾸页新闻内容列表，设计新闻的标题样式、图⽚的显⽰以及评论；（5）设计⾸页新闻详情界⾯设计，新闻标题、发布⼈、发布时间、关注、正⽂内容已经评论区域；（6）设计我的界⾯，获取账号信息以及采⽤列表式导航进⾏设计；微信⼩程序开发全案精讲第3章资讯类：仿今⽇头条微信⼩程序3.2设计思路及相关知识点相关知识点（1）app.json配置，这个⽂件来对微信⼩程序进⾏全局配置，决定页⾯⽂件的路径、窗⼝表现、设置⽹络超时时间、设置底部标签导航、开启debug开发模式；（2）scroll-view可滚动视图区域组件，采⽤这个组件可以运⾏⽔平⽅向上或者垂直⽅向上进⾏滚动，来实现新闻频道滑动效果设计；（3）swiper滑块视图容器组件，可以实现海报轮播效果动态展⽰以及页签内容切换效果；（4）view视图容器组件，⽤来进⾏界⾯的布局、image图⽚组件⽤来展⽰图⽚信息；（5）input输⼊框组件，⽤来输⼊单⾏⽂本内容；（6）获取账号信息，使⽤app.getUserInfo函数来获取账户信息；（7）wx.navigateTo保留当前页⾯，跳转到应⽤内的某个页⾯，使⽤wx.navigateBack可以返回到原页⾯；微信⼩程序开发全案精讲第3章资讯类：仿今⽇头条微信⼩程序3.3新闻频道滑动效果设计新闻频道滑动效果设计微信⼩程序开发全案精讲第3章资讯类：仿今⽇头条微信⼩程序3.4⾸页新闻内容设计⾸页新闻内容设计微信⼩程序开发全案精讲第3章资讯类：仿今⽇头条微信⼩程序3.5⾸页新闻详情页设计⾸页新闻详情页设计微信⼩程序开发全案精讲第3章资讯类：仿今⽇头条微信⼩程序3.6我的界⾯列表式导航设计我的界⾯列表式导航设计微信⼩程序开发全案精讲第3章资讯类：仿今⽇头条微信⼩程序3.7系统设置⼆级界⾯设计系统设置⼆级界⾯设计微信⼩程序开发全案精讲第3章资讯类：仿今⽇头条微信⼩程序总结新闻频道滑动效果设计⾸页新闻内容设计⾸页新闻详情页设计我的界⾯列表式导航设计系统设置⼆级界⾯设计微信⼩程序开发全案精讲谢谢观看。
![微信小程序开发 3-4 教案-九九乘法表[3页]](https://img.taocdn.com/s1/m/cdfa78d5710abb68a98271fe910ef12d2bf9a973.png)
第3章小程序视图层任务3.4 九九乘法表图3.4 九九乘法表四、任务实现1.编写index.wxml文件中的代码本任务利用双重wx:for列表渲染和wx:if条件渲染来实现九九乘法表的打印。
代码中使用了.jiujiu 和.inline两种样式，.jiujiu用于控制字体大小和边距，.inline利用inline-block属性控制某一row行的所有col列都在同一行内显示，而且上一次row循环与下一次col循环列之间留有空格。
此外，使用width属性控制每一行的总宽度，从而保证最长一行文字能够显示出来，显示的文字大小合适。
index.wxml文件：<!--index.wxml--><view class='jiujiu'><view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="row"><view class="inline" wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="col"><view wx:if="{{col<=row}}">{{col}}x{{row}}={{col*row}}</view></view></view></view>2.编写index.wxss文件代码本案例index.wxml中，已经定义了.jiujiu和.inline样式，现编写.jiujiu和.inline两个定义。
index.wxss文件见附件；3.编写index.json文件代码该文件用来显示小程序标题栏的样式和文本内容，前面已经讲过，这里就不再贤述。
index.json文件：{"navigationBarBackgroundColor":"#000000","navigationBarTitleText":"九九乘法表","navigationBarTextStyle":"white","backgroundTextStyle":"dark"}。
