微信小程序初识

微信小程序

因(ios,android)多平台彼此间并不互通,所以开发需要两个不同平台的开发团推队,所以微信小程序因此诞生。

小程序的优点

  • 快速加载
  • 更强大的能力
  • 原生的体验
  • 易用且安全的微信数据开放
  • 高效和简单的开发

首先

根据自己的情况安装微信小程序的开发版本
下载之后进行注册操作
注册之后在这里拿到AppID(小程序ID)
这个AppID(小程序ID)会在创建项目时用到
请添加图片描述
请添加图片描述
开发工具的各个区域请添加图片描述

认识项目的目录结构

请添加图片描述
这些都删除重新创建自己需要的项目文件,必须在根目录存在pages文件目录 app.json负责项目页面的引入,创建成功后给文件内加一个空对象不然会报错
在pages目录下创建项要这注意需要创建一个跟你需要的页面同名的文件夹名因为一个页面下有很多所需的文件,请添加图片描述
.js为后缀的文件存放当前页面的事件执行函数,.wxml存放页面结构,.wxss存放css样式
在根目录下的app.json里有许多参数一 一 详解

了解关于pages里的对象含义

  • pages相当于路由配置文件
 "pages": [
    "pages/index/index",// 表示根目录pages下的index文件夹下的index文件
    "pages/mail/mail",// 表示根目录pages下的mail文件夹下的mail文件
    "pages/find/find",// ... 上述同理
    "pages/my/my"
  ],
  • pages下的window对象表示配置页面的顶部导航
javascript
"window": 
    "navigationBarBackgroundColor": "#565656",// 配置小程序的顶部背景,只支持这种书写颜色的格式,HexColor格式
    "navigationBarTitleText": "微信",// 小程序的标题内容
    "navigationBarTextStyle": "white",// 小程序标题字体的颜
    
	// 下面是于下拉刷新有关的样式
	"enablePullDownRefresh": true// 最开始程序是不允许下拉刷新的,这里设置为true允许用户下拉刷新
    "backgroundColor": "#fff",// 控制下拉刷新的背景颜色,只支持HexColor格式颜色书写
    "backgroundTextStyle": "dark",// 控制下拉刷新的字体颜色,这里只支持dark和light
    
  }

在这里插入图片描述

  • tabBar设置底部导航栏的样式,注意这里的导航栏是小程序的自有方
    看看官网怎么说
"tabBar": {
   
    "color": "#555",// 底部导航栏字体颜色,只支持HexColor颜色书写格式
    "selectedColor": "lightgreen",// 被选择中的元素所应用的颜色
    "backgroundColor": "#656565",// 底部导航栏的背景颜色,只支持HexColor颜色书写格式
    "borderStyle": "black",// 底部导航栏的边框颜色,这里只支持white,和black
    
// 小程序底部导航点击路由配置规则
    "list": [
      {
   
        "selectedIconPath": "./pages/assets/icon/wechat.png",// 被选中时应用的图片
        "iconPath": "./pages/assets/icon/wechat.png",// 未被选中时应用的图片
        "pagePath": "pages/index/index",// 点击后应用哪个页面
        "text": "微信"// 用户看到的路由名称
      },
     // 以下同理
      {
   
        "selectedIconPath": "./pages/assets/icon/通讯录.png",
        "iconPath": "./pages/assets/icon/通讯录.png",
        "pagePath": 
  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值