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

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

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

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

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

image.png

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

image.png

二、新建项目

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

image.png

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

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

image.png

试运行:

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

image.png

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

image.png

配置微信开发者工具:

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

image.png

image.png

运行:

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

image.png

运行成功:

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

image.png

三、项目结构

image.png

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

3.1 manifest.json配置

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

image.png

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

3.2 pages.json

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

image.png

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 上按钮文字
{
   
   
    "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

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

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

例如: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插件市场:https://ext.dcloud.net.cn/plugin?id=1593

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

点击下载插件并导入HBuilderX

image.png

未登录uniapp的需要先登录

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

image.png

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">
    /* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
    @import "@/uni_modules/uview-ui/index.scss";
</style>

五、愉快的开始写代码

六、发布

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

image.png

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

image.png

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

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

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

image.png

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

压缩代码小技巧:

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

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

image.png

七、常见问题

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

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

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

image.png

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

  • 先用git拉下项目
  • 叫公司在微信公众平台把你的微信加入管理员
  • 重新扫码微信开发者工具
  • 如appId没有自动匹配就手动传入
相关文章
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的科研项目验收管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的科研项目验收管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的志同道合交友网站演示的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的志同道合交友网站演示的详细设计和实现
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的新闻资讯系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的新闻资讯系统的详细设计和实现
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的美食烹饪互动平台的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的美食烹饪互动平台的详细设计和实现
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的多媒体素材库的开发与应用的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的多媒体素材库的开发与应用的详细设计和实现
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的大学生心理健康管理系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的大学生心理健康管理系统的详细设计和实现
|
11天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
11天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
11天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
1天前
|
小程序 API 数据安全/隐私保护
微信小程序开发中的一些常用标签
这些标签是微信小程序开发中的基础,开发者可以根据需要组合使用这些标签来构建小程序的界面。每个标签都有其属性和事件,可以通过属性来调整组件的样式和行为,通过事件来响应用户的操作。
13 5

热门文章

最新文章