微信小程序

初识微信小程序

开发小程序首先要注册小程序账号

 

微信小程序开发页面

wxml是页面当中的内容
wxss是内容的格式设置
js是界面的逻辑设计
json是整个页面的配置

 

案例1 Hello Wechat

可以进行预览

真机调试

 

字体样式设置

 

 

微信小程序字体样式设置

 

文本样式设置

文本样式属性

 

图片与声音

音频和图片的使用

 

盒模型

 

 

Flex弹性盒模型布局

Flex是Flexible Box的缩写，意味“弹性布局”，用来对盒状模型进行布局

 

Flex弹性盒模型布局

Flex容器布局

Flex项目布局

 

导航与布局

 

navigator组件的属性

 

流程控制结构和函数

条件结构和数学函数

 

Math对象

 

 

循环

//index.js
var start,end,sum;
Page({
  startNum:function(e){
    start = parseInt(e.detail.value); //将input组件value值转换为整数并赋值
  },
  endNum:function(e){
    end=parseInt(e.detail.value); //将input组件value值转换为整数并赋值
  },
  calc:function(){
    sum=0;
    for(var i=start; i<=end; i++){
      sum=sum+i;//利用for循环求和
    }
  
  this.setData({
    sum:sum //将全局变量sum的值渲染到视图层
  })
  }
})

 

小程序基本架构

{
  "pages": [
    "pages/index/index",
    "pages/jiaoxue/jiaoxue",
    "pages/keyan/keyan",
    "pages/zixun/zixun",
    "pages/guanyu/guanyu"
  ],
  "window": {
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "北方工业大学欢迎您",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#000",
    "selectedColor": "#00f",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/images/home-off.png",
        "selectedIconPath": "/images/home-on.png"
      },
      {
        "pagePath": "pages/jiaoxue/jiaoxue",
        "text": "教学",
        "iconPath": "/images/jiaoxue-off.png",
        "selectedIconPath": "/images/jiaoxue-on.png"
      },
      {
        "pagePath": "pages/keyan/keyan",
        "text": "科研",
        "iconPath": "/images/keyan-off.png",
        "selectedIconPath": "/images/keyan-on.png"
      },
      {
        "pagePath": "pages/zixun/zixun",
        "text": "资讯",
        "iconPath": "/images/zixun-off.png",
        "selectedIconPath": "/images/zixun-on.png"
      },
      {
        "pagePath": "pages/guanyu/guanyu",
        "text": "关于我们",
        "iconPath": "/images/guanyu-off.png",
        "selectedIconPath": "/images/guanyu-on.png"
      }
    ]
  }
 
}

 

小程序的执行顺序

 

 

 

数据和事件绑定

 

 

变量和函数的作用域及模块化

 

 

 

条件渲染