⼩程序之组件开发中的基础知识
跟着视频开始⼩程序的项⽬的开发，视频中这个⼩程序已经上线了，可以很好的看着⼩程序的界⾯进⾏开发，昨天看了⼀下具体的需求，觉得真的细节好多啊，⽽且其中设计的组件的思想也是很好的，能够很好的实现代码的复⽤，实现代码的解耦合，这个视频讲解的是真的好，好好学习⼀下。
组件component开发
⼩程序中的⼤部分的页⾯其实都是由组件来组合起来的，所以开发适合需求的组件是⾮常重要的，来进⾏组件的开发。
（1）在与pages同级⽬录下创建components⽂件⽬录，来存放所有需要进⾏开发的组件
（2）之后在components⽂件夹下⾯进⾏组件的创建，⾸先也是创建⼀个空的⽂件夹，然后在创建components组件
（3）页⾯中如何引⽤组件
在静态页⾯中的json⽂件下进⾏组件的引⽤，例如：可以在classic⽂件夹中的classid.wxml⽂件中使⽤like组件，可以这样做：
在classic⽂件夹下的classic.json⽂件中引⼊组件的路径
这个路径是有问题的，所以没法显⽰，很显然，这⾥使⽤的是相对路径，如果使⽤绝对路径就没问题了："v-like":"/components/like/index"
在页⾯中使⽤组件，在classic.wxml⽂件中使⽤v-like组件
（4）静态图⽚⽂件夹的创建
注意：这⾥需要创建images⽂件夹，可以直接在组件中创建⽂件夹，只供组件来使⽤，也可以在components⽂件夹下⾯创建images⽂件夹，所有的组件共⽤⼀个images⽂件夹，同时创建pages同级images⽂件夹，供pages中页⾯使⽤
（5）组件中image组件的使⽤
image组件的官⽅⽂档：
注意：
在⼩程序的关于尺⼨的单位，⼀种是px，⼀种是rpx。其中rpx是和我们平常页⾯开发中的px是⼀致的，
但是px是平常开发的px的⼆倍，也就是在⼩程序中px是rpx的⼆倍的关系，这个原则只限于在iPhone6这种机型下⾯才试⽤，其他机型不⼀定是2倍的关系，这⾥还有⼀点，就是rpx是⾃适应的，绝⼤多数情况下都可以使⽤的，但是有些地⽅还是需要选择的，必须说是字体的⼤⼩，可能就不需要⾃适应，设计成固定⼤⼩的字体
（6）设置全局样式
这个需要新建全局样式⽂件，例如可以在根⽬录新建⼀个app.wxss的样式⽂件来作为全局样式⽂件
打开调试器可以看到，⼩程序会⾃动添加page标签的，所以可以设置page标签的样式，组件中的样式也会变化！
注意：并不是所有的全局样式对组件都起作⽤，只有很少的css样式是可以从全局样式中继承的，但是在页⾯中是可以继承的，classic.wxml 页⾯⽂件中是可以继承app.wxss⽂件中的样式的，具体的⽂档如下：组件样式下⾯有详细介绍
（7）设置组件的⾃定义宽度
display: inline-flex；可以直接使⽤display的inline-flex的值来设置组件的⾃适应宽度
（8）事件的触发
官⽅的⽂档中有详细介绍：
这⾥主要使⽤到的是⼿指触摸事件，也就是通常PC端的点击事件具体的写法，是在js⽂件中来写事件的逻辑代码的
// wxml中
<view bind:tap="onLike" class="container">
<image src="images/like.png" />
<text>999</text>
</view>
// js中这个是需要写在methods中的
/**
* 组件的⽅法列表
*/
methods: {
onLike:function(event){
console.log(event);
}
}
（9）三元表达式
这个就要涉及到js中的逻辑代码的编写了，看看三元运算符的格式，来实现⼀个数据的切换
1 <!--三元运算符的使⽤-->
2 <view bind:tap="onLike" class="container">
3 <image src="{{like?yesSrc:noSrc}}" />
4 <text>{{like?count1:count2}}</text>
5 </view>
6
7 <!--数据是需要定义在js中的，其中data是专门来存放数据变量的-->
8/**
9 * 组件的初始数据
10*/
11 data: {
12 like:false,
13 count1:9,
14 count2:99,
15 yesSrc:'images/like.png',
16 noSrc:'images/like@dis.png'
17 },
（10）组件的封装性和开放性
组件的封装肯定要好坏之分，那么什么是决定组件封装的好坏，也就是让⼈感觉很好⽤，让⼈⽤着舒服呢？视频中的⽼师说的是：
1）你是要思考什么数据是封装到组件中的，⽽什么数据是开放出来的
2）关于粒度的问题
粒度在这⾥就是指的是封装的组件的难易程度以及组件的功能的强⼤与否
（11）js⽂件中properties属性列表的设置
这个是主要来设置⽤到的变量的类型以及初始值，还有⼀个observer属性的，在开发中可以把对外开放的数据来在这⾥进⾏定义，同样页⾯中是⽤{{}}语法来取值
/**
* 组件的属性列表
*/
properties: {
like:{
type:Boolean, // 设置变量类型必填
value:false, //设置默认值选填
observer:function(){ // 选填
}
},
count:{
type:Number
}
},
（12）属性在methods中的应⽤
直接看代码吧，这个和之前的各种语⾔的⽤法道理是⼀样的
1/**
2 * 组件的⽅法列表
3*/
4 methods: {
5 onLike:function(event){
6var like = this.properties.like; // ⽤变量来接收属性的值
7var count = unt;
8
9 count = like?count-1:count+1;
10this.setData({ // 变量赋值之后需要重新设置Data的值
11 count:count,
12 like:!like
13 })
14 }
15 }
（13）从服务器获取数据
这个主要是调⽤接⼝，从服务器上获取数据的⽅式，很苦恼，并没有权限从⽼师搭建的后台服务器上获取数据，我没有购买慕课⽹上的课
程，没有办法获取到那个特殊的开发者key，这⾥只是记录⼀下获取数据的⽅法以及数据如何处理
官⽅的⽂档来学习⼀下：
看看代码：
1// 这个是在classic.js中
2/**
3 * ⽣命周期函数--监听页⾯加载
4*/
5 onLoad: function (options) {
6 wx.request({
7 url: 'bl.7yue.pro/v1/classic/latest',
8 header: {
9 appKey:'K0LDaSADSDLWWbF'
10 },
11 success:function(){
12//返回结果成功之后数据的处理
13 }
14 })
15 },
16
17// ES6中箭头函数的写法
18/**
19 * ⽣命周期函数--监听页⾯加载
20*/
21 onLoad: function (options) {
22 console.log(st)
23 wx.request({
24 url: 'bl.7yue.pro/v1/classic/latest',
25 header: {
26 appKey:'K0LDaSADSDLWWbF'
27 },
28 success:(res)=>{
29//返回结果成功之后数据的处理
30 console.log(st);
31 }
32 })
33 },
（14）代码优化
这个主要是来优化请求的接⼝的⽅法的，我们把⼀些通⽤的数据抽离出来，来写成公共的⽅法，供许多模块来⼀起调⽤在http.js中来封装wx.request
具体的config.js中代码：
1// const关键字是声明不变的值的时候来⽤的，相当于Java中静态变量
2 export const config = {
3 api_base_url:'bl.7yue.pro/v1/',
4 appKey:'K0LDaSADSDLWWbF'
5 }
6
7// 导出function函数⽅法
8 export let fun1 = function(){
9
10 }
11
12// export {const, fun1} 这种写法就不⽤每⼀个都写export关键字了
http.js中代码：
1// 导⼊的时候需要使⽤相对路径
2 import {config} from '../config.js';
3
4// 错误的具体的提⽰信息根据接⼝中error_code
5 const tips = {
6 1:'抱歉，出现了⼀个错误',
7 1005:'appKey不正确',
8 3000:'期刊不存在'
9 }
10
11 class HTTP{
12 request(params){
13if(!hod){
14 hod = 'GET';
15 }
16 wx.request({
17 url: config.api_base_url + params.url,
18 hod,
19 data:params.data,
20 header:{
21 'content-type':'application/json',
22 appKey:config.params
23 },
24 success:(res) => {
25// 来判断请求是否成功以2开头就是成功这个是在Number类型的， // 需要装换成string类型
26var code = String();
27// ES6中 startsWith 和 endsWith
28if(code.startsWith('2')){
29 params.sucess(res.data);
30 }else{
31// 错误信息的提⽰
32var error_code = _code;
33this._show_error(error_code);
34 }
35 },
36 fail:(err) => {
<_code(1);
38 }
39 })
40 }
41
42// 错误信息的提⽰⽅法
43 _show_error(error_code){
44if(!error_code){
45 error_code = 1;
46 }
47 wx.showToast({
48 title: tips[error_code],
49 icon: 'none',
50 duration: 2000
51 })
小视频app开发52 }
53 }
54
55// 使得类外部可以访问
56 export {HTTP}
classic.js中代码的优化，主要是优化的request请求的封装⽅法
1// 这⾥导⼊的时候需要写成相对路径
2 import {HTTP} from '../../util/http.js';
3
4// 实例化HTTP类
5var http = new HTTP();
6
7 Page({
8
9/**
10 * 页⾯的初始数据
11*/
12 data: {
13
14 },
15
16/**
17 * ⽣命周期函数--监听页⾯加载
18*/
19 onLoad: function (options) {
20 quest({
21 url:'classic/latest',
22 success:(res)=>{
23 console.log(res);
24 }
25 })
26// console.log(st)
27// wx.request({
28// url: 'bl.7yue.pro/v1/classic/latest',
29// header: {
30// appKey:'K0LDaSADSDLWWbF'
31// },
32// success:(res)=>{
33// //返回结果成功之后数据的处理
34// console.log(st);
35// }
36// })
37 },
总结：看完了前七章的视频，我感觉⽼师绝对是⼤⽜级别，从⽅⽅⾯⾯的来看，⾃⼰需要学习的东西还有很多啊，卑微的默默学习吧！
内容出处：七⽉⽼师《纯正商业级⼩程序开发》视频课程
视频课程链接：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论