小程序demo项目实践

2023-11-03 13:53:46

今天开始做一个简单的小程序，做的过程中势必会有一些知识经验需要记录

项目初始化

首先创建好一个小程序项目，在app.wxss里面将自带的css样式统统去除，加上自己写的初始化样式

小程序目前不支持*号通配符

page,view,image,swiper,swiper-item,navigator,video{
  box-sizing: border-box;
}

将app.js中的原始逻辑去除一下，然后输入app+回车，会自动列出一个初始化的js结构

之后，再清理一下首页中的index.wxml、index.wxss、index.js中的内容；

同样的在index.js中输入Page+回车，初始化一下代码结构

编辑头部组件

首先在跟目录建立components文件夹，然后建立MyTitle文件夹，再在这个文件夹上右键建立component，名字叫MyTitle

小程序demo项目实践

然后我们先让这个title组件在首页汇总显示出来，在index.json中设置一下

{
  "usingComponents": {
    "MyTitle":"../../components/MyTitle/MyTitle"
  },
  "navigationBarTitleText": "bilibili"
}

然后在index.wxml中引入

<view class=‘main‘>
  <!-- 头部公共标签 -->
  <MyTitle></MyTitle>
</view>

码农公寓