前言您需要在本地安装微信开发者工具，初始化考研小程序项目，了解项目目录结构和配置文件。因为本项目的技术栈是基于WXML、WXSS、JavaScript、ES2015+、微信原生API和云开发等，所以需要提前了解和学习这些知识，对小程序的实战有帮助学习考研或直接使用本项目的程序云开发。它有很大帮助。一、模板语法1.1、视图标签和文本标签我们现在在做一个微信小程序，所以需要用到它的语法。WXML（WeiXinMarkupLanguage）是微信小程序框架设计的一套标签语言。注意！不要被官方很官方的概念给骗了，其实就是一个简单的标签。不信我们打个栗子比喻。相信大部分小伙伴，甚至是没做过开发的小伙伴，都听说过html的div和span。div=>viewspan=>textview其实就相当于div，都是块级元素，也就是会换行；text相当于span，都是内联元素，即不会换行。自己试一下，直接在index.wxml中使用这两个标签就可以理解了。马远毛中特四修近代史什么？还是一头雾水？这么看！奶妈级demo，“view是块级元素，会换行；text是内联元素，不会换行”这句话你懂吗？也许我以后不会说了，因为太基础了。简单的事情，只说一遍。看不懂也没关系，就像公式一样，不需要知道它是怎么来的，只需要记住公式是怎么用的就可以了。毕竟我们做的是应用级的开发。它提供什么API，知道怎么用，然后直接用就行了。如果能举一反三就更好了。1.2.数据绑定在js的数据中定义变量：data:{title:"考研题库小程序",num:50,isLogin:true,user:{nickName:"姑苏落雁",age:20},isChecked:true}直接在wxml中使用：{{title}}{{num}}}{{isLogin?'您好，xx会员':'请授权登录'}}{{user.nickName}}请先登录Nickname:{{user.nickName}},age{{user.age}}了解更多其他一些基本操作。{{a+b}}隐藏5}}">今天的问答挑战成功今天的问答挑战失败1.3。列表渲染列表渲染，其实就是我们所说的数组循环。列表渲染，关键字：wx:forwx:for-itemwx:for-indexwx:keywx:for="{{list1}}"wx:for-item="循环项名称"=>wx:for-item="item"wx:for-index="indexitemname"=>wx:for-index="index""loopitemname"default="item""indexitemname"default="index"有两个值类型：1）循环数组对象时，list1:[{id:'1',name:'马元'},{id:'2',name:'毛中特'},{id:'3',name:'四秀'},{id:'4',name:'近代史'}]wx:key="id"=>item.id2)当数组为普通数组时，list1:['马元','毛中特','四秀','近代史']wx:key="*this"index.jsPage({data:{//普通数组list1:['马原','毛中特','四秀','近代史'],//对象数组循环list2:[{id:'1',name:'马原'},{id:'2',name:'毛仲特'},{id:'3',name:'四秀'},{id:'4',name:'近代史'}]}})index.wxml普通数组{{index}}---{{item}}========================对象数组{{index}}:{{item.名称}}--{{item.id}}1.4、条件渲染1）wx:ifif,else,elseif对应微信小程序wx:if,wx:else,wx:elif5}}">12}}">232）hidden直接在标签中添加属性hidden3）在什么场景下使用哪一个？当标签不经常切换显示时，优先使用wx:if直接从页面结构中移除标签；标签频繁切换显示时，优先使用hidden通过添加样式来切换显示1.5、事件绑定1）通过bindtap+事件名绑定事件；2）定义事件的回调需要和js文件、数据放在同一层级。.wxml{{num}}.jsPage({data:{num:0},//声明回调handleTap(){letnum=this.data.num;num++;this.setData({num})}})2.StyleWXSSWXSS（WeiXinStyleSheets）是一套用于描述WXML组件样式的样式语言。与CSS相比，WXSS扩展的特点是：responsivelengthunitrpxstyleimport2.1，app.wxssapp.wxss是默认的全局样式。这里写全局样式的代码：page{background-color:aqua;}page标签是页面最外层的标签。2.2.其他样式1）wxss不支持通配符*当我们要实现如下功能时，*{margin:0;填充：0；框大小：边框框；}只能一一定义个别标签！！！页面、视图、文本{边距：0；填充：0；框大小：边框框；}2.3、小程序中的unitrpx功能类似于之前移动端web中的rem，rpx（responsivepixel）：可以根据屏幕宽度自适应。指定的屏幕宽度为750rpx。1）不管屏幕多宽，都是750rpx；2）无论手机屏幕多宽，都是100%；2.4、样式导入@import"../../styles/common.wxss";通过@Import导入，使用的是相对路径。
