玩转微信小程序 （初始化）

目录

• 第三方框架
• 搭建项目目录结构
  • app.js 初始化构建
• 阿里字体库
  • 引入字体库的步骤
• 初始化页面编写
  • TabBar
  • App.wxss
    • 定义全局默认样式
    • 定义全局颜色 字体

第三方框架

1.腾讯wepy 语法类似vue
2.美团 mpvue 语法类似wue
3.京东taro 语法类似react
4.滴滴 chameleon
5.uni-app类似 语法类似vue
6.原生框架MINA

搭建项目目录结构

styles ———— 存放公共样式
components ———存放组件
lib ————存放第三方库
utils ————自己的帮助库
request ——自己的接口帮助库

app.json 全局配置文件
app.wxss 全局样式文件

app.js 初始化构建

//app.js
App({
  //onLaunch,onShow: options(path,query,scene,shareTicket,referrerInfo(appId,extraData))
  onLaunch: function(options){
    
  },
  onShow: function(options){

  },
  onHide: function(){

  },
  onError: function(msg){

  },
  //options(path,query,isEntryPage)
  onPageNotFound: function(options){

  },
  globalData: {
    
  }
});

标准初始化目录结构

优化结构目录

小技巧：长按中键与Alt 键 （如下效果）

阿里字体库

跳转链接

引入字体库的步骤

1.打开阿里巴巴字体图标网站
2.选择的图标
3.添加至项目
4.下载到本地
5.将样式文件由Css修改为WXss
6.小程序中引入

初始化页面编写

TabBar

位于 app.json

注意： 在微信小程序中不支持通配符

App.wxss

定义全局默认样式

/* 在微信小程序中 不支持 通配符 '*' */
page,view,text,swiper,swiper-item,image,navigator{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

定义全局颜色 字体

 page{
   /* 定义主题颜色 */
   --themeColor:#eb4450;
   /*
    定义统一字体大小  假设设计稿 大小是 375px 
    1px= 2rpx
    14px = 28rpx
     */
     font-size: 28rpx;
 }

使用定义的属性

view  {
   color : var(--themeColor) ;
}