我正在参加「掘金·启航计划」
最近微信小程序又掀起一波风潮,本文站在新手的角度出发,比较适合第一次使用uniapp 开发微信小程序的伙伴,或者没有过实战经验的小伙伴参考,从零搭建uniapp小程序项目
一、开发前的准备
1.1 下载工具
hbuilder首页:www.dcloud.io/hbuilderx.h…
下载hbuilder编辑器,选择对应的系统,Windows和mac正式版即可,下载好安装路径不要放在C盘,此编辑器作为主要开发编辑器
微信开发者工具:developers.weixin.qq.com/miniprogram…
下载微信开发者工具,选择对应的系统,正式版即可,下载好安装路径不要放在C盘,此工具主要用于开发是预览小程序
1.2 申请微信小程序
微信公众平台:mp.weixin.qq.com/
进入微信公众平台-> 点击立即注册-> 点击小程序-> 点击前往注册
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cb77f94296c149878a6cefb5e5178f72~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)
填写信息。注意:邮箱需要,未被微信公众平台注册,未被微信开放平台注册,未被个人微信号绑定的邮箱
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6b015b6a2a784ff59cd005f2fa96f549~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)
注册好后,扫码登陆平台,页面向下滚动,找到左边的开发,选择开发管理,右边页面选择开发设置,这里会有一个AppID,作为绑定开发者工具用(注意不要暴露,使用在后文)
![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/25bdd491bfea46c78cfe3ac531e284e4~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)
二、新建项目
打开hbuilder编辑器选择文件->新建->项目
![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0bef20e829b547e7a7f8561c5b795ac0~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)
这里uniapp会提供很多初始化模板,可根据需求选择,此文以默认模板作为演示
填写项目名称
选择项目存放的路径
vue版本选择(此文以通俗易懂的2.0作为演示,3.0大同小异)
默认不启用 uniCloud和git
点击创建
![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4b9175e4c4934cc6b820168b4f66e8dc~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)
试运行:
可能会出现没有配置微信开发工具情况,此时需要配置微信开发者工具路径
![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4b987910dd954775a21a5f02051702ea~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)
点击浏览 选择刚才安装微信开发者工具安装路径
![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/37af6f463ca143fdba17986a74672f24~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)
配置微信开发者工具:
设置->安全设置-》开启服务端口
![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6cb5d8db376e4b7790a55b6668c82c5c~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)
运行:
运行->运行到小程序模拟器->微信开发者工具
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/62c03dc9e88a41159b9d8bd880ade0be~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)
运行成功:
微信开发者工具会自动弹出来,可能没登录需要扫码登录微信开发者工具
![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8891b248a9124118a47eda008b3e2d1f~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)
三、项目结构
![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ddbced85aff74df1aaab4e8d8ceaf1c5~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)
文件名用途pages用于放置页面文件static静态文件位置App.vue主文件 同vuemain.js同vuemanifest.json项目配置(下文详讲)pages.json页面配置(下文详讲)uni.scss全局样式文件
3.1 manifest.json配置
此文主要用于开发微信小程序,其他的配置可以暂时不管,选择微信小程序配置
![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ccc3c779c4ea4562bac8f13e71895619~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)
配置作用AppID填写刚才在微信公共平台获取注册的 AppIDES6转ES5可以勾选 兼容上传代码时样式自动补全可以勾选 自动补全上传时自动压缩勾选 压缩代码检查安全域名和TLS版本不勾选 方便开发位置接口此配置需要 在微信公众平台申请相应的接口unPush2.0消息推送 需要申请开启云端一体安全网络加强安全(暂不演示)
3.2 pages.json
注意:此代码为伪代码,只为示例作用,方便查看属性配置使用 无法运行,需要自行配置需要的属性
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3173c593c43345ad9a6cd9d8e371578a~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)
pages配置
pages数组第一项表示启动项 相当于首页,每新增一个页面 要在pages数组新增一个对象path文件路径style页面样式 下面为style详细配置navigationBarTitleText导航栏标题文字navigationBarTextStyle导航栏标题颜色,仅支持 black/whitenavigationBarBackgroundColor导航栏背景颜色backgroundColortab 的背景色navigationStyle导航栏样式,仅支持 default/customm,开启 custom 后,所有窗口均无导航栏,如使用自定义导航栏 需要设置customenablePullDownRefresh是否开启下拉刷新onReachBottomDistance页面上拉触底事件触发时距页面底部距离,单位为px
globalStyle全局配置 等同于pages 是单独的对象
tabBar 配置
tabBar解析colortab文字默认颜色selectedColortab选中时的颜色borderStyletab上边框的颜色,仅支持 black/whitebackgroundColortab 的背景色position位置 可选值 bottom、toplist数组 以下为数组对象详解pagePath页面路径,必须在 pages 中先定义iconPath图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片selectedIconPath选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效texttab 上按钮文字
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"backgroundTextStyle": "black",
"enablePullDownRefresh": "false",
"onReachBottomDistance": 50
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"navigationStyle": "default"
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"position": "bottom",
"list": [{
"pagePath": "pages/component/index",
"iconPath": "static/image/icon_component.png",
"selectedIconPath": "static/image/icon_component_HL.png",
"text": "首页"
}, {
"pagePath": "pages/API/index",
"iconPath": "static/image/icon_API.png",
"selectedIconPath": "static/image/icon_API_HL.png",
"text": "购物车"
}]
}
}
四、封装网络请求
4.1配置环境变量
根目录下新增 common文件夹 新建文件operate.js
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5482d28add1444fab990691ec9ccb569~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)
export default {
//接口
api: function() {
let version = wx.getAccountInfoSync().miniProgram.envVersion;
switch (version) {
case "develop": //开发预览版
return "http://xxx.xxx.xxx.xxx:xxx"
case 'trial': //体验版
return "http://xxx.xxx.xxx.xxx:xxx"
case 'release': //正式版
return "http://xxx.xxx.xxx.xxx:xxx"
default: //未知,默认调用正式版
return "http://xxx.xxx.xxx.xxx:xxx"
}
}
}
调用 wx.getAccountInfoSync().miniProgram.envVersion获取微信环境
develop-开发预览版 trial-体验版 release-正式版
4.2封装请求
在common文件夹 新建文件request.js
![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6de0e796f5444a49977e4fbc4a099b4a~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)
import operate from './operate.js'
const http = (options) => {
return new Promise((resolve, reject) => {
uni.request({
url: operate.api() + options.url, //接口地址:前缀+方法中传入的地址
method: options.method || 'GET', //请求方法:传入的方法或者默认是“GET”
data: options.data || {}, //传递参数:传入的参数或者默认传递空集合
header: {
'Authorization':"token", //自定义请求头信息
},
success: (res) => {
if(res.data.code!==200){ //自定请求失败的情况
uni.showToast({
title:res.data.msg,
icon: 'none'
});
}
resolve(res.data)//成功
},
// 这里的接口请求,如果出现问题就输出接口请求失败
fail: (err) => {
uni.showToast({
title: "" + err.msg,
icon: 'none'
});
reject(err)
}
})
})
}
export default http
判断环境 不同的url
data需要给默认值 {}
header可以自定义 比如请求头的token 根据项目配置获取方式,例如uni.getStorageSync('Admin-Token')
success 请求成功的情况下 如果code和后端商量不等于200 的情况返回什么 msg是根据后端定义的错误提示字段
可以自行封装需要函数,如全局Loading效果之类
使用:
可统一新建api文件存放不同 页面的api请求
例如:
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/90ebd0e119454419ad91e0c4f5b0f13b~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)
例如:user.js 这里统一存放关于用户的请求
import http from '../common/request.js'
export function getUserInfo() {
return http({
url: '/getUserInfo',
method: 'post',
})
}
单个页面使用: 直接导入方法即可
import {getUserInfo} from '../../api/user.js'
或者 全局封装:在main.js里面复制以下函数 个人不是特别喜欢这种方式
import request from './common/request.js'
Vue.prototype.$request = request
//文件内部使用 G
this.$request({url,method,data})
四、引入ui框架
此文以uview2.0为例
uniapp uView2.0插件市场:ext.dcloud.net.cn/plugin?id=1…
uview官网:www.uviewui.com/
点击下载插件并导入HBuilderX
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d0e4b93a0cd74710b9b7d2c5ce4dc6c2~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)
未登录uniapp的需要先登录
此时hb会弹框,选择项目点击确定
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a75384fe090c433c865bdbf8daf7e473~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)
uview基于sass所以先下载sass
// 安装sass
npm i sass -D
// 安装sass-loader
npm i sass-loader -D
配置main.js
// main.js
import App from './App'
import Vue from 'vue'
import uView from '@/uni_modules/uview-ui'
Vue.config.productionTip = false
App.mpType = 'app'
Vue.use(uView)
const app = new Vue({
...App
})
app.$mount()
// main.js
配置uni.scss 全局uview主题文件
//文件最上方
@import '@/uni_modules/uview-ui/theme.scss';
配置App.vue 引入uView基础样式
/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
@import "@/uni_modules/uview-ui/index.scss";
五、愉快的开始写代码
六、发布
uniapp编译后可以点击微信开发者工具的上传按钮
![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b65ac163b7bc4f6db029501a50d20951~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)
打开微信公众平台 选择版本管理 右侧可以看到开发版本 ,如只有一个版本会默认开发版本,如需要发布正式版本点击提交审核就可以,审核周期第一次稍微长一点,后续修改代码就很快
![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d7db11308ab146a9bba2847ec013dad4~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)
等待审核后就自动发布成功
注意事项: 正式服需要配置合法请求
入口:开发管理->开发设置
![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f2205810c6cd4eb9a816f045f6588f18~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)
注意:所有相关请求都需要配置进去,包括使用的第三方接口如百度、阿里,否则正式服无法访问
压缩代码小技巧:
提示:小程序的代码包只能是 2MB,如果主包太大,就要考虑分包处理
运行时勾选 运行是否压缩代码 这样会节约很大空间
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/158850fbf2ea401d93d88dfcdd9fb558~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)
七、常见问题
小程序引入微信api后,很多功能无法使用,例如获取位置信息,获取用户收获地址
小程序部分功能需要申请权限,开发管理->接口设置
按照对应的文档申请所需权限,根据微信文档添加在项目配置内即可
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f816fca1357a4780a0ccb8b0e9fcf4f2~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)
刚进企业派发小程序任务,如何进行开发?
先用git拉下项目
叫公司在微信公众平台把你的微信加入管理员
重新扫码微信开发者工具
如appId没有自动匹配就手动传入
|