uniapp项目实战系列(2):新建项目,项目搭建,微信开发工具的配置

简介: uniapp项目实战系列(2):新建项目,项目搭建,微信开发工具的配置

1.新建项目

打开uniapp的开发工具(HBuilder X),点击左上角的文件》新建》项目

选择左侧栏的uniapp(一般默认打开就是),然后给项目命名为hm_shop,给项目设置存放路径,选择vue2版本,开启gitcode代码托管(如何开启开启gitcode代码请看前期准备

右下角弹出

2.托管项目的操作:(无勾选托管项目可无视)

项目创建成功后出现弹窗,输入内容(可自定义),然后点击托管

弹出提交的弹窗,写上更新日志并且勾选上设置作者日期和设置作者,然后点击提交并推送

直接点击确定就开始上传了

右下角显示成功托管

项目网址(点击跳转)

3.项目编译预览

3.1游览器编译

选中项目点击上方导航栏的运行》运行到游览器》游览器(选你喜欢的游览器进行打开)

编译成功出现此页面(电脑的F12可以快捷打开网页调试,F12打不开就使用win+F12)

3.2微信小程序编译

1.为开发工具配置微信开发者工具路径

2.选中项目点击上方导航栏的运行》运行到小程序模拟器》微信开发者工具(如果你的微信开发者工具未登录需要登陆一下)

3.3微信开发者工具不校验域名和开启安全设置服务端口

3.4微信开发者工具生成测试号或者注册一个小程序生成啊AppId,编辑器上配置

同时你会发现微信开发者工具提示你,明明你登陆了但是你还是在游客模式


4.删掉初始内容

找到项目中的index.vue页面

将页面删除为这个模样

小程序上的预览变化为这个样子


相关文章
|
25天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
166 3
|
1月前
|
移动开发 小程序 数据可视化
微信小程序可视化开发工具之动态数据
微信小程序可视化开发工具之动态数据
37 3
|
1月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
34 2
|
30天前
|
存储 移动开发 小程序
uniapp富文本editor输入二次扩展兼容微信小程序
uniapp富文本editor输入二次扩展兼容微信小程序
53 0
|
3月前
|
移动开发 JavaScript 前端开发
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
这篇文章介绍了在UniApp H5项目中处理跨域问题的两种方法:通过修改manifest.json文件配置h5设置,或在项目根目录创建vue.config.js文件进行代理配置,并提供了具体的配置代码示例。
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
|
3月前
|
人工智能 小程序 Java
【工具】轻松解锁SQLite数据库,一窥微信聊天记录小秘密
本文介绍了一款名为PyWxDump的开源工具,它可以获取微信账户信息、解密SQLite数据库以查看和备份聊天记录。此工具适用于已登录电脑版微信的用户,通过GitHub下载后简单几步即可操作。适合对数据恢复感兴趣的开发者,但请注意合法合规使用并尊重隐私。
450 2
【工具】轻松解锁SQLite数据库,一窥微信聊天记录小秘密
|
1月前
|
小程序
uniapp实现微信小程序隐私协议组件封装
uniapp实现微信小程序隐私协议组件封装
40 0
|
1月前
|
JavaScript
vue尚品汇商城项目-day06【43.微信支付业务】
vue尚品汇商城项目-day06【43.微信支付业务】
32 0
|
2月前
vue3+uniapp配置路由导航守卫
vue3+uniapp配置路由导航守卫
|
25天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
381 7
下一篇
无影云桌面