加入新公司的第一个月,我就接到了一个小程序的任务。对于前端公司来说,真正的意思是自由和自由,有好有坏。优点是看原生小程序文档感觉不舒服,于是研究了一波用vue写的,于是找到了Uni-app,就开始写了。官方推荐使用HbuildeX,我用了一段时间。(其实我并不想在打开这个IDE的时候使用它)
一.开发前的准备
自己设置这些啦啦啦
二.在vscode中开发
先安装插件
由于使用小程序api,建议安装小程序开发助手vscode插件
第一个插件,enmm,忽略(我是来写代码的,不是来钓鱼的)
当然你还需要安装vue语法检查插件Vetur(你肯定已经安装了,想用vue写小程序)
开始开发
来看看长什么样子(忽略美颜,毕竟没有什么特别的UI,我是没有美颜的前端小哥)
一.创建项目
打开你最喜欢的 powershell 并编写
vue create -p dcloudio/uni-preset-vue mygreatepro
// 后面是随便你的名字
复制代码
选择模板,默认模板,直接回车,喜欢TS的可以选择TS(谁能教我怎么写TS,大佬)
那就拭目以待,看看
别听他的,我们要写的是一个小程序,我们应该进入项目文件夹并执行
npm run dev:mp-weixin // 开发阶段
npm run build:mp-weixin // 发布阶段
复制代码
二、去上班1.打开你用vscode创建的项目文件夹
除了那几个文件,其他由脚手架创建的项目看起来都一样。他们更熟悉,更舒服(我只是讨厌微信小程序的原生框架)
2.在开发者工具中预览
刚才我们执行 npm run dev:mp-weixin 后,可以直接打开开发者工具,导入项目
先别写appid,反正这里没写,导入就行
如果你已经申请了,请使用你的vscode,找到manifest.json文件打开,找到这个地方
"mp-weixin": { /* 微信小程序特有相关 */
"appid": "这里写appid",
"setting": {
"urlCheck": false
},
"usingComponents": true
}
复制代码
然后去预览看看这个:
完成
3.开始开发
看看网上有什么
你觉得丑我就打人
1.分析需求
三个标签页,显然需要登录授权开发微信小程序,外加一个登录页面。
OK,先准备好页面
别忘了写在pages.json里,让微信处理(微信说的)
因为是tab标签 微信小程序开发 ,所以还需要在pages.json中配置tabBar
"tabBar": {
"color": "#8a8a8a",
"selectedColor": "#d4237a",
"backgroundColor": "#fff",
"position": "bottom",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/anchor/index",
"text": "主播",
"iconPath": "static/tabar/1-1.png",
"selectedIconPath": "static/tabar/1.png"
},
{
"pagePath": "pages/withdraw/index",
"text": "提现",
"iconPath": "static/tabar/2-1.png",
"selectedIconPath": "static/tabar/2.png"
},
{
"pagePath": "pages/mine/index",
"text": "我的",
"iconPath": "static/tabar/4-1.png",
"selectedIconPath": "static/tabar/4.png"
}
]
}
复制代码
可以看到对应的静态图片等文件都放在了static下,但是请注意css样式的文件不能放在这里,否则编译不成wxss,然后纠结了半天写在里面徒劳的
以上都是写的,是的,可以在开发者工具中看到
就是这样。
2.打开按钮
我正在使用 scss 所以需要 yarn add sass-loader node-sass
dlould提供uni-ui框架,组件丰富,使用
1.uni-ui使用步骤
建议直接在 npm @dc 上查看…
2.在我的锚页面上使用 wave
类似于标签标签的组件,称为segmenter
2.找到对应的要使用的组件名,替换成uniSegmentedControl
3.找html结构,可以在插件市场搜索你需要的每个插件的名字,注意不要有uni前缀
4.找到后开发微信小程序,根据文档,放到模板中使用
插件地址:/plugin?id=5…
注:坑就来了,文档中处理不同视图切换的点击事件的示例代码
下面是e,上面的参数还是index,这个没问题,注意把index改成e。
Tips:如果发现小程序的预览没有变化开发微信小程序,可以重新编译。有时新组件需要偶尔重新编译。
然后现在预览发现
完成
发现、改变
探知、求新
共享,感恩一路相伴
昱远品牌形象已完成全面升级
点击访问新官网