UniApp小程序开发项目创建与运行
1.准备工作:HbuiderX + 微信开发者工具下载安装+小程序账号申请开通(这里就不例举了,可以看同账号uniapp小程序开发准备)
2.创建项目
新版本的HbuilderX点击新建项目——选择uni-app——选择默认模板——输入项目名称——选择Vue版本(此随笔是前后端分离开发,不使用UniCloud云开发)
3.目录有用介绍
里面基本包含
pages文件夹——存放页面,等同于Vue中的view
static文件夹——存放静态资源,类似于Vue中的assets
App.vue存放每个页面的公共部分——像是下拉刷新或者分享小程序需要放在App.vue中的生命周期中
index.html——根
main.js——入口文件
* manifest.json——项目配置文件(重要)在里面可以进行分享功能、小程序的Appid等重要功能配置
pages.json——页面路由等配置(在创建文件的时候它会自动添加路由,如果使用到分包需要自己去进行修改、以及对整个小程序的表头或者TabBar等进行配置)
4.配置小程序开发者工具调试
选择运行——运行到小程序模拟器——运行设置 找到小程序运行配置 —— 点击浏览选择微信开发者工具.exe 保存后即可
5.配置manifest.json文件
将自己申请的小程序APPID填写到微信小程序配置中的微信小程序AppID中
6.启动项目
选择运行——运行到小程序模拟器——微信开发者工具(第一次启动会有一些慢且需要自己扫码登陆,选择自己当前的小程序项目即可)
7.配置微信开发者工具
右上角详情进行开发设置
建议开启将JS编译为ES5、不校验合法域名其他自动开启的就不用关闭了
在基本信息可以看到自己的发布状态和appid等信息
8.根据需求开发
以上就是UniApp创建和运行小程序项目的步骤了
小白第一次写博客,如有错误请指正,感谢
UniApp小程序开发项目创建与运行的更多相关文章
- (转)微信小程序开发项目——笑话大全
此项目是学习完微信小程序后实现的一个demo,采用聚合数据的免费api获取最新的文本笑话和趣图(图片和gif图) 项目地址:https://github.com/zhijieeeeee/wecha ...
- 微信小程序开发项目过程中的一个要注意事项
在微信小程序开发过程中,有时候会用到常用的一些特殊字符如:‘<’.‘>’.‘&’.‘空格’等,微信小程序同样支持对转义字符的处理, decode属性默认为false,不会解析我们的 ...
- 1-微信小程序开发(安装软件和运行第一个微信小程序)
https://developers.weixin.qq.com/miniprogram/dev/ 我的 打开 上传成功后
- 这是一篇满载真诚的微信小程序开发干货
1月9日零点刚过,张小龙与团队正式发布微信小程序.它究竟能在微信8.5亿用户中牵动多少人,现在还很难说.但对于创业者来讲,小程序无疑带来了新契机,以及服务“上帝”们的新方式. 从今天起,只要开发者登录 ...
- 微信小程序开发注意事项(优化项)
最近公司有一个小程序开发项目,自己也自学了不少,有一些开发小心得,记录在这里. 小程序开发中注意: 1,setData 小程序视图层和逻辑层在两个独立的模块,并不具备数据直接传递的,setData相当 ...
- 小程序开发:用原生还是选框架(wepy/mpvue/uni-app/taro)?
小程序开发:用原生还是选框架(wepy/mpvue/uni-app/taro)? 自 2017-1-9微信小程序诞生以来,历经2年多的迭代升级,已有数百万小程序上线,成为继Web.iOS.Androi ...
- 【重点突破】—— UniApp 微信小程序开发官网学习One
一.初步认识 uni-app官网:https://uniapp.dcloud.io/component/README HBuilderX官方IDE下载地址: http://www.dcloud.io/ ...
- uni-app 小程序从零开始的开发流程
前言 本文基于 HBuilderX 3.1.22 + 微信开发者工具 1.05.2106300为主要内容进行说明. 文档版本:1.0.0 更新时间:2021-09-03 15:32 一.准备 uni- ...
- 【腾讯Bugly干货分享】微信小程序开发思考总结——腾讯“信用卡还款”项目实践
本文来自于腾讯bugly开发者社区,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/58212d0fa7a7574c4f4cc3c5 作者:peggy 小程序概述 1 ...
- 微信小程序开发01 --- 微信小程序项目结构介绍
一.微信小程序简单介绍: 微信官方介绍微信小程序是一个不需要下载安装就可使用(呵呵,JS代码不用下载吗?展示的UI不用下载吗?)的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用. ...
随机推荐
- 并发QPS公式估算
一.经典公式1: 一般来说,利用以下经验公式进行估算系统的平均并发用户数和峰值数据 1)平均并发用户数为 C = nL/T 2)并发用户数峰值 C' = C + 3*根号C C是平均并发用户数,n是l ...
- .NET实验三
实验名称:实验三 Windows 应用程序开发 一. 实验目的 1. 掌握窗口控件的使用方法: 2. 掌握 Windows 的编程基础. 二. 实验要求 根据要求,编写 C#程序,并将程序代码和运 ...
- Django数据迁移介绍
1.简介 迁移是 Django 将你对模型的修改(例如增加一个字段,删除一个模型)应用至数据库表结构对方式 2.基本命令 python manage.py migrate---负责应用和撤销迁移 py ...
- 转发:基于pnpm + lerna + typescript的最佳实践
Part1 Pnpm pnpm是一款当代受欢迎 新兴(问题较多) 的包管理工具. 为什么会出现pnpm?因为yarn的出现并没有满足作者的一些期待,反而有些失望. After a few days, ...
- Selenium协议
Selenium驱动浏览器使用的协议是什么? JsonWireProtocol 是通过webdriver与remote sever进行通信的web service协议.通过http请求,完成和remo ...
- Weblogic禁用不安全的http请求
参考链接: https://blog.csdn.net/linfanhehe/article/details/78470733
- ubuntu14.04 cm12.0 genymotion
前几天在ubuntu14.04编译过android5.0.1源码,但是呢?不知怎么运行不起来,后来又试了试把img文件在win平台运行虚拟机不知怎么还是不行,再后来想通过刷机运行学习framework ...
- scala apply方法和update方法
示例代码1 class TestApplyClass { def apply(param: String): String = { println("apply method called, ...
- Keil Jlink没法找到STM32H750
https://www.amobbs.com/thread-5713382-1-1.html MDK使用的是5.32,jlink使用的是9.2jlink驱动使用的是6.44b 删除工程下的JLinkS ...
- 【Beat】Scrum Meeting 1
时间:2021年6月26日 1.各个成员今日完成的任务以及贡献小时数 姓名 今日完成任务 贡献小时数 鑫 编写软件的功能测试方案文档,录制视频演示软件系统安装配置过程 4 荣娟 编写软件的功能测试方案 ...