一、初始化设置

1、安装微信开发者工具

developers.weixin.qq.com/miniprogram…

这个工具用来开发小程序的，类似于一个可以编写代码的浏览器

2、注册小程序

mp.weixin.qq.com/

注册账号

3、登录之后，去“开发管理”选项中找“开发设置”，然后找到你注册账号的小程序的AppId

4、打开下载的微信开发者工具，点击左上角选择新建项目(小程序)

5、项目

二、项目文件介绍

1、app.json

小程序公共配置
项目中的app.json为当前项目的配置文件

可以配置像：页面路由、导航条设置、标题栏设置...

(1)、pages

是用来配置页面路由的
里边写的都是路由地址(路径)
第一项为默认进入项

(2)、window

全局默认配置窗口

(3)、entryPagePath

小程序默认启动首页

(4)、tabBar

底部tab栏设置
还可以自定义
list ：底部导航按钮跳转路由配置

2、app.js

小程序逻辑
app.js 可以理解当前项目的主入口文件

3、app.wxss

小程序公共样式表

app.wxss 是当前文件的总的样式文件

xxx.wxss 都是小程序的样式文件，类似于我们平时写的css；但是最安全的编写方式是写类名：不建议使用标签名

全局 App()

页面 Page()

页面实例中的事件绑定对应的方法是直接写在配置对象中的，跟data是兄弟关系

组件 Component()

组件实例中的事件绑定中的方法是在配置对象中的methods属性里边编写的；

页面实例和组件实例可以通过 getApp() 获取到根组件实例APP

三、小程序如何编写

1、小程序中的标签，都是小程序的内置组件

view 就理解成 div块状元素即可
block 就理解为 vue template标签，代表的是一个空元素
button　内置组件，可以自己设置需要的属性
text 相当于原生的 span 行内元素
<open-data　type="userAvatarUrl">　一个用于展示用户信息的组件

（微信的开放能力）可以直接把昵称放在这里

wx.canIUse('open-data.type.userAvatarUrl') 用于问微信小程序能不能使用开放能力来展示用户头像

2、小程序一些指令

wx:if="{{canIUseOpenData}}" 相当于vue 中的 v-if
wx:elif="{{!hasUserInfo}}" 相当于 vue 中的 v-else-if、
wx:for="{{ary}}" 相当于 v-for='(item,index) in ary'
wx:key="index" 相当于 :key='index'
wx:for-item='qqq' v-for='(qqq,index) in ary'
wx:for-index='ttt' v-for='(item,ttt) in ary'
wx:for-item='qqq' wx:for-index='ttt' v-for='(qqq,ttt) in ary'

事件绑定

bindtap="getUserProfile" 相当于vue 中的@click
bind 相当于 @
bind绑定的事件有冒泡行为
catch绑定的事件没有冒泡行为

e.currentTarget是事件绑定的哪个元素

e.target是操作的哪个元素

3、小程序的用来更新属性值的一个方法:

this.setData({　qqq: true　})

类似于vue的　this.qqq = true

4、小程序中的钩子函数　分为　三类：

某个小程序自身的：
页面的：
组件的：

(1)、页面的钩子函数

 onLoad: function(options) {
    // 类似于vue的created
  },
  onShow: function() {
    // 类似于vue的actived
  },
  onReady: function() {
    // 类似于vue的mounted
  },
  onHide: function() {
    // 类似于vue的deactived
  },
  onUnload: function() {
    // 类似于 vue的destroy
  },
  onPullDownRefresh: function() {
    // 当用户下拉页面的时候 触发
  },
  onReachBottom: function() {
    // 当用户滚动页面到底部的时候触发
  },
  onShareAppMessage: function () {
    // 当用户执行分享的时候触发
  },
  onPageScroll: function() {
    // 当页面滚动的时候触发
  },
  onResize: function() {
    // 手机屏幕横竖屏切换的时候触发
  },
  onTabItemTap(item) {
    // 用户点击底部导航的时候触发 自定导航不好使
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },

四、零碎

wx.switchTab 这个方法是切换tabBar页面的一个方法 wx.switchTab({ url:url })
e.currentTarget 这个属性类似于原生的 e.target
wx 可以理解为浏览器的 window
不能通过this.data.count++触发试图更新，如果想要视图更新，需要使用 this.setData() 来更新数据和视图

● this.setData({
count:this.data.count+1
 }, function () {
// 视图更新完成之后触发
 })

与后台交互

getData() {
    wx.request({
      url: 'https://api.bspapp.com',
      success(data) {
        // 请求接口成功之后触发
        console.log(data)
      },
      fail() {
        // 请求失败之后触发
        console.log("失败了")
      }
    })
  },

微信小程序再学