微信小程序-开发

  1. 小程序开发 登录微信公众平台 创建账号,创建自己的微信小程序,完善邮箱,密码等信息

2.填好信息,小程序后台已经注册完成,此时在开发者设置中,可以查看你的AppID , 这个相当于你的开发微信小程序的身份证,后面开发需要用到,将你的appid 填好,这样创建了属于自己的微信小程序。

3.创建好小程序,他会自动生成一个微信小程序的项目(已经为你搭建好了基本的框架)

4.小程序代码构成

{
     
    "pages": [
        "pages/index/index",
        "pages/logs/logs"
    ],
    "window": {
     
        "backgroundTextStyle": "black",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "小石头",
        "navigationBarTextStyle": "black"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
}

app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab

pages字段 —— 用于描述当前小程序所有页面路径。

“pages”:数组中的第一个路径,默认事是小程序第一个页面。 “pages/index/index”。

window字段 —— 定义小程序所有页面的顶部背景颜色,文字颜色定义等
window
用于设置小程序的状态栏、导航条、标题、窗口背景色。

tabBar
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

  "tabBar": {
     
        "list": [{
     
                "pagePath": "pages/index/index",
                "text": "首页"
            },
            {
     
                "pagePath": "pages/cart/cart",
                "text": "分类"
            }, {
     
                "pagePath": "pages/shoppingcar/shop",
                "text": "购物车"
            }, {
     
                "pagePath": "pages/mine/mine",
                "text": "我的"
            }
        ]
    },

project.config.json 个性化私有配置,这样在另一条电脑尚打开编辑工具,就不需要你再次配置 这些比如 编辑器代码颜色,大小,界面颜色,以及其他个性化配置。

WXML :
指的是小程序中的 页面 相当于html 小程序中常用的标签有 view, button, text 等等,这些标签就是小程序给开发者包装好的基本能力

WXSS 样式:
类似于css 注意: 小程序底层提供了rpx 单位,已经使用了rem ,不需要你再使用rem了。即小程序的单位已经做了换算。 app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。

app.js 文件:
App() 必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果。

生命周期函数:
微信小程序-开发_第1张图片

App({
     
  onLaunch (options) {
     
    // Do something initial when launch.
    小程序初始化完成时触发,全局只触发一次。参数也可以使用 				     
    wx.getLaunchOptionsSync 获取。
  },
  onShow (options) {
     
    // Do something when show.
  },
  onHide () {
     
    // Do something when hide.
  },
  onError (msg) {
     
    console.log(msg)
  },
  onPageNotFound(res){
     
  	 wx.redirectTo({
     
      url: 'pages/...'
    }) // 如果是 tabbar 页面,请使用 wx.switchTab
  },
  globalData: 'I am global data'
})

你可能感兴趣的:(javascript,es6,html5,jquery,css)