10-封装城市选择组件原创

Hello，同学们好，我是图学老师，这节课我们跟大家讲解一下如何在我们项目当中自己去封装一些组件，并且使用这些组件啊。首先我们看一下我们用到一个自声明的组件，地方就在于我们首页的这一个选择城市的这个列表当中的这个内容就是我们自书写的组件，然后呢，这里面呢，我们看一下我们组件说明的地方放置的目录是在我们整个项目跟目录当中的components这个目录当中就有一个city pick这样子的一个。目录，这个目录当中放的就是我们的组件，我们可以看到一个组件的构成也是跟我们的页面是很相似的，它为什么有一个模板部分，一个配置部分。一个逻辑部分以及一个样式部分构成的。我们接下来看一下，在我们的首页当中，我们在这个选择上册地址和选择下册地址的地方，我们都绑定了同样的一个函数，啊，这时候我们先把这个函数点击给大家看一下它长什么样的线。

然后接下来我们看一下这个函数，除此以外还有什么内容哈，我们看这函数，我们点击之后会。执行右边的这个select city这个地方，然后呢，不同的是两者之间有一个不同的参数的传递，一个是data type，一个是的是start，一个什么end，两个不同的参数，小程序当中一般通过事件的触发，然后通过data set当中来获取。这是小程序事件传承的一种的主要的形式，然后呢，这里面我们会。从而得到了这个传递参数之后，我们再跳转到一个指定的页面，就知道呢到一个select的页面，并且带上了一个不一样的参数。然后接下来我们看一下跳转之后的这个页面里面的页面逻辑。

我们接下来打开select当中，我们打开这子页面。首先我们在select city这个地方，我们获取什么，我们获取了一个对应的一个tap啊，就是什么，就是跳转时候传递过来的参数啊，就拿到了这里跳转的时候传过来的type。然后type当中我们会设置呢，设置date当中这个地方。啊，这个逻辑也比较简单，接下来呢，我们在我们的页面当中看一下它有的内容。页面当中呢，我们就使用了一个第三方组件。页面当中呢，我们就在这里使用到了我们的c pick，而pick是怎么引用的呢？首先。如果我们想在select city当中使用这个组件，那么就要打开它的配置文件。在配置文件这个地方，我们需要什么？这里进行一个using components的这样的一个配置项当中配置我们要引诱的组件，然后并且说明主件所在的地址啊，这里面指的就是我们的component里面的city pick，往下找到它的这个对应的JS文件，就是我们组件的入口。

然后呢，这样子之后我们就可以在我们的页面当中使用什么，使用对应的组件内容了啊，比如说刚才我们是在这个select city当中用到的这个组件，所我们在它对应的配置文文件当中进行应用。啊，大致是这么一个使用的关系，接下来呢，我们看一下我们的这个c pick当中里面有哪些逻辑呢。在这个页面当中，我们声明有三个。有一个属性。这个属性呢。在页面当中我们说明有一个type的属性，这是什么？这是在使用组件的时候传递进来，只比如说啊，我们在啊，不是这个，我们是在这个select city。的页面当中使用到了这一个。CPE的时候传递进来type的值啊，这里面声明一个重而重嘛，就是在。

从而接收副主。副页面当中传递。进来的陈述通过什么？通过自定义属性，OK，这里面我们拿到了tap，从这里面tap就得到吗？得到了我们从首页点击之后传递过来什么？从首页点击过来所传递的上次地址下次地址我们以什么？以刚才说了一个对应的type为主要的值。啊，这是我们的一个核心的业务逻辑的参数的传递，先从哪里呢？我们再重复一下哈，我们从我们首页当中。首页当中的这个事件触发拿到对应type的值。从而在跳转当中传递这个得到的type的值，然后呢，在我们的这一个select city当中。我们要什么？又设置了这个值。以便我们在我们的select系统使用主键的时候，能把这个type的值传递到吗到我们这个组件内部。

而组件内部我们会做个事情，有什么事情呢？我们一开始的时候我们会嘛，先第一个事情有一个生命周期。逐渐的是。组建的生命。周期created就什么就在逐渐。创建完成之后，OK，这里面我们就什么执行一个函数叫get list，而该类做什么东西呢？我们从一个指定接口当中获取现在所有的。这面说什么，获取所有的城市？数据。然后呢，从而我们就可以设置这个对应的城市数组对应的内容了，啊，这里面就是我们得到。一些核心的数据啊，就是我们在我们的小程序当中。啊，选择了上次地址之后里面的这三个数据，而且这个数据当中呢，我们是什么，我们是基于拼音来进行排列的。

啊，但我们在实际上我们在这个PC当中，我们还是说嘛，我们使用到了的场景是说，就是我们先对于它进行一个什么对应的一个排列。什么排列，就是根据字母什么去排列，那我们这里面需要看什么呀，同学们需要看一下我们这个接口返回的数据类型啊，我们再重新清空一下。这里面进来啊，就看到了，这里面执行力有一个请求。看到没有同学们啊，请们看一下这里返回的内容，返回内容当中我们的data就是什么？根据我们的这一个城市的首字母已经在服务端进行好了排列，从而能够进来之后就能拿到吗？拿到了它对应的一个。不同的首字母对应的城市的信息。OK，就是我们的接口服务端返回的内容啊，当然是为了方便我们在这里进行一个数据的陈列。

啊，数据陈列，然后呢，我们看一下啊，这一步就是我们在生命周期组建初始化的时候，肯定要获取这样的程序列表了哈，就是这个函数所做的事情，接下来我们写上了一个什么，我们在这个页列表当中渲出来之后，用户肯定要点击，点击它之后进行选择，所以这时候呢，我们在我们的页面当中给每一个城市的类别选项当中，我们绑定吗？绑定你一个。事件啊，Tap事件会执行这个。Handle select，就处理它选中时候的这样子的一个操作，好同学，我们看一下这个操作，我们具体又做了哪些事情呢？在这个操作当中。我们会根据你选中的值，还有以及什么，以及对应的类型。来更新我们的全局数据。啊，当然这个全局数据指什么？各位指的就是我们在我们的。整个小程序与文件当中，我们这里有一个global date global date当中有一个什么，有一个就是这里面会记录记录。

用户的用户选当前选择。起点。城市，然后呢，这什么就是。用户。当前选择的终点。是啊，这里面我们在global data里面说明有一个对应的一个全局的数据啊，所以这里面啊，整个在APP啊，就是在我们的入口文件当中进行说明的，然后呢，我们可以在什么，在我们这地方，我们可以通过什么，通过get APP的形式。这样的可以什么获取全局的APP实例啊，当然这个实例在什么地方，就是在app.cs当中说明的。

啊，获取它的目的是什么呀，就是想在一个公共的。就想在一个那获取它目的是什么呀？就想在一个公共的地方来存储我们的这个起点城市，以及我们什么我们的这个终点城市，比如说看这里面哈，我们选中之后，我们根据类型啊，如果你star我就设置成起点城市，为什么单go店里面的star地就等于你选中的这个城市啊，但如果你选择了类型什么不是start，那就是什么就是end了哈，就是我们的终点城市，改变它的名字啊，选中好之后，我们还做的事情，什么事情呢？这里进行了就是路由。路由跳回到上一页。就执行一个微信的进行一个上传回到上一页的操作。啊，然后我们这里操作一下，当我们选择这个地方就可以返回到上一页了，看到了吗？啊，我们再看一下我们首页代码当中，我们首页代码当中，在这个里面，其实我们也会什么，也会专门去显示什么，显示这个起点城市，同学们看一下啊，在这里面我们是看，如果有。

点城市，我们就用了个三元表达式，如果有起点城市，我们就显示起点城市的名字，如果没有的话，就选择什么，类似下面这里面的选择你的这个请选择下册地址的这个文字的内容。啊，但这个star city和an又从哪儿来呢？其实就在我们业务逻辑当中，我们都是什么在开始lo的地方。啊，在on这里，同学们哈，On里面我们什么就是。从全局的GE当中获取用户选择的城市。起。起点和终点城市啊，当然如果你设置有的话，我才去嘛，对不对，OK，所以这里面就能实现了吗？实现了我们用户选择起点城市，给用户选择终点城市，我们可以通过什么，通过一个组件来实现逻辑的服用。

看到了吧，这就是我们的一个常规的业务逻辑，但同学们看一下，除此以外。很多时候呢，我们小程序在进来的时候，在城市相关的选择当中，一般而言，我们会有什么，会有一个获取当前的GPS的一个操作，当我们得到了当前的GPS信息，我们会在一些啊，比如说这里我打开的时候，会在一些我们已经当前的城市，会选择个高亮，同样也能快速的默认的选择就是那一个城市，对不对，当然一般我们在什么地方，是在起点城市做这个操作吧。理解我意思吧，所以说我这里面又写了一个函数，这个函数我们是做什么，我们是根据什么，根据根据。GPS信息。来获取城市名称啊，当然我们这里面就要做一个逻辑了哈，我们进来的时候，我们什么时候执行获取这个城市的名字跟GPS呢，我们是不是如果在什么在这个类型啊，我们看这里面啊，我们说是不是。

如果是起C。用户选择的是起点城市，我们就根据GPS去获取当前城市的名字，OK，这是我们很常见的一个业务操作，我们做的事情和第什么我们的从当前接收的制定属性。当中的菜如果等于什么大的时候。我们是不是就调用以下的这个函数啊。啊，看到吧，这里面调用一个函数，但是我们这边会啊，让他执行。啊，执行之后我们啊，这个接口我们是做什么，我们调了一个接口是什么，就是我们说的第一个哈，就是微信点点location走。这个这个这个接口做什么，这个接口就是。

获取。去信息啊，他们调用这接口要注意的事情了啊，同学们调用这个接口G。的去。app.js进行权限配置啊，这里面指什么地方呢？各位哈，我们如果想要获得这个GPS信息，我们需要，因为这也是属于调用用户的一部分的隐私了，所以这个时候呢，我们要在整个项目的跟目录当中的AP当中。啊，同们往下拉到这个地方，在permission这里面我们要什么有一个对应的一个配置啊，这里面有一个描述，描述就是指我们在获取当前的这一个GPS信息的目的是什么，我们需要明确的告知用户啊，不然这里面会有一定的安全隐患哈，我们这只是隐私权的一个尊重的问题啊，同们记得在里配置，不然的话，你在项目当中调用这个接口是获取不到GPS的信息的啊，这一步当中呢，我们一旦获取这别器当中，我们会得到一个东西，一个什么？一个是纬度，一个是精度，接下来我们会根据这个情况，把这个纬度和精度传递到我们的对应的接口啊，接口就会返回对应城市的信息啊，当然我们这里可以调试一下，我们看一下这里得到了城市信息会是哪些内容啊，这里面我们把这一个得到的结果打印出来看一下。

然后点击我们是上车的时候再去获取的，对不对啊，然后在这个地方并没有执行，我看一下哈，那么这里并没有执行。没人。然后同学们，我们看一下它执行的结果哈，然后这里面需要注意一点，同学们这个时候执行结果能发现它并没有执行到这一句好，我们再看一下，看我点的快了一点点啊，我们在这里点击一个获取信息，他们看到有没有执行啊。

并没有执行到这里面的内容，这里为什么呢？同学们注意一点了哈，在。在小程序的。啊，这个created只能保证自己创建完成。但是还不还没有在没在主键数当中。完成挂载。啊，所以同学们，我们这一点的操作需要在里面完成了个，我们要另外一个钩子，什么钩置里面在ready当中啊，其实我们更好的方式应该是放ready当中去做这个业务逻辑的判断啊，那么啊把它放这里来。好吧，然后呢，这时候我们再看一下执行请求得到的结果，然后点击选择上升，那么看到吗？这里面有一个闪动，表示这时候再获取GPS信息了啊，这时候我们这里就获取GP信息的一个操作，然后我们看一下network当中啊，就会发出对应的请求啊，但是这里面我们看没有看到，我们就重新来。

啊，同学们，这里就有什么发出一个请求了，看到没有get by，然后呢，这时候我们看一下返回的结果。啊，在返回的结果当中，我们看到这个，你就能看到，我们看到个对应的一个。信息啊，当然这里面呢，其实我们只要什么，我们只要到城市就可以了啊，我们叫city这一步就可以了，所以在我们的接口当中，我们看一下哈，在我们这个get by GPS的地方，我们至少嘛，我们就绕到了什么对应的城市，OK，我们这种啊使用。城市的信息。啊，当然这里面我们就什么得到城市信息之后，我们就是我们想我们就对应的去set啊，设置当前的这一个啊，当前城市值为指定的值，OK，同学们，这是我们获取当前城市里一步的操作，那接下来我们就要什么得到当前城市之后呢，我们会给什么给这个选中的城市后面加上了括号，括号什么内容是已经显示的当前城市的信息在里面给到他啊，我们给一个小小的提示啊，这个地方呢，我们再看回我们的页面，在我们组建的页面当中，我们是在你渲染什么，渲染对应的城市名称。

看到吧，对应的城市名称，所以这个里面呢，我们需要做的事情，什么事情呢，我们看一下。接下来同学们可以看到，我们这里面都有个广州，深圳，北京，重庆，但是我们会把事给去掉，所以我们这时候呢，在明智当中我们也做过事情，我们就们做一个在得到了名字之后啊，客人city这个地方哈，我们也做个小小的替换，我们甚至值得什么等于啊当前的城市名智当中我们replace，我们去掉这个对应的内容哈，Replace。我把这个是。城市的是。给替换为空的字符串。

好吧，啊，我们就为你替换掉那个内容，OK，接下来我们在页面当中这个地方，我们就做一个小小的判断就可以了，OK item当中的你当前的这个选项的名字，如果等于当前的我们的这个city。A current city。啊，就是我们刚才设置这个值看到吧哈，若等于这个值的时候，我们就显示，为什么显示为。当前。啊，不然就写什么给它返回一个控制符串啊，这里有个问号啊，三元表达式这样的形式。实现。账的业务流程，好，同学们，接下来我们看一下页面的结果啊，这里有个小小的错误啊，判断当中啊，往后这里。看一下。

我们看一下现在的结果。啊，同学们看到了吗？这时候当我们有一个当前城市获取时，可以这里提示为当前城市啊，方便辅助我们用户知道我们现在所在地方是哪一个，就点击它，就选择广州，OK，就是我们在对于一些很多的多站点或者多尝试选择当中提升一个用户体验的方式，我们可以用获取GPS系之后来跟当前的一些数据进行比对的情况，来给用户一些友好的提醒，但我们的业务当中是在样的，只是在这个点城市当中才做了这个选择啊，在我们这里面是不是在起点城市才做出选择呀，对不对啊，这里面补上一个备注啊，在选择起点城市的时候。

根据GPS。去获取当前城市名称。OK，这里面就是我们业务哈，我们去到这里面就不会有，好吧，就没获取GPS啊，如果我们去到是起点城市啊，这里就获取GPS信息，出现了个当前的提示。好了，同学们啊，这节课我们就把我们的一个如何书写一些地自己的主见，并且在我们的页面当中使用我们的组件，比如说我们在拉机体当中，我们是不是在配置中使用了我们这寿命的组件的方式啊，希望这里面能给大家带来一点帮助。