从零开始uniapp微信小程序项目到发布（超级详细）_hbuilder怎么发布unapp到微信小程序

最近微信小程序又掀起一波风潮,本文站在新手的角度出发,比较适合第一次使用uniapp 开发微信小程序的伙伴，或者没有过实战经验的小伙伴参考,从零搭建uniapp小程序项目

一、开发前的准备

1.1 下载工具

hbuilder首页：https://www.dcloud.io/hbuilderx.html

下载hbuilder编辑器,选择对应的系统,Windows和mac正式版即可,下载好安装路径不要放在C盘,此编辑器作为主要开发编辑器

微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

下载微信开发者工具,选择对应的系统,正式版即可,下载好安装路径不要放在C盘,此工具主要用于开发是预览小程序

1.2 申请微信小程序

微信公众平台：https://mp.weixin.qq.com/

进入微信公众平台-> 点击立即注册-> 点击小程序-> 点击前往注册

填写信息。注意:邮箱需要，未被微信公众平台注册，未被微信开放平台注册，未被个人微信号绑定的邮箱

注册好后,扫码登陆平台,页面向下滚动,找到左边的开发,选择开发管理,右边页面选择开发设置,这里会有一个AppID,作为绑定开发者工具用(注意不要暴露,使用在后文)

二、新建项目

打开hbuilder编辑器选择文件->新建->项目

这里uniapp会提供很多初始化模板,可根据需求选择,此文以默认模板作为演示

• 填写项目名称
• 选择项目存放的路径
• vue版本选择（此文以通俗易懂的2.0作为演示,3.0大同小异）
• 默认不启用 uniCloud和git
• 点击创建

试运行：

可能会出现没有配置微信开发工具情况,此时需要配置微信开发者工具路径

点击浏览 选择刚才安装微信开发者工具安装路径

配置微信开发者工具：

设置->安全设置-》开启服务端口

运行：

运行->运行到小程序模拟器->微信开发者工具

运行成功：

微信开发者工具会自动弹出来,可能没登录需要扫码登录微信开发者工具

三、项目结构

3.1 manifest.json配置

此文主要用于开发微信小程序,其他的配置可以暂时不管,选择微信小程序配置

3.2 pages.json

注意：此代码为伪代码,只为示例作用，方便查看属性配置使用 无法运行,需要自行配置需要的属性

pages配置

globalStyle全局配置 等同于pages 是单独的对象

tabBar 配置

{
	"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": "购物车"
		}]
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

四、封装网络请求

4.1配置环境变量

根目录下新增 common文件夹 新建文件operate.js

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"
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• 调用 wx.getAccountInfoSync().miniProgram.envVersion获取微信环境
• develop-开发预览版 trial-体验版 release-正式版

4.2封装请求

在common文件夹 新建文件request.js

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

• 判断环境 不同的url
• data需要给默认值 {}
• header可以自定义 比如请求头的token 根据项目配置获取方式,例如uni.getStorageSync(‘Admin-Token’)
• success 请求成功的情况下 如果code和后端商量不等于200 的情况返回什么 msg是根据后端定义的错误提示字段
• 可以自行封装需要函数,如全局Loading效果之类

使用：

可统一新建api文件存放不同 页面的api请求

例如：

例如：user.js 这里统一存放关于用户的请求

import http from '../common/request.js'
export function getUserInfo() {
  return http({
    url: '/getUserInfo',
    method: 'post',
  })
}

1
2
3
4
5
6
7
8

单个页面使用： 直接导入方法即可

    import {getUserInfo} from '../../api/user.js'
1

或者 全局封装：在main.js里面复制以下函数 个人不是特别喜欢这种方式

import request from './common/request.js'
Vue.prototype.$request = request

//文件内部使用 G
this.$request({url,method，data})
1
2
3
4
5

四、引入ui框架

此文以uview2.0为例

uniapp uView2.0插件市场:https://ext.dcloud.net.cn/plugin?id=1593

uview官网:https://www.uviewui.com/

点击下载插件并导入HBuilderX

未登录uniapp的需要先登录

此时hb会弹框,选择项目点击确定

uview基于sass所以先下载sass

// 安装sass
npm i sass -D

// 安装sass-loader
npm i sass-loader -D
1
2
3
4
5

配置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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

配置uni.scss 全局uview主题文件

//文件最上方
@import '@/uni_modules/uview-ui/theme.scss';
1
2

配置App.vue 引入uView基础样式

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "@/uni_modules/uview-ui/index.scss";
</style>
1
2
3
4

五、愉快的开始写代码

六、发布

uniapp编译后可以点击微信开发者工具的上传按钮

打开微信公众平台 选择版本管理 右侧可以看到开发版本 ,如只有一个版本会默认开发版本,如需要发布正式版本点击提交审核就可以,审核周期第一次稍微长一点，后续修改代码就很快

等待审核后就自动发布成功

注意事项： 正式服需要配置合法请求

入口：开发管理->开发设置

注意：所有相关请求都需要配置进去,包括使用的第三方接口如百度、阿里,否则正式服无法访问

压缩代码小技巧：

提示：小程序的代码包只能是 2MB,如果主包太大，就要考虑分包处理

运行时勾选 运行是否压缩代码 这样会节约很大空间

七、常见问题

小程序引入微信api后，很多功能无法使用,例如获取位置信息,获取用户收获地址

小程序部分功能需要申请权限,开发管理->接口设置

按照对应的文档申请所需权限,根据微信文档添加在项目配置内即可

刚进企业派发小程序任务,如何进行开发?

• 先用git拉下项目
• 叫公司在微信公众平台把你的微信加入管理员
• 重新扫码微信开发者工具
• 如appId没有自动匹配就手动传入