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

街头炒河粉2024-04-22 17:11

我正在参加「掘金·启航计划」

最近微信小程序又掀起一波风潮,本文站在新手的角度出发,比较适合第一次使用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/

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

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

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

二、新建项目

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

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

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

试运行：

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

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

配置微信开发者工具：

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

运行：

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

运行成功：

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

三、项目结构

文件名 用途
pages 用于放置页面文件
static 静态文件位置
App.vue 主文件 同vue
main.js 同vue
manifest.json 项目配置(下文详讲)
pages.json 页面配置(下文详讲)
uni.scss 全局样式文件

3.1 manifest.json配置

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

配置 作用
AppID 填写刚才在微信公共平台获取注册的 AppID
ES6转ES5 可以勾选 兼容
上传代码时样式自动补全 可以勾选 自动补全
上传时自动压缩 勾选 压缩代码
检查安全域名和TLS版本 不勾选 方便开发
位置接口 此配置需要 在微信公众平台申请相应的接口
unPush2.0 消息推送 需要申请
开启云端一体安全网络 加强安全（暂不演示）

3.2 pages.json

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

pages配置

pages 数组第一项表示启动项 相当于首页,每新增一个页面 要在pages数组新增一个对象
path 文件路径
style 页面样式 下面为style详细配置
navigationBarTitleText 导航栏标题文字
navigationBarTextStyle 导航栏标题颜色，仅支持 black/white
navigationBarBackgroundColor 导航栏背景颜色
backgroundColor tab 的背景色
navigationStyle 导航栏样式，仅支持 default/customm,开启 custom 后，所有窗口均无导航栏,如使用自定义导航栏 需要设置custom
enablePullDownRefresh 是否开启下拉刷新
onReachBottomDistance 页面上拉触底事件触发时距页面底部距离，单位为px

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

tabBar 配置

tabBar 解析
color tab文字默认颜色
selectedColor tab选中时的颜色
borderStyle tab上边框的颜色，仅支持 black/white
backgroundColor tab 的背景色
position 位置 可选值 bottom、top
list 数组 以下为数组对象详解
pagePath 页面路径，必须在 pages 中先定义
iconPath 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片
selectedIconPath 选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效
text tab 上按钮文字
js 复制代码 
{
	"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

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"
		}
	}
}
  • 调用 wx.getAccountInfoSync().miniProgram.envVersion获取微信环境
  • develop-开发预览版 trial-体验版 release-正式版

4.2封装请求

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

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

使用：

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

例如：

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

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

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

js 复制代码 
    import {getUserInfo} from '../../api/user.js'

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

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

未登录uniapp的需要先登录

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

uview基于sass所以先下载sass

js 复制代码 
// 安装sass
npm i sass -D

// 安装sass-loader
npm i sass-loader -D

配置main.js

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主题文件

js 复制代码 
//文件最上方
@import '@/uni_modules/uview-ui/theme.scss';

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

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

五、愉快的开始写代码

六、发布

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

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

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

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

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

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

压缩代码小技巧：

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

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

七、常见问题

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

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

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

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

  • 先用git拉下项目
  • 叫公司在微信公众平台把你的微信加入管理员
  • 重新扫码微信开发者工具
  • 如appId没有自动匹配就手动传入
相关推荐
m0_7482361119 分钟前
Calcite Web 项目常见问题解决方案
开发语言·前端·rust
Watermelo61731 分钟前
详解js柯里化原理及用法，探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
m0_7482489433 分钟前
HTML5系列（11）-- Web 无障碍开发指南
前端·html·html5
m0_7482356144 分钟前
从零开始学前端之HTML（三）
前端·html
一个处女座的程序猿O(∩_∩)O3 小时前
小型 Vue 项目，该不该用 Pinia 、Vuex呢？
前端·javascript·vue.js
hackeroink6 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss
迷雾漫步者7 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-8 小时前
验证码机制
前端·后端
燃先生._.9 小时前
Day-03 Vue（生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤）
前端·javascript·vue.js
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10树莓派 5 AI 套件（Hailo-8L）使用教程