1微信小程序框架介绍

最新推荐文章于 2023-10-16 16:08:46 发布

Endone1314

最新推荐文章于 2023-10-16 16:08:46 发布

阅读量676

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序开发

本文链接：https://blog.youkuaiyun.com/qq_36038258/article/details/81090364

微信小程序开发专栏收录该内容

3 篇文章

订阅专栏

一、微信小程序框架

首先，小程序配置有如下的文件
project.config.json项目参数配置文件
app.wxss用于存储全局样式
app.js 用于存储共有的，全局的js函数
app.json用于存储全局变量用于配置属性

其中，决定页面文件的路径、page
窗口表现，window用于设置小程序的状态栏、导航条、标题、窗口背景色
设置网络超时时间、networkTimeout
设置多tab 等、底部tabBar

page指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息
"page":[
pages/index/index.wxml
pages/index/index.js
pages/index/index.wxss 只需要写成"pages/index/index",
]

然后

app.json的功能

1、实现窗口布局

2、实现功能选择（TabBar），最少2个，最多5个

{
  "pages":[
    "pages/OrderPage/OrderPage",
    "pages/index/index",
    
    
    "pages/logs/logs"
    
  ],

  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Car Booking",
    "navigationBarTextStyle":"black" 
  },
  
  
    "tabBar": {
      "color": "black",
      
      "selectedColor": "red",
      
      "borderStyle": "black",
      "position": "bottom",
      "list": [
        {
          "pagePath": "pages/index/index",
          "text": "首页",
          "iconPath":"/img/icon/a2.png",
          "selectedIconPath":"/img/icon/a1.png"
          
        },
        {
          "pagePath": "pages/index/index",
          "text": "我的故事",
          "iconPath": "/img/icon/b2.png",
          "selectedIconPath": "/img/icon/b1.png"
        },
        {
          "pagePath": "pages/index/index",
          "text": "首页"
        }
      ]
      
    }
  
}

pages文件夹下是各个页面的代码，分别是OrderPages，index界面，界面由3部分组成，分别为wxml，wxss，js，json。

wxml类似html内的各种组件，同时wxml里有各种区别于html的功能。

1数据绑定

       //数据绑定
       <view> {{ message }} </view>
       Page({
           data: {
                   message: 'Hello MINA!'
           }
      })
       //组件属性
      <view id="item-{{id}}"> </view>
     Page({
          data: {
          id: 0
         }
     })

wxss，类似css里的语法

    .searchLetter{
        margin-top:20rpx;
        color:#fff;
        padding-top:
       padding-bottom:
    }

js，为了能够进行页面的交互，在html里的组件中需要添加Bindtap="function name"

onload:function(){


}

接下来学习

1、HTML各种组件的学习，以及如何和javascript的交互

2、添加图片，视频的方式

3、如何将表单提交到java后台进行处理，同时将数据写入数据库。

4、微信小程序的API调用

5、调试方法学习