手把手带你实战uni-app小程序项目

极乐君

发布于 2020-06-30 18:05:25

3.1K0

发布于 2020-06-30 18:05:25

文章被收录于专栏：极乐技术社区极乐技术社区

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台，解决了多个平台，分别需要些多套代码，开发效率低，开发成本高的问题。那么，我们该如何用好呢？

根据微信官方指引填写信息

PS：开发选型的时候一定要注意主体账号信息的分类，简单解释就是这个小程序是要干嘛的，定位要精准，小程序的上线目前越来越严格，并不是所有小程序都能过审的。比如，人脸授权这种功能，你就很难过审...如果有这个功能，我劝你放弃，走APP。

登录设置

登录后找到设置模块，在这里你可以设置一些小程序的主题信息，比较重要的就是这个AppID(小程序ID)，唯一的，相当于微信小程序的敲门砖

当项目是多人协作的时候，你可以添加多个开发者账号

选框架，安装开发工具

这里用的是uni-app，当然微信小程序的微信开发者工具也是要安装的，微信开发者工具呢建议还是安装最新版的，原因当然是最新版的会不断加入很多新特性。

uni-app的开发也必须安装HBuilderX工具，这个是捆绑的，没得选择。虽然有很多人吐槽这个HBuilderX，号称傻瓜式的编程工具。好吧，要用uni-app，你必须得装！！！

工具安装：

微信开发者工具
HBuilderX

至此，所有的准备工作都OK了，接下来直接进入项目开发了。

项目开发

a、新建一个uni-app项目

b、项目结构

Tips:

static目录下的js文件不会被编译，如果里面有es6 的代码，不经过转换直接运行，在手机设备上会报错。
css、less/scss等资源同样不要放在static目录下，建议这些公用的资源放在common目录下。

C、项目运行

第一次运行容易报图上的错，这个时候，可以手动打开微信开发者工具，扫码登录(加入开发者账号)。然后再重新运行到小程序，或者配置微信开发者工具的默认路径，这样一劳永逸，就不用每次先开微信小程序再运行项目了。

再运行的时候通常还是容易报错...不过别着急，一步一步来

再次重新运行小程序，终于可以编译成功了，图为demo模板的页面 [图片]

当然，至此只是让你先体验一下uni-app，接下来直接进入正式开发

d、正式项目开发

之前的模板内容太多了，项目重新开启前还是重新建一个空的模板吧，新建项目的时候依然选择uni-app项目+默认模板

(1).配置AppID

(2).运行项目

为了方便开发，可以安装一个内置的终端，可以不用额外打开终端

(3).搭建目录框架

因为使用默认模板，所以项目结构很干净。接下来先把目录框架搞定，当然你也可以按照自己的个人习惯和喜好自由设置

因为之前安装了内置终端，所以直接打开终端，会默认打开你所在的项目的根路径，直接在根路径下命令行创建目录文件

mkdir components models store utils

(4).微信路由准确的来说uni-app小程序也是单页面的形式。在小程序中，路由是不用自己定义的。uni-app路由全部交给框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式，不支持 Vue Router，如图，pages属性值的数组内容即为路由路劲。

(5).vuex状态管理

首先，uni-app 内置了 vuex。但是vuex是不支持持久化存储的，所以需要结合第三方来一起协作。

默认的模板项目首先是没有node-modules模块依赖的，也就是说你没法进行一些第三方的扩展，所以为了让你的项目更加的灵活性，你需要执行以下命令来搭配一些第三方来更随心所欲的开发项目

npm init -y npm install vuex-persistedstate --save

store.js

home里面的vuex结构也展示一下吧

最后，在main.js里面引用

至此，含两个tabbr选项的无数据交互的小程序ui结构就建好了。

(6).封装api模块

因为需要调用服务端的登录口子，所以我们优先把请求接口的模块给添加进来吧。

config配置，appId和appKey可以从微信官方开发模块获取到

封装接口请求

到此Api请求的模块就封装好了，现在开始做接口请求必须携带的AuthTokens秘钥

因为小程序肯定会频繁的切换后台或者直接切回首页面，结合小程序的生命周期等，在首页的主入口一般都会调一次登录口子，获取秘钥token。

App.vue

AppModel的接口定义，按照如下标准直接定义即可

上面还应用了vuex的状态管理this.$store.dispatch('setUserInfo', response.data)，所以你还要到store下的home modules模块做好状态管理，主要还是vuex的日常操作。一般来说同步存储只要放mutations里面定义即可，主要还是看个人习惯吧

5 静默授权

授权登录是一大重点，在项目刚开始开发的时候尤其要注意。小程序目前已有官方规定明确禁止新用户初次打开小程序就唤起授权登录获取用户信息的弹框，也就是说，如果你不当回事的话，即使开发完毕发布，微信官方团队也会直接咔嚓回。那个时候再改，代价就太大了

所以呢，目前采用的是静默授权登录的方式。什么是静默授权呢，就是新用户进入你的小程序后，他可以无障碍的访问你的小程序，当他需要分享、进详情页、交互动作、点赞、购买...需要深一层次体验我们的小程序的时候，这个时候唤起授权弹窗让用户授权之后再继续下一步是合理的。

接下来是授权登录的实现。暂时把它放在个人中心的头像区域吧

(1).找到pages-->mine页面

在ui搭建的工程中，项目默认引用less预处理，虽然不用安装第三方依赖，都是uni-app内置的，但是想要让项目正常运行，还是要安装编译时的对应工具，否则会报错

工具--->插件安装

然后安装对应的依赖即可，再重新运行项目

为了统一静默授权处理，还是抽离一个公共组件，存放在components->common->userInfoBtn.vue。

要调取用户的授权登录，必须调用微信自带的button控件才行，包括后面的分享功能模块也一样。必须要用到它里面自带的open-type属性。

引用微信自带的button当然会有很多丑陋的问题，比如样式，所以这里还是要重置下样式

(2).引用上面的封装授权按钮

这里说一个小技巧，在vue项目中引用第三方UI框架时，肯定会涉及到修改样式的问题。由于我们在Vue文件中加入了scoped属性，就是为了防止页面之间的样式污染，所以你想要修改样式的话，有两种方式，第一种是新起一个style，不加scoped，然后严格遵循BEM命名模式修改样式，尽量避免样式污染其它页面。第二种就是引用css的/deep/，如

至此静默授权的组件封装和功能都实现完毕了。还是要再强调一遍，目前开发的小程序必须采用静默授权登录的方式，否则你很大概率会被拒...

6 --- 补充说明 ---

很多小伙伴可能在这里会有疑问，入口App.vue不是有调用过appModel.login这个登录口子获取AuthTokens了吗。为什么授权之后还要再调用一遍。原因很简单，静默授权的原则就是新用户初次进来之后，必须无障碍的浏览你的小程序，也就是说刚开始在App.vue页面只能获取token信息，因为小程序内页的接口大都是要把token放在header头去请求服务端才能拿到数据，而另外的encryptedData、iv这两个参数是只有你想获取真实的用户信息才能带上，也就是说服务端必须把这两个参数设为非必传。

只有他想进入你的小程序的二级页面，或者首页有点赞、拍照、评论、分享...这一类你想拿到他的个人信息时，再调用这个封装的授权按钮组件让用户授权，然后再调用一遍appModel.login接口，再带上encryptedData、iv这两个非必传的参数，用户确认授权后，就能获取到真实的用户个人信息了。

请注意！！！

讲真，微信授权获取用户信息这块是必不可少的，不获取用户信息那开发小程序的意义何在。但是很多产品在定性小程序的时候，就想着一进小程序就让用户授权，这种需求直接拒绝就行，不要任何拖泥带水操作。因为上不了是注定的。

或者他们想着委婉点，让你在tabbar切换上加个授权，uni-app是没有路由的概念的，因此想要引用vue-router的钩子函数去拦截路由是行不通的，但倒不是不能实现，可以自己手写一套，但是花这么大代价有意义吗？何况所谓的静默授权的初衷，就是要让用户首次进入无障碍的使用小程序，无障碍的意义并不是说就只给看个首页，然后切换个tabbar就要授权了？！那估计也是大概率被拒的多。

又或者他们想我不放在tabbar的切换时加入授权，我切换后在页面里面加，即从首页切到我的页面时，直接一张暂无消息占位图+一个授权按钮，只有你授权了才能看我的页面的所有内容。讲真，真的都好鸡肋，跟上面tabbar切换授权有区别吗？？？

最后，静默授权这块怼不过产品的，就让产品多去玩玩看看大厂是怎么做的。比如小米、苏宁等等等等...

7 功能扩展

为了让这个项目不至于这么空壳，计划加入一些常用的功能，比如记录列表上拉加载，下拉刷新、轮播图、分享、开屏广告页、在线客服引入...

(1).上拉加载、下拉刷新

入口就是在个人中心的分页记录列表

首先加页面路由，在page目录下新增一个records页面，然后在项目根目录下的pages.json挂载上，如果要新开页面的话，都要在这个目录下注册页面

如动态图所示，这里还抽了一个tab选项卡的小组件。直接开箱即用就行。

上拉加载下拉刷新在uni-app官网上其实是有介绍的。这里单独取出来是因因为接口都配置好了，只要替换成你项目中的服务端数据和修改下样式即可，功能是已经实现了的。代码就不全贴了，直接大致介绍下功能点吧

上拉加载下拉刷新这功能大致分两种情况，第一种是整个页面的上拉下拉，这种实现比较简单，首先当然是要在项目根目录下的pages.json声明页面的可加载属性

然后主要实现两个方法功能

是否加载完毕可以在服务端接口返回数据中对对象做处理，对应的业务在代码中都有实现好，因为接口无法正常调用，所以你要使用的话，需要替换成你自己联调的接口。

(2)联系客服

小程序要做好的话，那细节之处肯定是必不可少的。比如客服功能的引入，实时根据用户的反馈完善或者修复问题

小程序中不需要你额外接入在线聊天工具，当然，如果你想体验性做得好点，那可以多投入些精力做好实施聊天这一大模块。这里简单介绍一下用小程序自带的反馈聊天模块

首先，还是得应用微信自带的button按钮,指定open-type的值为contact

在小程序中，开发者可以登录微信小程序管理后台，进入菜单“客服反馈”页面获取反馈内容

(3).分享

说完联系客服顺便说下分享吧，都是同样的套路，同样是应用微信自带的button按钮,指定open-type的值为share，然后在vue属性上指明你要分享的内容

分享出去的携带的参数id提取的方式是利用小程序的生命周期函数onLoad

(4).轮播图+跳转第三方url

同样封装成一个工具库components->common->swiper.vue，工具类就不多说了，引用的是系统自带的swiper组件

这里介绍一下跳转第三方url页吧，包括在UI搭建阶段轮播图引用其它外域链接的图片url，这两个其实算是一类问题。

微信安全规范里面，是明确禁止没有在微信开发者后台加入合法域名时，加入任何的外域链接都为非法链接，也就是说，即使是联调的服务端接口，也得把合法域名加进微信的服务器域名名单，包括使用微信拍照或者上传图片都必须额外加上这个合法域名名单，图片信息才能正常显示，接口才能正常引用。配置详情如下

配置路径

配置完后微信开发者工具详情栏目里项目配置里会出现合法域名信息

或者在开发环境时可以把这里勾上，但最终项目上线后还是得记得配置对应的合法域名信息

配置好后，当你的轮播图对应的是后台的详情地址或者是微信公众号的内容时，才能够正确跳转到对应的路径中。唯一要注意的是，在本地微信开发者工具是无法测试这一功能的，最好用真机测试，否则还是要务必保证你的合法域名都在微信后台添加上了，并且本地设置也去除了合法域名的校检

如上代码所示，详情页跳转第三方url，你必须得新开一个页面bannerWebview作为第三方路径承载的容器，当然，别忘了路由注册。这里，你要跳转的url最好encodeURIComponent(url)，然后在bannerWebview文件中，利用微信自带的<web-view :src="url"></web-view>，即可进行第三方页面的跳转，再次强调一遍，跳转第三方最好用真机做测试。

这样，轮播图功能就搞定了

扩展功能就先做这些吧，后续有时间再加一下上去...

8 开屏广告页

现在很多大流量的APP在首次打开时会有一个3~7S不等的小广告，当然，做得有好点你可以让他随时都能跳过。小程序里面也有广告页这样的概念，接下来就让我们来实现一下吧

首先是广告页的入口构思，广告页放哪个位置合适呢？是放首页作为弹窗出现？？？还是作为小程序主入口出现？？？因为广告页不可能每次打开小程序都出现一次广告，那用户肯定十分反感，过度挑战用户的耐心，肯定难逃被用户卸载的下场...

一般合理一点的需求就是每天的第一次打开时，加入一个3~7S不等的小广告。接下来我们来实现一下作为主入口出现的小广告。

首先，在pages.json注册页面路由，这里务必要注意一点，pages数组中第一项表示应用启动页。