微信小程序学习笔记

网页搜索wx公众平台，登录后选择小程序页面下载小程序开发者工具

根据自己的电脑配置，选择稳定版本，同时开发者工具编译器有很多功能

打开小程序面板，输入自己的APPID,在WX公众平台的开发者设置里可以找到自己的APPid，同时选择JS模板，不适用云服务。

开发者工具使用

点击编译直接在开发者工具的左端预览，也有真机预览

项目模块

pages中存放了所有的小程序页面，类似WEB中的各个页面或者VUE中的各个子组件（右为VUE项目模块），例如index就是一个页面

utils存放工具性质的模块

app.js是小程序项目的入口文件 json则是全局配置文件，WXSS是全局样式文件，类似CSS文件的文件

json文件以pages里的json优先级别高，意思就是，这个子页面里有配置就在这个子页面里显示，如果没有就用APP.JSON中的配置去显示,下面两种就以index.json的navigationBarBackgroundColor去显示index页面

app.json

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },

 index.json

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#00b26a"
}

新建小程序页面

1选择pages新建文件命名list ->点开文件右键新建page命名为list最好两次命名一样

2直接在app.json中修改pages

  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/list/list"
  ],

 其中第一个index是初始页面，可以调换代码顺序来改变初始页面

 wxml和html的区别

wxss和css

小程序中的JS文件

 

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录,启动小程序
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },

// index.js
// 获取应用实例
const app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
  },

view想当于容器，text为文本，{{}}里执行js逻辑，{{}}不要放文本会报错错位的值（bad values...)

<!--pages/list/list.wxml-->
<!-- view相当于DIV -->
<!-- 花括号语法内可以执行JS逻辑 -->
  <view>
    <view> 
    {{1+1}}
    {{1+1==2?'yes':'no'}}
    </view>
    <text>文档不可换行</text>
    <text>但是view可以</text>
  </view>

wx:for循环，类似v-for,同理wx:if类似v-if

<view wx:for='{{list}}' wx:for-item='i' class='list' :key='{{index}}'>
  {{i}}
</view>

key是下标，wx提供别 for-item 和 for-index，{{list}}是js data中的数据

JS文件

JS文件中的DATA也类似VUE写在pages中

Page({

  /**
   * 页面的初始数据
   */
  data: {
    motto:1,
    type:1,
    msg:'a message',
    list:[1,2,3,4,5,6],
    obj:{
      name:'1',
      id:'18'
    }
  },

生命周期

很有微信特色，除了页面监听启动挂载等，在整个周期后面还有各种微信触发事件，类似上拉，分享等

/**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }

组件

常用组件icon，icon是小图标组件有size,color,type等

Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
    ],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
    ]
  }
})

progress是进程组件

text是文本组件.rich-text是富文本组件,可以读取html格式按html格式渲染，甚至可以读取特定的html样式,html中的属性需要放在attrs中，文本<p>需要放在崎中嵌套，比较烦

data: {
    htmlStr:'<div><p>这是一段文字</p></div>',
    htmlNodes:[{
      name:'div',
      attrs:{
        style:'color:red',
        id:'box',
        class:'content-box'
      },
      children:[
        {
          name:'p',
          children:[{
            type:'text',
            text:'这是一段文字2'

 wxml

<!--pages/common/common.wxml-->
<text>pages/common/common.wxml</text>
<rich-text nodes="{{htmlStr}}"></rich-text>
<rich-text nodes="{{htmlNodes}}"></rich-text>

button组件

button作为按钮可以绑定各种事件，微信主要多了很多微信可以调用的api

直接<button open-type='string'>就可以调用各种

 

事件绑定

常用事件

通过触摸调用console输出打印

<button bindtap='setUserName'>按钮</button>
//wxml

data: {
    motto:1,
    type:1,
    msg:'a message',
    list:[1,2,3,4,5,6],
    obj:{
      name:'1',
      id:'18'
    }
  },
  //设置用户名字
  setUserName(){
    this.setData({
      "obj.name":"2"
    }),
    console.log(this.data.obj.name)//this代表当前这个页面，也就是page要逐步的作用
  },