《全栈式微信小程序云开发实战（第2版微课版）》实验指导

全栈式微信小程序云开发实战孙芳梁大业林彬主编实验指导人民邮电出版社北京

目录TOC\o"1-2"\h\u5565一、入门实验 230176实验1.微信小程序注册 213236实验2.微信小程序开发者工具安装 37023实验3.入门级云开发小程序 33277二、小程序基础实验 523154实验1.JSON配置文件 531220实验2.数据绑定及运算 730988实验3.事件及列表渲染 815902三、小程序组件/API实验 922093实验1.view组件 93134实验2.swiper组件 114317实验3.button组件 1227100实验4.radio组件和checkbox组件 1323478实验5.picker组件 1415187实验6.image组件 1514829实验7.input组件 1528412实验8.地图组件、位置API 1624997实验9.导航组件 189948实验10.video组件、videoAPI 1818323实验11.自定义组件 2031880四、新闻列表小程序实现 208137五、综合实例--果茶店小程序实现 20

一、入门实验（参照教材第2章）实验1.微信小程序注册实验目的：掌握微信小程序的注册注册网址：微信公众平台/注册步骤：单击“立即注册”。选择小程序选项，进入小程序账号信息注册页面。正确填写邮箱、密码、验证码信息后单击“注册”按钮。注册成功后进入到微信小程序管理后台进行基本信息补充。注意事项：每个邮箱仅能申请一个小程序，一个身份证只能注册5个小程序。实验2.微信小程序开发者工具安装实验目的：掌握微信小程序开发者工具的安装工具下载网址：/miniprogram/dev/devtools/download.html下载步骤：下载Windows64版本。单击“下一步”按钮，到最后一步单击“完成”按钮。使用微信扫描二维码的方式进行身份验证及登录。注意事项：需要根据操作系统的类型和版本选择相应的开发者工具版本下载。实验3.入门级云开发小程序实验目的：掌握新建云开发小程序的简单流程实验目标：基于云开发创建一个获取用户信息（openId）的小程序实验步骤：登录微信小程序开发者工具，新建小程序。获取AppID微信公众平台（/）主页：开通云开发创建新的云函数并上传部署创建编辑页面、调用云函数及相关编程，体验小程序保存编译预览页面，完成整个小程序。（代码参见第二章教材及源码）查看控制台小程序基础实验（参照教材第3章）实验1.JSON配置文件实验目的：掌握小程序JSON文件的配置方法实验目标：对新建的小程序进行配置实验步骤：1.在app.json文件中新建两个页面文件index和my。

"pages":[

"pages/index/index",

"pages/my/my"

],在app.json文件中将导航栏的背景颜色修改为蓝色（#1296bd），将导航栏标题修改为“主页”，字体颜色设置成白色。

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor":

"#1296bb",

"navigationBarTitleText":

"主页",

"navigationBarTextStyle":"white"

},3.配置小程序的tabBar。

"tabBar":

{

"color":

"#000000",

"selectedColor":

"#1296bd",

"backgroundColor":

"#ffffff",

"list":

[

{

"pagePath":

"pages/index/index",

"text":

"主页",

"iconPath":"/pages/images/index.png",

"selectedIconPath":

"/pages/images/indexSelected.png"

},

{

"pagePath":

"pages/my/my",

"text":

"我的",

"iconPath":

"/pages/images/my.png",

"selectedIconPath":

"/pages/images/mySelected.png"

}

]

},4.在my.json中对这一页进行配置，将导航栏背景颜色设置成黑色（#000），将导航栏标题修改为“我的”，字体颜色设置成白色。注意事项：tabBar中的icon图标尽量不要用中文命名。注意逗号的使用。实验2.数据绑定及运算实验目的：掌握小程序中数据绑定的方法实验目标：绑定数据并进行计算实验步骤：1.在js文件中的data中定义hello、a、b的值。

data:

{

hello:'小程序！',

a:10,

b:20,

}2.在wxml文件中，利用Mustache语法{{}}将变量包裹起来，将变量的真值显示。<view>hello</view><view>{{hello}}</view><view>hello！{{hello}}</view><view>a</view><view>{{a}}</view><view>{{b}}</view><view>{{a+b}}</view><view>a+b</view>注意事项：1.在{{}}中可以进行一些简单的运算如三元运算、算术运算等。2.定义变量时，变量名应避免与关键字、预留关键字相同。实验3.事件及列表渲染实验目的：掌握小程序中的事件绑定及列表渲染的方法实验目标：对小程序中的事件进行绑定、渲染列表数据实验步骤：1.在js文件中定义变量。

data:

{

con:[1,2,3],a:10}2.在wxml文件中的一个view组件上通过bindtap绑定事件，“add”是事件名称。<view

class="vie"

bindtap="add">+1</view>3.在wxss文件中修改view组件的样式。.vie{

background-color:

cornflowerblue;

margin-top:

100rpx;

width:

100rpx;

text-align:

center;

border-radius:

15rpx;}4.在js文件中实现点击事件后a的值加1的功能。add:function(){

this.setData({

a:this.data.a+1

})

},5.在wxml中利用wx:if和wx:for将变量显示出来（如果a的值大于11，循环显示con数组中的值，否则不显示）。<view

wx:if="{{a>11}}">

<view

wx:for="{{con}}"

wx:key="index">

<view>{{item}}</view>

</view></view>注意事项：1.使用wx:for时需要和wx:key一起使用。2.小程序可以利用this.setData来进行全局赋值。三、小程序组件/API实验（参照教材第4章）实验1.view组件实验目的：理解flex布局，掌握view组件的使用方法实验目标：通过view组件完成flex布局实验步骤：1.在wxml文件中利用view组件进行布局。<view>一行三列布局</view><view

class="flex-wrp"><view

class="first

flex-grow"

>1</view><view

class="second

flex-grow">2</view><view

class="third1

flex-grow">3</view></view><view>左右混合布局</view><view

class="flex-wrp"

style="height:400rpx">

<view

class="first"

style="width:200rpx;height:400rpx;">1</view>

<view

style="flex-direction:colum;flex-grow:1">

<view

class="second"

style="height:200rpx;

width:400rpx">2</view>

<view

style="display:flex">

<view

class="third

flex-grow">3</view>

<view

class="fourth

flex-grow">4</view>

</view></view></view>2.在wxss文件中修改样式。.flex-wrp{

display:

flex;}.flex-wrp{

flex-grow:

1;}注意事项：任何一种复杂的布局都可以通过嵌套view组件、设置相应的class属性来展示。实验2.swiper组件实验目的：掌握swiper组件的使用方法实验目标：利用swiper组件实现三个数字的自动轮播实验步骤：1.在wxml文件中创建一个swiper组件，其中包含三个swiper-item，设置相关属性。<swiperautoplay="true"interval="2000"duration="500"><swiper-item></swiper-item><swiper-item></swiper-item><swiper-item></swiper-item></swiper>2.在每个swiper-item中添加一个view组件，包裹着轮播的内容以及相关样式。<swiperindicator-dots="true"autoplay="true"interval="2000"duration="500"><swiper-item><viewclass="sw1">1</view></swiper-item><swiper-item><viewclass="sw2">2</view></swiper-item><swiper-item><viewclass="sw3">3</view></swiper-item></swiper>3.在wxss文件中写样式。.sw1{background-color:pink;height:400rpx;text-align:center;font-size:40rpx;}注意事项：1.轮播可以通过wx:for来实现，操作更加简便。2.可以在swiper-item中包裹image组件，即可实现图片轮播。实验3.button组件实验目的：掌握button组件的使用方法实验目标：创建一个默认尺寸绿色按钮，点击输出用户信息实验步骤：在wxml页面创建一个button按钮<button>点击获取用户信息</button>设置属性：默认尺寸、绿色<buttonsize=”default”type=”warn”>点击获取用户信息</button>通过open-type开放能力中的getUserInfo属性，从bindgetuserinfo的回调中获取用户信息<buttonsize="default"type="primary"open-type="getUserInfo"bindgetuserinfo="onGotUserInfo">点击获取用户信息</button>在js文件中定义onGotUserInfo函数，将用户信息输出到控制台onGotUserInfo:function(e){console.log(e.detail.userInfo)}注意事项：小程序利用console.log输出信息到控制台。实验4.radio组件和checkbox组件实验目的：掌握radio、checkbox组件的使用方法。实验目标：创建一个单选框和一个多选框，将选中的选项输出实验步骤：在js文件中添加一个对象数组items。

items:[

{value:'橙子'},

{value:'芒果'},

{value:'火龙果'}

],在wxml文件中创建一个radio-group和一个checkbox-group，定义bindchange函数，利用wx:for和插值表达式显示items中的值。<radio-groupbindchange="radioChange">

<label

wx:for="{{items}}"

wx:key="{{items.value}}">

<radio

value="{{item.value}}"

>{{item.value}}</radio>

</label></radio-group><checkbox-groupbindchange=”checkboxChange”>

<label

wx:for="{{items}}"

wx:key="{{items.value}}">

<checkbox

value="{{item.value}}"

>{{item.value}}</checkbox>

</label></checkbox-group>在js文件中获取选中选项的信息并打印。

radioChange(e){

console.log(e.detail.value)

},

checkboxChange(e){

console.log(e.detail.value)

},注意事项：radio-group（checkbox-group）组件不能单独使用，需要包含一组radio（checkbox）组件，这样才能形成一组单（多）选框组件。实验5.picker组件实验目的：掌握picker组件的使用方法实验目标：创建一个2020年1月1日到2022年1月1日的日期选择器并将选择的日期显示在页面中实验步骤：1.在wxml文件中创建一个picker日期选择器，设置起止日期，声明bindchange事件。<picker

mode="date"

value="{{date}}"

start="2020-01-01"

end="2022-01-01"

bindchange="bindDateChange">

<view>当前选择：{{date}}</view></picker>2.在js文件中定义变量date，在bindDateChange函数中给date赋值。

bindDateChange:function(e){

this.setData({

date:e.detail.value

})

},注意事项：函数的参数e中包含很多内容，可以打印e选择需要的内容。实验6.image组件实验目的：掌握image组件的使用方法实验目标：设置宽度300rpx，保持原图宽高比例不变，图片完全显示实验步骤：创建images文件夹用来存放图片，将上图保存到images中。在wxml文件中创建image组件，设置路径信息和mode属性。<imagesrc="../images/test.png"mode="widthFix"></image>在wxss文件中设置图片宽度。image{width:300rpx;}注意事项：图片过多过大会导致小程序体积太大不能打包预览，可将图片存储到小程序云存储中，通过云路径使用图片。注意尽量不要使用中文命名图片。实验7.input组件实验目的：掌握input组件的使用方法实验目标：向input组件中输入信息并打印实验步骤：在wxml文件中创建一个input组件，设置password、placeholder，定义bindinput函数。<inputpassword="true"placeholder="请输入密码"bindinput="inputValue"/>在js文件中完成inputValue函数。

inputValue:function(e){

console.log(e.detail.value)

}在wxss文件中修改input框的样式。input{

border:

1rpx

solid

cornflowerblue;

border-radius:

10rpx;

width:

400rpx;

margin:

0

auto;

padding-left:

10rpx;}注意事项：向input输入框中输入内容时，输入的信息保存在e.detail.value中。实验8.地图组件、位置API实验目的：掌握地图组件、位置API的使用方法实验目标：通过地图组件和位置API获取当前位置实验步骤：1.在js文件中定义几个变量用来存储经度、纬度、位置等信息。利用wx.getLocation()接口来获取当前所处位置，通过wx.chooseLocation()接口搜索选择位置，将得到的结果存储到定义好的变量中。

onLoad(options)

{

var

that

=

this

wx.getLocation({

type:'gcj02',

success(res){

console.log(res)

const

latitude

=

res.latitude;

const

longitude

=

res.longitude;

wx.chooseLocation({

latitude,

longitude,

success(res){

console.log(res)

that.setData({

latitude:latitude,

longitude:longitude,

name:,

add:res.address

})

}

})

}

})

},2.在wxml文件中利用插值表达式来展示获取到的值。注意事项:在利用setData函数赋值时，注意this的指代。实验9.导航组件实验目的：掌握导航组件的使用方法实验目标：利用导航组件控制页面的跳转实验步骤：1.在wxml文件中利用navigator和url实现页面的跳转（跳转到test页面）并传递参数。<navigator

url="../test/test?id=2"

>跳转到其他页面</navigator><navigator

url="../test/test"

redirect>重定向到其他页面<