微信小程序(六)-项目实例(原生框架 MINA基配搭建)==01-头搜索框tabbar

项目实例(原生框架 MINA)

1.新建小程序项目

　　1.用自已的小程序APPID

　　2.清除整理项目中初建默认无关的代码

　　　　1.app.json 中删除logs,同时删除pages下的losgs文件夹

　　　　2.app.wxss 中样式代码删除

　　　　3.app.js 中无关代码删除,新增app默认代码

               

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {

  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {

  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {

  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {

  }
})

app.js

　　　　4.index.wxml 中删除页面代码,加入代码 <view>首页</view>

　　　　5.index.wxss 中删除所有样式代码

　　　　6.index.js 中删除部分代码

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

index.js

　　　　 7.index.json 中配置标题  "navigationBarTitleText": "我的小区我做主!尉迟恭为你护航!"

　　　   8.删除utils文件夹

　　　   9.清除警告 "[sitemap 索引情况提示] 根据 sitemap 的规则[0]，当前页面 [pages/index/index] 将被索引"

　　　　在 project.config.json，找到 setting 配置对象，将 checkSiteMap 设置为 false 保存警告清除,如果没有加上这一项 "checkSiteMap":false .

2.初始化页面(定义基本样式)

page,view,text,swiper,swiper-item,image,navigator{
  padding:0;
  margin:0;
  box-sizing:border-box;
}

page{
  /* 原生CSS变量定义主题颜色(两个--加变量名),使用就是 var(--themeColosr) */
  --themeColosr:#1296db;
  /* 定义字体大小,根据屏幕的大小变化而变化,定义即生效! */
  font-size: 28rpx;
}

app.wxss

3.搭建项目结构(新建文件夹点击资源管理器最下面空白处) 

　　1.styles             存放公共样式

　　2.components 存放组件

　　3.lib                  存放第三方库

　　4.utils               自已的帮助库

　　5.request         自已的接口帮助库

4.搭建项目页面

　　01.全部服务 index

　　02 公共服务 public

　　03.门禁开门 door

　　04.贴心服务 service

　　　　1.上门代收垃圾

　　　　2.小区二手货源

　　　　3.送水上门服务

　　　　4.室内维修服务

　　05.我的信息 user

　　06.决策投票 decision

　　07.本幢事宜 block

　　08.小区趣事 story

　　09.小区账本 account

　　10.监督曝光 supervise

　　11.登录页面 login

　　12.授权页面 auth

　　13.意见返馈页面 feedback

　　14.订单页面 order

　　15.结算页面 pay

　　16.保安救助 help

　　17.停车信息 car

　　18.搜索页面 search

　　19.服务细则 contract

       20.社区信息

  "pages":[
    "pages/index/index",
    "pages/public/public",
    "pages/door/door",
    "pages/service/service",
    "pages/user/user",
    "pages/decision/decision",
    "pages/block/block",
    "pages/story/story",
    "pages/account /account ",
    "pages/supervise/supervise",
    "pages/login/login",
    "pages/auth/auth",
    "pages/feedback/feedback",
    "pages/order/order",
    "pages/pay/pay",
    "pages/help/help",
    "pages/car/car"
  ],

app.json(pages)

5.引入字体图标

　1.方法1:不能显示彩色

　　1.阿里巴巴图标库 https://www.iconfont.cn/ 收藏要用的图标

        

　　2.在styles下新建iconfont.wxss文件

　　3.将图标地址复制到IE地址栏打开,将所有有样式复制到小程序styles下的iconfont.wxss文件中

　　4.全局引入,在 app.wxss 中加入 @import"./styles/iconfont.wxss"; 这样全部页面就可以用了

　　5.页面中使用(不能显示彩色)

　　

　2.方法1:显示彩色

　　1.将图标下载到本地

      

　　2.全局安装iconfont 的字体文件包(在解下目录下输入cmd)

　　 

　　3.在管理器中运行 npm i -g iconfont-tools

　　 4.按装完后输入 运行iconfont-tools，直接回车,生成 iconfont-weapp文件　　

 　　

　　5.将生成的 iconfont-weapp 文件夹中的 iconfont-weapp-icon.wxss 样式文件复制到自己的项目中(放到 styles 文件夹下)

　　6.全局配置,在app.wxss中导入,在wxml文件中就可以使用了,注意属性的写法.

　　

　　7.调整图标的大小,打开图标样式文件 iconfont-weapp-icon.wxss 调整 .t-icon 中的宽和高即可

　　

6.搭建项目tabbar结构

　　 1.新建一个文件夹 icons 存放图片

　　2.将收藏的图标点下载存储为png图片(选2种色,黑色与红色)放到 icons 文件夹中

　　   

　　3.在app.json 中加入tabbar 属性,增加 tabbar (共5下)

  "tabBar": {
    "color": "#8a8a8a",
    "selectedColor": "#1296db",
    "backgroundColor": "#fafafa",
    "list": [
      {
      "pagePath": "pages/index/index",
      "text": "全部服务",
      "iconPath": "icons/01-indexw.png",
      "selectedIconPath": "icons/01-index.png"
    },
    {
      "pagePath": "pages/public/public",
      "text": "公共服务",
      "iconPath": "icons/02-publicw.png",
      "selectedIconPath": "icons/02-public.png"
    },
    {
      "pagePath": "pages/help/help",
      "text": "门禁开门",
      "iconPath": "icons/03-doorw.png",
      "selectedIconPath": "icons/03-door.png"
    },
    {
      "pagePath": "pages/service/service",
      "text": "贴心服务",
      "iconPath": "icons/04-servicew.png",
      "selectedIconPath": "icons/04-service.png"
    },
    {
      "pagePath": "pages/user/user",
      "text": "我的信息",
      "iconPath": "icons/05-userw.png",
      "selectedIconPath": "icons/05-user.png"
    }
  ]
  },

app.json(tabBar)

7.设置顶部 window 项

  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#1296db",
    "navigationBarTitleText": "我的小区我做主!尉迟恭为你护航!",
    "navigationBarTextStyle":"white"
  },

app.json

8.自定义组件(搜索框)

　　1.新建自定义组件SearchInput

　　

　　2.首页 index 中引用和使用组件(哪个页面使用就在哪个页面引用)

　　

　　3. 写样式,Less转CSS在线工具: http://www.atoolbox.net/Tool.php?Id=726

/* less代码
.searcd-input{
  height: 90rpx;
  padding:10rpx;
  background-color:var(--themeColor);
  navigator{
    height: 100%;
    display: flex;
    justify-content:center;
    align-items:center;
    background-color:#fff;
    border-radius:15rpx;

  }
}
*/
.searcd-input {
  height: 90rpx;
  padding: 10rpx;
  background-color: var(--themeColosr);
}
.searcd-input navigator {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 15rpx;
  color: #666;
}

SearchInput.wxss

　　4. 搜索框跳转到非tabbar搜索页面(open-type="navigate")

<view class="searcd-input">
  <navigator url="/pages/search/search" open-type="navigate">搜索</navigator>
</view>

SearchInput.wxml

微信小程序(六)-项目实例(原生框架 MINA)==02

微信小程序(五)-常见组件(标签)