# 小程序培训大纲 ## 安装开发环境,NodeJS,WebStorm,微信开发工具。 | 名称 | 版本 | 说明 | | --- | --- | --- | | WebStorm | 2018.1.3 | JavaScript即WEB前端开发工具 | | Nodejs | 7.7.1 | JavaScript运行环境,此处使用到它的包管理器npm | | 微信web开发者工具 | 1.02 | 微信官方提供,小程序调试工具 | >开发工具打包下载:[https://pan.baidu.com/s/1ojF\_aqKtf3ooQ15FNdtTJQ](https://pan.baidu.com/s/1ojF_aqKtf3ooQ15FNdtTJQ)密码:0wa5 ### 一、WebStorm安装 #### 1\. 安装 从网站下载WebStorm安装包,执行WebStorm-2018.1.3.exe,一路next。安装目录如下(例): ~~~ C:\Program Files\JetBrains\WebStorm 2018.1.3\ ~~~ ![输入图片说明](https://static.oschina.net/uploads/img/201805/11142928_unEv.png "在这里输入图片标题") #### 2\. 激活 启动WebStorm,在License弹窗中选择License Server,输入网址http://idea.codebeta.cn,点击Acitivate即可激活。![输入图片说明](https://static.oschina.net/uploads/img/201805/11142907_cTG6.png "在这里输入图片标题") ### 二、Nodejs安装 #### 1\. 安装Nodejs 安装node-v7.7.1-x64.msi,一路next,安装目录(例): ~~~ C:\Program Files\nodejs ~~~ ![输入图片说明](https://static.oschina.net/uploads/img/201805/11151131_jBQp.png "在这里输入图片标题") 打开CMD,输入命令node -v以及npm -v检测,显示版本信息说明安装成功。 我们要先配置npm的全局模块的存放路径以及cache的路径,例如我希望将以上两个文件夹放在NodeJS的主目录下,便在NodeJs下建立"node\_global"及"node\_cache"两个文件夹。 npm config set prefix "C:\\Program Files\\nodejs\\node\_global" 以及 npm config set cache "C:\\Program Files\\nodejs\\node\_cache" ![输入图片说明](https://static.oschina.net/uploads/img/201805/11151508_mQQf.png "在这里输入图片标题") #### 2\. 环境变量配置 在\[系统变量\]中,设置 NODE\_PATH ,新建 NODE\_PATH ,值为(例) ~~~ C:\Program Files\nodejs\node_global\node_modules ~~~ ![](https://static.oschina.net/uploads/img/201805/11151835_utlu.png) 在\[用户变量\]中,修改用户变量中的path,添加(例) ~~~ C:\Program Files\nodejs\node_global\ ~~~ ![输入图片说明](https://static.oschina.net/uploads/img/201805/11152033_8BW8.png "在这里输入图片标题") #### 3\. 安装cnpm 安装淘宝的镜像cnpm,打开cmd,在命令行中输入 ~~~ npm install -g cnpm --registry=https://registry.npm.taobao.org ~~~ ![输入图片说明](https://static.oschina.net/uploads/img/201805/11152647_7fG2.png "在这里输入图片标题") 打开cmd,输入命令cnpm -v来查看cnpm安装的版本和结果,提示如下即为成功。![输入图片说明](https://static.oschina.net/uploads/img/201805/11152808_rCxp.png "在这里输入图片标题") ### 三、微信web开发者工具安装 #### 1\. 下载安装包 从微信小程序官方下载安装文件,此处选择windows 64版本。 ~~~ https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=2018510 ~~~ #### 2\. 安装 执行wechat\_devtools\_1.02.1803210\_x64.exe,一路next。 ![输入图片说明](https://static.oschina.net/uploads/img/201805/11163033_y1xr.png "在这里输入图片标题") #### 3.在webstorm命令行安装(更新)wepy命令行工具,安装npm依赖包。 打开webstorm命令行工具Terminal,在里输入下面命令: ~~~ npm install wepy-cli –g npm install ~~~ #### 4\. 测试环境是否正确,打开demo,在微信开发工具打开进行调试。 ~~~ 1、打开微信web开发者工具。启动后微信web开发者工具,扫码登录开发工具,选择“小程序调试”。 2、新建项目,项目目录选择工程目录的dist目录。输入需要调试小程序的AppID。 3、调试前需要将开发者的微信ID加入到小程序开发者白名单中。 4、微信开发者工具-->项目-->关闭ES6转ES5。 重要:漏掉此项会运行报错。 5、微信开发者工具-->项目-->关闭上传代码时样式自动补全。 重要:某些情况下漏掉此项也会运行报错。 6、微信开发者工具-->项目-->关闭代码压缩上传。 重要:开启后,会导致真机computed, props.sync 等等属性失效。 ~~~ ### 查看小程序开发文档 ~~~ 文档地址:http://mp.weixin.qq.com/debug/wxadoc/dev/ 重点: 1.app.json(是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。) 2.project.config.json(开发者工具配置,可配置个性化配置信息。) 3.模板:WXML(HTML)、WXSS(CSS)、JS。(详细介绍见文档。) 4.组件、标签。标签的写法与HTML标签有区别,组件类似JAVA写的自定义标签。 5.目录结构,每个页面都写在单独的文件,每个文件下对应4个文件,名字与文件夹名相同,配置会自动找到。 6.数据绑定:原生小程序通过Page提供的setData方法来绑定数据。 ~~~ ### 查看wepy开发文档 ~~~ 文档地址:https://tencent.github.io/wepy/ 重点: 1.文件后缀为wpy(组件,页面都是一样的,继承不同)。 2.目录结构:组件放在components文件夹下(组件不属于完整页面,仅供完整页面或其他组件引用)。页面放在Pages下(属于完整页面)。 3.页面中包含三大模块,<template>(对应于原生的.wxml文件)、<script>、<style>(对应于原生的.wxss文件) 4.开发模式转换:WePY框架在开发过程中参考了Vue等现有框架的一些语法风格和功能特性,对原生小程序的开发模式进行了再次封装,更贴近于MVVM架构模式。 5.入口文件:app.wpy(入口文件app.wpy中所声明的小程序实例继承自wepy.app类,包含一个config属性和其它全局属性、方法、事件。) 6.数据绑定:不需要写setData方法,可以直接赋值。 7.参数传递:wepy.request("XXX")可用于请求后台数据,需要写async/await。 ~~~ ### 用wepy命令创建一个新的项目。 ~~~ 使用wepy-cli创建项目,1.7.0之后版本创建步骤如下: wepy init standard my-project 输入项目名、描述、作者、appId、esLint(检测代码)、redux(状态管理)、web transform feature(在项目中使用Web转换功能) ~~~ ![输入图片说明](https://static.oschina.net/uploads/img/201805/13095212_oebn.png "wepy-cli") ## 编写小程序 #### 一. Hello World 1. 首先在项目中src->pages目录中新建一个wpy文件,例如:list.wpy。目录中默认会有一个index.wpy文件,这里我们用新的文件来编写。 2. 创建普通list.wpy文件,打开后可以看到分三个模块,分别是`<template><script><style>`。如果创建的是文本格式,将下面代码复制到文件中。 ~~~ <script> import wepy from 'wepy'; export default class ListTest extends wepy.page { config = {}; components = {}; data = {}; methods = {}; events = {}; onLoad() {}; } </script> <template lang="wxml"> </template> <style lang="less"> </style> ~~~ 重点: class 后面为类名,驼峰命名,不能取关键词,否则项目运行失败。继承 wepy.page 3. 现在开始编写动态数据绑定,可在页面上展示Hello World!首先我们在data中定义一个参数为message,在后面写参数,写法为: ~~~ data = { message : 'hello world' }; ~~~ 4. 定义好了参数,要在页面上展示就要写在`<template>`模块中,我们在标签中再写一个`<view>`标签用来展示数据。 ~~~ <view class="hello"> {{message}} </view> ~~~ 在`<view>`标签中我定义了一个class为'hello',可以在`<style>`模块中定义样式,写法跟css一样。 ~~~ .hello { text-align: center; height : 40px; } ~~~ 5. 写完hello world还要修改一下配置文件,找到app.wpy文件,找到config属性里的pages,把默认的页面修改为刚创建的文件,无需写后缀。 ~~~ pages: [ 'pages/list' ] ~~~ 6. 配置好页面后打开Terminal命令窗口输入 wepy build --watch 来运行项目。成功后打开微信开发工具配置到dist目录下就可以看到hello world。 ![输入图片说明](https://static.oschina.net/uploads/img/201805/10103400_QUo9.png "hello world") #### 二. 循环列表 1. 循环列表为请求后台,返回数据展示在页面上。后台编写一个返回数据接口,代码为: Controller为:@RequestMapping("/api/test")![输入图片说明](https://static.oschina.net/uploads/img/201805/10104223_XDA2.png "ListMap数据集合") 2. 在前端data中我们定义一个array的数组 ~~~ data = { array:[] }; ~~~ 3. 在这里我们定义一个按钮,点击按钮请求后台返回数据。在`<template>`模板中编写下面代码: ~~~ <view class="array"> <button @tap="getArray()">显示LIST列表</button> </view> ~~~ 4. button上有一个getArray()方法,我们要在`<script>`模板中找到method代码块,在其中编写一个getArray()的方法。 ~~~ getArray: async function () { await wepy.request('http://localhost:8080/P3-Web/api/test/list.do').then((d) => this.array=d.data.list); this.$apply(); } ~~~ 重点:要在function前面写async表示异步,在请求前面编写 await(等待),最后写一句 this.$apply();语句可以实现动态绑定数据。 5. 返回的数据已经赋值到array参数上,这时候来遍历array,在`<template>`模板上写下面代码: ~~~ <repeat for="{{array}}" key="index" index="index" item="item"> <view> ID:{{ item.id }}----Name:{{ item.name}}----Age:{{ item.age }} </view> </repeat> ~~~ 6. 编写完代码去微信开发工具上查看是否正确。点击按钮,下方出现数据。这就完成了循环列表! ![输入图片说明](https://static.oschina.net/uploads/img/201805/10105846_K8fg.png "array列表") #### 三. 跳转页面 1. 首先我们在pages下创建一个新的wpy文件,命名为newPage.wpy,在里面写了一个hello world。 2. 去app.wpy文件中找到pages添加newPage属性: ~~~ pages: [ 'pages/list', 'pages/newPage' ] ~~~ 重点: pages数组中是有先后顺序的,第一个为首页。 3. 在list.wpy文件中写一个按钮用来跳转页面,定义了toNewPage方法。 ~~~ <button @tap="toNewPage">跳转页面!</button> ~~~ 4. 在method方法中添加一个toNewPage的方法。 ~~~ toNewPage : function() { wx.navigateTo({ url: 'newPage' }); } ~~~ 5. 编写完成后打开微信开发工具点击页面上的跳转页面按钮,看是否能跳转成功。 ![输入图片说明](https://static.oschina.net/uploads/img/201805/10110726_EnFb.png "toNewPage") ![输入图片说明](https://static.oschina.net/uploads/img/201805/10110805_aGY7.png "NewPage") #### 四. 自定义组件 1. 定义一个列表循环组件,我们在src目录下找到components文件夹,在这个文件夹下创建一个名叫say.wpy的文件。 2. 在文件里面编写如下代码: ~~~ <template lang="wxml"> </template> <script> import wepy from 'wepy'; export default class Say extends wepy.component { components = {}; data = {}; methods = {}; events = {}; } </script> <style lang="less"> </style> ~~~ 重点:class后面的名字。继承需改为 wepy.component,这样就认为这个类为组件。 3. 在`<template>`模板中我们先写任意值,看组件是否定义成功。 4. 在list.wpy文件中找到`<script>`模板,在里面引用我们刚写好的组件。 ~~~ import Say from '../components/say'; ~~~ 5. 在components属性中我们需要声明组件。需要注意的是,WePY中的组件都是静态组件,是以组件ID作为唯一标识的,每一个ID都对应一个组件实例,当页面引入两个相同ID的组件时,这两个组件共用同一个实例与数据,当其中一个组件数据变化时,另外一个也会一起变化。 ~~~ components = { say: Say }; ~~~ 6. 声明好了组件我们就可以用标签的写法来调用,可直接在`<template>`模块中写`<say>`就可以显示我们在组件中`<template>`中写的内容。 ~~~ <say></say> ~~~ 例: 我在say组件中写一个hello world,在list页面上就可以展示。 ![](https://static.oschina.net/uploads/img/201805/10112557_iOO0.png) #### 五. 高级篇-跳转带参数 1. 跳转页面通过URL传参数,只要在连接的后面拼'?'问号,参数名=值。如果有多个值就用'&&' ~~~ toNewPage : function() { wx.navigateTo({ url: 'newPage?title=hello world&&age=18' }); } ~~~ 2. 我们到newPage页面上拿到传过来的参数,通过onLoad()方法。需要在方法中写一个参数为options,这个options就是传过来的参数。在方法中通过用options.参数名来获取值。 ~~~ onLoad (options) { console.log(options.title); console.log(options.age); } ~~~ 3. 打开微信开发工具跳转页面看在页面控制台上是否打印了两个值。 ![输入图片说明](https://static.oschina.net/uploads/img/201805/10113347_5qp8.png "跳转页面传参") 这样就表示参数传递成功。 #### 六. 高级篇-组件传参 1. 用之前的Say组件来传参,把循环列表的值用`<say>`标签打印出来。 2. 在遍历array方法中,把item传到say中,用':item'传递值。 ~~~ <repeat for="{{array}}" key="index" index="index" item="item"> <say :item="item"></say> </repeat> ~~~ 3. 在say.wpy文件中的`<template>`模板中写下面代码: ~~~ <template lang="wxml"> <view> ID:{{ item.id }}----Name:{{ item.name}}----Age:{{ item.age }} </view> </template> ~~~ 4. 这样就可以实现组件参数传递,在页面上查看值是否打印正确。 ![输入图片说明](https://static.oschina.net/uploads/img/201805/10114405_PtsB.png "在这里输入图片标题") ## eslint校验。 ~~~ ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。 可以将eslint关闭,不然页面会出现很多错误,但是不影响程序使用。 ~~~ ## 写一个网站文章列表。 ### 1.文章首页 文章首页分三部分,顶部为轮播图,中间部分为栏目、文章,最后为底部按钮。 ### 一.顶部轮播图。 ~~~ 1.在pages下新建一个index.wpy文件,记得要改class文件后面的名字。继承wepy.page。 2.修改app.wpy文件,在config->pages中添加index文件。'pages/index' 3.图片先用上传的图片显示,在src下创建一个img的文件目录,在里面放几张图片,然后在index.wpy文件中创建一个数组,把图片的信息写上,然后用`<swiper>`标签来遍历。 ~~~ 代码展示: ~~~ <script> import wepy from 'wepy'; import Tab from '../components/tab'; export default class Index extends wepy.page { config = { "navigationBarTitleText": '小程序', "backgroundTextStyle":'light', "navigationBarBackgroundColor": '#fff', "navigationBarTextStyle":'black' }; components = { tab : Tab }; data = { imgUrls:[ '../img/1.jpg', '../img/2.jpg', '../img/3.jpg', '../img/4.jpg', '../img/5.jpg' ] }; methods = {}; events = {}; onLoad() {}; } </script> <template lang="wxml"> <swiper style="height:400rpx" indicator-dots=true autoplay=true interval=2000 duration=500 circular=true > <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" style="width:100%;height:400rpx"/> </swiper-item> </block> </swiper> <tab></tab> </template> <style lang="less"> </style> ~~~ ~~~ swiper参数参考文档:https://blog.csdn.net/kingov/article/details/78452167 ~~~ 效果展示: ![输入图片说明](https://static.oschina.net/uploads/img/201805/13144458_h7Vv.png "swiper") ### 二.文章栏目,内容 ~~~ 1.文章栏目采用自定义组件的方式编写。在components目录下新建tab.wpy,继承wepy.component。 2.定义参数menu,编写onLoad方法(首次加载),请求后台,返回栏目数据,遍历栏目数据。 3.利用样式控制栏目,可以写动态的样式,在props中定义参数active,写一个更改栏目的方法,把栏目Id传给方法,在样式中写&.active定义颜色。 4.栏目更换的时候要请求后台,把对应的数据返回到列表上。定义一个array的数组,用来接收传回来的对象。 5.遍历array方法,添加样式。 ~~~ 代码展示: ~~~ <template lang="wxml"> <view class="tab"> <repeat for="{{menu}}" key="index" index="index" item="item"> <view class="tab_item{{active == item.id ? ' active' : ''}}" @tap="changePage({{item.id}})"><text class="title">{{item.name}}</text></view> </repeat> </view> <view style="margin-top:8px;"> <repeat for="{{array}}" key="index" index="index" item="item"> <view class="news-item" @tap="toArticlesContent({{item.id}})"> <view class="news-item-left"> <text class="news-item-title">{{item.title}}</text> </view> <view class="news-item-right"> <image class="news-image" style="width:73px;height:73px;" src="{{item.imageHref}}"></image> </view> </view> </repeat> </view> </template> <script> import wepy from 'wepy'; export default class Tab extends wepy.component { components = {}; props = { active: { twoWay: true } }; data = { array : [], menu : [] }; methods = { changePage:async function(coulmnId) { this.active = coulmnId; await wepy.request('http://localhost/jeecg-p3-web/api/cms/articles.do?coulmnId='+coulmnId).then((d) => this.array = d.data.obj.list.results); this.$apply(); }, toArticlesContent(articlesId){ wx.navigateTo({ url: 'articlesInfo?articlesId='+articlesId }); } }; events = {}; async onLoad(){ await wepy.request('http://localhost/jeecg-p3-web/api/cms/menu.do').then((d) => this.menu=d.data); this.$apply(); } } </script> <style lang="less"> .tab { color: #7b7b7b; height: 45px; width: 100%; border-top: 1px solid #dad9d6; background-color: #f7f7f7; font-size: 14px; white-space: nowrap; .tab_item { &.active { color: #13b113; height: 30px; } display: inline-block; width: 20%; text-align: center; } .title { padding-top: 10px; display: block; } } .news-item-container { background-color: #f2f2f2; width: 100%; padding-left: 8px; padding-right: 8px; } .news-item { display: flex; flex-direction: row; justify-content: space-between; padding-left: 8px; padding-top: 8px; padding-right: 8px; padding-bottom: 8px; margin-left: 8px; margin-right: 8px; margin-top: 8px; background-color: #fff; border: 1px solid #eaeaea; border-bottom: 1px solid #d0d0d0; border-radius: 5px; } .news-item-right{ width: 80px; height: 80px; } .news-image{ width: 80px; height: 80px; } .news-item-title{ font-size: 16px; } </style> ~~~ 以上为自定义组件内的内容,我们还要在首页引用组件。 ~~~ 1.首先在index页面中导入tab.wpy文件,用import: ~~~ ~~~ import Tab from '../components/tab'; ~~~ 此处Tab为定义组件名字 2.在components中添加声明: ~~~ components = { tab : Tab }; ~~~ ~~~ 这样我们就可以使用<tab>标签。 3.把<tab>写在轮播图标签的下面。 ~~~ 效果展示: ![输入图片说明](https://static.oschina.net/uploads/img/201805/13150541_YLq8.png "index") ### 详细页面 显示了文章信息,我们还要实现点击文章,显示文章的内容。 1.在pages目录下新建articlesInfo.wpy文件,用来展示文章详细信息。 2.在app.wpy中pages中添加'pages/articlesInfo'。 3.在tab组件中文章信息上添加跳转方法,把articlesId传给方法,跳到详细页面的时候请求后台返回对象。 4.在articlesInfo.wpy文件onLoad方法中接收articlesId,请求后台数据把接收到的数据赋值给articles数组。 5.最后用articles.属性名获取对象信息。 代码如下: ~~~ <script> import wepy from 'wepy'; export default class ArticlesInfo extends wepy.page { config = { "navigationBarTitleText": '详细页面' }; components = {}; data = { articles : [] }; methods = {}; events = {}; async onLoad (options) { var articlesId = options.articlesId; await wepy.request('http://localhost/jeecg-p3-web/api/cms/queryOneArticles.do?articlesId='+articlesId).then((d) => this.articles = d.data.obj); this.$apply(); } } </script> <template lang="wxml"> <view class="art-header"> <image class="art-img" src="{{articles.imageHref}}"></image> <view class="art-title">{{articles.title}}</view> </view> <rich-text class="art-content" nodes="{{articles.content}}" ></rich-text> </template> <style lang="less"> .art-header{ position: relative; width: 100%; height: 219px; color: #FFF; } .art-img{ width: 100%; height: 219px; } .art-title{ position: absolute; bottom: 36px; left: 8px; font-size: 16px; } .art-source { position: absolute; bottom: 8px; font-size: 14px; right: 8px; } .art-content{ font-size: 14px; color: #616466; padding-left: 16px; padding-right: 16px; padding-top: 10px; background-color: #FFF; line-height: 1.5; } </style> ~~~ 效果展示: ![输入图片说明](https://static.oschina.net/uploads/img/201805/13154425_uo3n.png "在这里输入图片标题") 重点:富文本里会原生html标签,wepy的`<text>`不认识。在这里要用`<rich-text>`标签,把值添加到nodes属性中。 ~~~ <rich-text class="art-content" nodes="{{articles.content}}" ></rich-text> ~~~ ### 三.底部按钮 ~~~ 1.顶部按钮需要在app.wpy中定义tabBar属性。 2.关键为tabBar中的list属性,用来定义按钮的颜色,图片,文字,跳转页面。 3.在img中放入对应的选中与补选中的图片。 4.新建一个theme.wpy文件,用于显示“专题栏目”的内容。 5.在app.wpy的pages属性中添加'pages/theme'。 ~~~ 代码展示: ~~~ tabBar: { color: '#353535', selectedColor: '#3cc51f', borderStyle: 'white', backgroundColor: '#ffffff', list: [{ pagePath: 'pages/index', iconPath: 'img/icon_API.png', selectedIconPath: 'img/icon_API_HL.png', text: '主页' }, { pagePath: 'pages/theme', iconPath: 'img/icon_component.png', selectedIconPath: 'img/icon_component_HL.png', text: '专题栏目' }] } ~~~ 效果展示: ![输入图片说明](https://static.oschina.net/uploads/img/201805/13154333_1iZu.png "在这里输入图片标题") 以上就是首页的所有代码。 ### 2.专题栏目 ~~~ 1.专题栏目展示的是栏目详细列表,显示图片,详细描述。 2.在页面上onLoad的方法中请求栏目数据,把值返回给menu数组,遍历数组,添加样式。 3.需要点击栏目跳转详细信息页面,绑定一个跳转方法,把文章Id传给详细页面。 ~~~ 代码如下: ~~~ <script> import wepy from 'wepy'; export default class Theme extends wepy.page { config = { "navigationBarTitleText": '专题栏目', "backgroundTextStyle":'light', "navigationBarBackgroundColor": '#fff', "navigationBarTextStyle":'black' }; components = {}; data = { menu : [] }; methods = { toArticlesPage(columnId){ wx.navigateTo({ url: 'atricles?columnId='+columnId }); } }; events = {}; async onLoad() { await wepy.request('http://localhost/jeecg-p3-web/api/cms/menu.do').then((d) => this.menu=d.data); this.$apply(); }; } </script> <template lang="wxml"> <view class="container"> <repeat for="{{menu}}" key="index" index="index" item="item"> <view class="card" @tap="toArticlesPage({{item.id}})"> <image class="card-image" src="{{item.imageHref}}"></image> <view class="card-content"> <view><text class="card-title">{{item.name}}</text></view> <view><text class="card-desc">{{item.describe}}</text></view> </view> </view> </repeat> </view> </template> <style lang="less"> .card { width: 100%; margin-top: 8px; margin-bottom: 8px; background-color: #FFF; } .card-image{ width: 100%; height: 168px; } .card-content{ padding-left: 16px; padding-right: 16px; padding-bottom: 10px; } .card-title{ font-size: 16px; line-height: 1.6; } .card-desc { font-size: 14px; } </style> ~~~ 效果如下: ![输入图片说明](https://static.oschina.net/uploads/img/201805/13155409_A9wg.png "在这里输入图片标题") ## 安装SVN,提交项目。 ~~~ 网页地址: https://blog.csdn.net/hysh_keystone/article/details/52013789 ~~~