小程序入门-1

代码构成

1.小程序的身份证

AppID 相当于小程序平台的一个身份证。后续很多地方要用到APPID。

2.小程序的代码构成

小程序由.json、.wxml、.wxss、.js文件组成。

• app.json 全局配置文件，包括了所有的页面路径、界面表现、网络超时时间、底部tab。例如

{
"pages":["pages/index/index", "pages/logs/logs"],
"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}

• pages字段，描述当前小程序的所有页面路径。
• window字段，定义小程序所有页面的顶部背景颜色，文字颜色等
• tabBar 底部tab栏的表现
• functionPages 是否启用插件功能页，默认关闭。
• plugins 是否使用到插件
• resizable ipad小程序是否支持屏幕旋转，默认关闭

json文件

pages

指定小程序由那些页面组成，每一项都对应一个页面的路径+文件名。文件名不需要写后缀，框架会自动去寻找对于位置的.json，.js，.wxml，.wxss。pages数组中第一项代表小程序的初始页面。

windows

用于设置小程序的状态栏、导航条、标题、窗口背景色。

tabBar

可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面。（最多5个tab，最少两个tab）

页面配置

每一个小程序页面也可以使用.json文件来对页面的窗口表现进行配置。页面的配置只能设置app.json中部分window配置项的内容，页面中配置项会覆盖app.json的window中相同的配置项。

wxml模板

wxml充当类似html角色,wxml用的标签是view、button、text。

通过{{}}的语法把一个变量绑定到界面上，称为数据绑定。

<text>{{msg}}</text>
this.setData({msg:'hello word'})

wxss样式

尺寸单位rpx

提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

wx.getUserInfo获取微信用户的头像和昵称，setData把获取到的信息显示到界面上。

小程序的能力

组件

地图组件

<map longitude="广州经度" latitude="广州维度" bindmarkertap="markertap">

获取用户的地理位置

wx.getLocation({
    type:'wgs84',
    success:(res)=>{
        const latitude=res.latitude //纬度
        const longitude=res.longitude //经度
    }
})

调用微信扫一扫能力

wx.scanCode({
    success:(res)=>{
        console.log(res)
    }
})