新建项目目录,配置小程序
选择uniapp默认模板,在manifest.json中选择“微信小程序配置”
打开微信开发工具
然后Hbuilder中打开运行到微信小程序
**
到这里配置好了,也运行了,但是微信开发工具中报错 app.json 找不到,最终解决办法 在project.config.json文件中需要加配置
**
"miniprogramRoot": "unpackage/dist/dev/mp-weixin/"
到这里就运行成功了!!!
使用uView注意事项
在uniapp插件中心下载uView
根据uView官网:https://uviewui.com/components/install.html
根据官网说明配置安装:https://uviewui.com/components/downloadSetting.html
App.vue页面引入公共样式
<style lang="scss">
@import "@/uni_modules/uview-ui/index.scss";
</style>
main.js页面
import Vue from 'vue'
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
pages.json页面进行easycom配置
"easycom": {
"autoscan": true,
"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
}
注意事项:样式覆盖兼容性
为了避免样式被用户覆盖,或者被污染,一般组件或者页面都会给style标签加上scoped属性,如下演示为一个组件的内部构造:
我们在页面中引入上方的item组件,并且想修改它的border边框为颜色(blue),一般通过v-deep或/deep/指令修改,如下写法:
::v-deep .item {
border: 1px solid blue;
}
但是!!!在App和H5正常,但是在微信小程序无效,它要求::v-deep或/deep/前面必须还要有父元素的类名存在,如下:
<style scoped lang="scss">
.wrap ::v-deep .item {
border: 1px solid blue;
}
</style>
项目安装插件(dayjs)
- 如果提示没有package.json,就进入终端先执行npm init -y
- npm install dayjs
- 全局引入在main.js中注册
- import dayjs from "dayjs"
- Vue.prototype.$dayjs = dayjs
- 页面引用
this.monthVal = this.$dayjs(value.value).format('YYYY/MM')`
- 局部引用,在所需要的页面
import dayjs from 'dayjs';
- 页面引用
this.monthVal = dayjs(value.value).format('YYYY/MM')`
今天先到这里吧!!!!后续遇到问题再添加