原生微信小程序

微信小程序原生开发

一、页面的全局配置

{   
    // pages存放所有的页面的路径
    "pages": [ 
    "pages/index/index",
    "pages/home/home" 
    ], 
     // 整个页面的配置
    "window": { 
        "navigationBarBackgroundColor": "#FFDAB9", //导航条背景颜色
        "navigationBarTextStyle": "black", //小程序名字的字体颜色
        "navigationBarTitleText": "李业" // 小程序名字
    }, 
      //导航栏（至少需要两个元素）
    "tabBar": { 
        "selectedColor":"#CD5C5C", //设置选中的图标的颜色
        "list": [ 
        { 
            "pagePath": "pages/index/index",
            "text": "首页", 
            "iconPath": "static/tabbar/ic_menu_choice_nor.png",
            "selectedIconPath": "static/tabbar/ic_menu_choice_pressed.png"
        },
        { 
            "pagePath": "pages/home/home",
            "text": "我的", 
            "iconPath": "static/tabbar/ic_menu_me_nor.png", 
            "selectedIconPath": "static/tabbar/ic_menu_me_pressed.png"
        } 
    ]
    } 
}

标签的使用

1、view标签类似于div标签

2、text 标签类似于p标签

3、image 图片标签

4、页面布局时，样式大小，使用rpx —- css中使用的是px

数据的操作

home.wxml页面

<view>{{ msg }}</view>
<view wx:for="{{list}}"> {{item.id}}- {{item.name}}-{{item.intrudtion}}</view>
<view wx:for="{{stu}}">{{index}} - {{item}}</view>

home.js页面

Page({
    data:{
      stu:['张三','李四'],
      list:[
      {
        id:1,
        name:"张三",
        intrudtion:'计算机'
      },
      {
        id:2,
        name:"张三",
        intrudtion:'汉语言'
      },
    ],
    msg:'小拾爱分享'
   }
})

分包

普通分包

{   
    // pages存放所有的页面的路径
    "pages": [ 
    "pages/index/index",
    "pages/home/home" 
    ], 
    //分包
    "subpackages":[
    {
      "root": "packagesA",//分包A
      "name": "p1",//别名
      "pages": [
        "pages/login/login"
      ]
    },
    {
      "root": "packagesB",
      "name": "p2",
      "pages": [
        "pages/reg/reg"
      ]
    }
  ],
     // 整个页面的配置
    "window": { 
        "navigationBarBackgroundColor": "#FFDAB9", //导航条背景颜色
        "navigationBarTextStyle": "black", //小程序名字的字体颜色
        "navigationBarTitleText": "李业" // 小程序名字
    }, 
      //导航栏（至少需要两个元素）
    "tabBar": { 
        "selectedColor":"#CD5C5C", //设置选中的图标的颜色
        "list": [ 
        { 
            "pagePath": "pages/index/index",
            "text": "首页", 
            "iconPath": "static/tabbar/ic_menu_choice_nor.png",
            "selectedIconPath": "static/tabbar/ic_menu_choice_pressed.png"
        },
        { 
            "pagePath": "pages/home/home",
            "text": "我的", 
            "iconPath": "static/tabbar/ic_menu_me_nor.png", 
            "selectedIconPath": "static/tabbar/ic_menu_me_pressed.png"
        } 
    ]
    } 
}

独立分包

{
  "pages": [
    "pages/home/home",
    "pages/index/index",
    "pages/life/life"
  ],
  "subpackages":[
    {
      "root": "packagesA",
      "name": "p1",
      "pages": [
        "pages/login/login"
      ]
    },
    {
      "root": "packagesB",
      "name": "p2",
      "pages": [
        "pages/reg/reg"
      ],
      "independent": true//添加该属性为独立分包
    }
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "智慧社区",
    "navigationBarBackgroundColor": "#ffffff"
  },
}

分包下载

{
  "pages": [
    "pages/home/home",
    "pages/index/index",
    "pages/life/life"
  ],
   //分包下载
  "preloadRule": {
    "pages/home/home":{//打开某个页面，下载分包p1
      "packages": [
        "p1"//需要下载的分包的名称
      ],
      "network": "all"//下载的网络请求方式WiFi或者all
    }
  },
  "subpackages":[
    {
      "root": "packagesA",
      "name": "p1",
      "pages": [
        "pages/login/login"
      ]
    },
    {
      "root": "packagesB",
      "name": "p2",
      "pages": [
        "pages/reg/reg"
      ],
      "independent": true
    }
  ],
}