手把手教你用uniapp开发微信小程序(1)

405 阅读2分钟

「这是我参与11月更文挑战的第2天,活动详情查看:2021最后一次更文挑战

使用uniapp会带来什么好处

  • uniapp是基于vue技术栈的框架,如果你们原本的技术栈是使用vue的话,那么使用uniapp上手开发小程序代码会减少学习成本,方便快速上手开发
  • uniapp可以通过一套代码,编译成多个平台运行的代码,减少开发的工作量,为多平台部署带来方便。

使用uniapp创建项目

我们选择采用vue-cil的方式来创建项目,实际上有两种方式创建项目,一种是通过下载uniapp的官方编辑器,然后选择创建自带模版项目。另一种就是通过命令行vue create -p dcloudio/uni-preset-vue my-project来创建项目。在创建的过程中会让你选择项目模板,我们选择默认模板就可以了。创建后的目录如下,在开发的时候,还需要安装微信开发者工具,可以使用其他编辑器编写代码,也可以使用uniapp自带的编辑器,自带的编辑器在代码运行以及代码发布上面会更加的便捷。
在使用自带的编辑器中将项目导入后可以看见项目的整体目录结构如下 image.png

运行一下,看一下效果,选择微信开发工具运行,运行项目则是看你当前代码页在哪个项目里面,可以比较快捷的切换运行项目

image.png

image.png

和微信小程序一样,在page.json里面配置页面,所有的页面都需要在这里注册,就像router一样,navigationBarTitleText则是设置该页面顶部标题。而页面vue文件则放在/src/page文件夹里面,

image.png

"pages": [ //pages数组中第一项表示应用启动页
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "小程序首页"
			}
		}
	],

在了解我们的页面和page.json关系之后,我们就可以通过修改page.json如下来创建三个tabbar页面 ,这样就有了一个基本的架子

"pages": [ //pages数组中第一项表示应用启动页,
    {
            "path": "pages/home/home",
            "style": {
                    "navigationBarTitleText": "首页"
            }
    },
    {
    	"path": "pages/classify/classify",
    	"style": {
    		"navigationBarTitleText": "分类"
    	}
    },
    {
    	"path": "pages/my/my",
    	"style": {
    		"navigationBarTitleText": "我的"
    	}
    }
	],
  "tabBar": {
  	"backgroundColor": "#ffffff",
  	"color":"#A1A1A1",
  	"selectedColor":"#333333",
  	"list": [
  		{
  			"pagePath": "pages/home/home",
  			"text": "首页"
  		},
  		{
  			"pagePath": "pages/classify/classify",
  			"text": "分类"
  		},
  		{
  			"pagePath": "pages/my/my",
  			"text": "我的"
  		}
  	]
  },

image.png