失眠网 > 《微信小程序商城界面设计实战》--学习笔记作业

《微信小程序商城界面设计实战》--学习笔记作业

时间：2020-08-12 14:38:43

一、学习笔记

1、注释：wxml文档注释：

css文档注释：/** **/

js文档注释：单行注释以“//”开头；多行注释以“/”开头，以“/”结束

json格式内部不允许有注释

2、flex:弹性收缩盒子。display:block.默认状态。display:flex.弹性收缩盒子支持纵向排列和横向排列。

3、js文档传递变量值和函数

二、作业

1、制作一个空白的小程序框架

<view class="container"><view class="userinfo"><button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button><block wx:else><image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block></view><view class="usermotto"><text class="user-motto">{{motto}}</text></view></view>/* index.css文档：*//**index.wxss**/.userinfo {display: flex;flex-direction: column;align-items: center;}.userinfo-avatar {width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%;}.userinfo-nickname {color: #aaa;}.usermotto {margin-top: 200px;}/** index.js */Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}})/* index.json文档：*/{"usingComponents": {}}

2、制作一个1行2列的产品列表

<view class="yh2l_nav"><view calss="yh2l_nav_lb"><image src="/images/小白菜.png" class="yh2l_nav_image"></image><text>小白菜</text></view><view calss="yh2l_nav_lb"><image src="/images/韭菜.png" class="yh2l_nav_image"></image><text>小白菜</text></view></view>/* index.css文档：.yh2l_nav*/{width:100%;height:180px;display:flex;flex-direction:row;text-align: center;}.yh2l_nav_lb{width:50%;height:180px;padding:60rpx;}.yh2l_nav_image{width:150px;height:150px;}text{font-size: 14px;}index.jsPage({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}})index.json文档：{"usingComponents": {}}

3、制作一个产品介绍的底部菜单：首页，收藏，购物车，加入购物车，立即购买

app.json配置文档：{"pages":["pages/shouye/index","pages/index/index","pages/logs/logs","pages/kuangjia/index","pages/yh2llieb/index","pages/shoucang/index","pages/gouwuche/index","pages/jiarugwc/index","pages/ljgm/index"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "web前端界面设计作业","navigationBarTextStyle":"black"},"tabBar": {"list": [{"pagePath": "pages/shouye/index","text": "首页","iconPath": "images/shouye.png","selectedIconPath": "images/shouyexz.png"},{"pagePath": "pages/shoucang/index","text": "收藏","iconPath": "images/shoucang.png","selectedIconPath": "images/shoucangxz.png"},{"pagePath": "pages/gouwuche/index","text": "购物车","iconPath": "images/gwc.png","selectedIconPath": "images/gwcxz.png"},{"pagePath": "pages/jiarugwc/index","text": "加入购物车","iconPath": "images/jrgwc.png","selectedIconPath": "images/jrgwcxz.png"},{"pagePath": "pages/ljgm/index","text": "立即购买","iconPath": "images/ljgm.png","selectedIconPath": "images/ljgmxz.png"}]}}`三、课程学习方式1、【《微信小程序商城界面设计实战》+/course/detail/9772+![海报]!![在这里插入图片描述](https://img-/0125121809102.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDMyNTcyMA==,size_16,color_FFFFFF,t_70)# 欢迎使用Markdown编辑器你好！这是你第一次使用 **Markdown编辑器** 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。## 新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：1. **全新的界面设计** ，将会带来全新的写作体验；2. 在创作中心设置你喜爱的代码高亮样式，Markdown **将代码片显示选择的高亮样式** 进行展示；3. 增加了 **图片拖拽** 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；4. 全新的 **KaTeX数学公式** 语法；5. 增加了支持**甘特图的mermaid语法[^1]** 功能；6. 增加了 **多屏幕编辑** Markdown文章功能；7. 增加了 **焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置** 等功能，功能按钮位于编辑区域与预览区域中间；8. 增加了 **检查列表** 功能。[^1]: [mermaid语法说明](https://mermaidjs.github.io/)## 功能快捷键撤销：<kbd>Ctrl/Command</kbd> + <kbd>Z</kbd>重做：<kbd>Ctrl/Command</kbd> + <kbd>Y</kbd>加粗：<kbd>Ctrl/Command</kbd> + <kbd>B</kbd>斜体：<kbd>Ctrl/Command</kbd> + <kbd>I</kbd>标题：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>H</kbd>无序列表：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>U</kbd>有序列表：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd>检查列表：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd>插入代码：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd>插入链接：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd>插入图片：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>G</kbd>## 合理的创建标题，有助于目录的生成直接输入1次<kbd>#</kbd>，并按下<kbd>space</kbd>后，将生成1级标题。输入2次<kbd>#</kbd>，并按下<kbd>space</kbd>后，将生成2级标题。以此类推，我们支持6级标题。有助于使用`TOC`语法后生成一个完美的目录。## 如何改变文本的样式*强调文本* _强调文本_**加粗文本** __加粗文本__==标记文本==~~删除文本~~> 引用文本H~2~O is是液体。2^10^ 运算结果是 1024.## 插入链接与图片链接: [link]().图片: ![Alt](/7/7/B/1_ralf_hx163com.jpg)带尺寸的图片: ![Alt](/7/7/B/1_ralf_hx163com.jpg =30x30)居中的图片: ![Alt](/7/7/B/1_ralf_hx163com.jpg#pic_center)居中并且带尺寸的图片: ![Alt](/7/7/B/1_ralf_hx163com.jpg#pic_center =30x30)当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。## 如何插入一段漂亮的代码片去[博客设置](/configure)页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 `代码片`.```javascript// An highlighted blockvar foo = 'bar';