uniapp开发小程序记录

---

---

新建项目目录，配置小程序

选择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')`

今天先到这里吧！！！！后续遇到问题再添加