【微信小程序】1 - 基础配置、页面创建、生命周期

{
  "pages": [  //页面
    "pages/index/index",   //不能加后缀，由4个文件组合而成
    "pages/logs/logs"    //每个{}内最后一项不能加, 加了， 编译会报错
  ],
  "window": {  //窗口配置--全局配置
    "backgroundTextStyle": "dark",    //light/dark --页面刷新时loading点的变化效果
    "navigationBarBackgroundColor": "#000",   //头部背景色
    "navigationBarTitleText": "我的微信",    //导航头部的文本
    "navigationBarTextStyle": "white",   //头部文字颜色
    "enablePullDownRefresh": true,    //开启下拉刷新
     "backgroundColor": "#ddd"   //下拉刷新时的背景色
  },
  "sitemapLocation": "sitemap.json"   //站内地图/站内导航/站内搜索，具体搜索情况在sitemap.json中写的，搜索小程序时，是否被收录
}

3.2 配置底部触摸栏

触摸栏不是菜单，至少放2项，最多放5项

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "我的微信",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true,
     "backgroundColor": "#ddd"
  },
  "sitemapLocation": "sitemap.json",
  //--------------配置底部触摸栏--------输入“tabbar"  回车，会帮我们补全代码---------
  "tabBar": {   //底部触摸栏
    "borderStyle": "black",  //边框色
    "selectedColor": "#000000",//选中色，选中时字体的颜色
    "list": [
      {
        "pagePath": "pages/index/index",   //点击跳转的路径，路径格式按照pages里的路径格式来写，如果这个链接在页面中有跳转，设置为底部触摸栏后，页面的跳转就会失效
        "text": "首页",    //文本
        "iconPath": "/images/icon_1.png",   //图标，新建一个和pages同级的文件夹images
        "selectedIconPath": "/images/icon_11.png"   //选中图标
      },{
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "/images/icon_2.png",
        "selectedIconPath": "/images/icon_22.png"
      }
    ]
  }
}

4、新页面的创建及组成

4.1 微信新页面的创建方式有3种

1.从app.json文件开始创建

app.json中的pages里加一条路径，然后编译就会生成对应的文件夹
一个页面由4个文件组成，

2.单个文件逐一创建

pages右键新建目录（写文件夹名）–然后再右键新建page 就会生成对应的文件夹，同时在app.json中生成对应的路径

3.删除文件后的编译自动创建

4.2 展示新建页面

1.app.json中：把要查看的页面放在第一个路径的位置

  "pages": [
    "pages/index/index",   //第一个路径称为基础路径，默认显示这个路径里的内容，起始页位置
    "pages/logs/logs",
    "pages/about/about"
  ],

添加编辑模式

4.3 组成页面结构的不同文件

WXML -> HTML
WXSS -> CSS
JS -> Javascript
JSON -> Javascript（json对象）
App -> application

编码要求：

不能直接使用HTML文件，没有div,span等
可以全部使用CSS文件
Js脚本文件没有Window对象

wxml中常用标签：
text标签：相当于html里的font+span,内联级元素
view标签：相当于div标签，块级元素

5、生命周期

微信小程序每个页面都有一个生命运行周期可以操作，同时小程序本身也自带对象的创建生命周期

生命周期名称，事件名

onLaunch： -> 创建小程序最开始的对象的一个初始化的方法，完成刚开始结构化的操作，小程序App的对象初始化（打开那一刻）要完成的功能
onload -> 生命周期函数 - 监听页面加载
pages里每个页面打开的时候，每个页面初始化的时候会启动onload
onReady -> 生命周期函数 - 监听页面初次渲染
所有渲染都完成后的方法提示
onShow -> 生命周期函数 - 监听页面显示
onHide -> 生命周期函数 - 监听页面隐藏
onUnload -> 生命周期函数 – 监听页面卸载
不需要我们操作，微信给我们完成

onPullDownRefresh -> 页面监听相关处理函数 – 监听用户下拉动作
onReachBottom -> 页面上拉触底事件的处理函数
onShareAppMessage -> 用户点击右上角分享

任何一个小程序都是一个叫做App的对象，所以小程序的入口是从app.js 里创建app开始的

6、微信小程序调试步骤

逻辑代码调式方法

控制台显示方式 console.log() console.info()
弹出框(API框架时介绍)

show(){
	wx.showToast({     //等于alert,但因为小程序里没有window，所以不能alert
		title:'弹窗内容',
	})
}

模拟，真机调式模式
点击编译，预览，真机调试

7、微信小程序上线审核和发布

点击上传是上传到微信云，这个云关联到我们的公众号，也就是上传时上传到微信公众平台（订阅号或者服务号）—进入小程序管理 进行关联
只有关联后，以后上传就上传到公众平台，由公众平台进行发布

微信开放平台 – 主要是安卓，ios移动端原生开发的接口的操作

微信公众平台 – 主要是微信的小程序，小游戏的操作（微信公众平台需要是订阅号或者服务号）

8、基础组件的使用-icon/text/button/input

8.1 Icon图标组件

type:图标类型，值有：success，success_no_circle,info,warn,waiting,cancel,download,search,clear
size:图标大小， 23默认值，单位像素
color：图标颜色

<view class="container">
  <icon type='success' size='28'></icon>
  <icon type='success_no_circle' color='red'></icon>

  <icon type='warn' size='23'></icon>
  <icon type='clear'></icon>
</view>

在这里插入图片描述

Eva3288

发布了57 篇原创文章 · 获赞 4 · 访问量 1万+

私信关注

【微信小程序】1 - 基础配置、页面创建、生命周期

文章目录

1、关于微信小程序

2、开发准备工作

3、修改配置文件App.json

3.1 配置导航头