微信小程序

一，创建小程序

微信小程序-阿里云部署-CSDN博客

        1，打开微信开发者工具

        2，新建项目

        3，输入appid

        4，小程序底部导航配置， app.json

"tabBar": {
    "color": "@tabBarColor",
    "selectedColor": "@tabBarSelectedColor",
    "borderStyle": "@tabBarBorderStyle",
    "backgroundColor": "@tabBarBackgroundColor",
    "list": [
      {
        "pagePath": "page/component/index",
        "iconPath": "@iconPathComponent",
        "selectedIconPath": "@selectedIconPathComponent",
        "text": "组件"
      },
      {
        "pagePath": "page/extend/index",
        "iconPath": "@iconPathComponent",
        "selectedIconPath": "@selectedIconPathComponent",
        "text": "扩展能力"
      },
      {
        "pagePath": "page/API/index",
        "iconPath": "@iconPathAPI",
        "selectedIconPath": "@selectedIconPathAPI",
        "text": "接口"
      },
      {
        "pagePath": "page/cloud/index",
        "iconPath": "@iconPathCloud",
        "selectedIconPath": "@selectedIconPathCloud",
        "text": "云开发"
      }
    ]
  },

             

二，目录文件介绍

        一个page目录里的 js,json,wxml,wxss 四个文件相对于一个 vue 组件

App(Object object) | 微信开放文档

        1，app.js  : 项目的入口文件  创建app对象

// 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
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

        2 ，*.wxml ：相当于 html文件

WXML | 微信开放文档

               a，标签

                 <view> 相对于<div>

                b，属性：

                bindtap='xxx'  ： 绑定方法

                c，导入文件

                        <import>

                        <include>

         3，*.js 类似于vue2语法                

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
  },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        motto: '你好'
      })
    }
  }

})

                a，箭头函数 ：this声明时固定

                b，结构赋值 ：{name,age} = student;

                c，Proxy代理对象：（常用于get,set方法拦截）

                d，Promise承诺对象：（异步编程方式，网络请求）对象.then(success(),failed())

                Promise和Axios_axios promise-CSDN博客

                e，页面跳转

                        1.方法一

    <button bind:tap="category_name">跳转页面</button>

  category_name:function(event){  //event 传参用
    wx.navigateTo({
      url: '../category_news/category_naws',
    })
  }

                      2.方法二

    <navigator url="../category_news/category_naws">
      <view>跳转页面</view>
    </navigator>

        4，.wxss 相对于.css 文件

                        单位：rpx;px,%..

                        选择器：

                        导入：@import './sub.wxss';

     5，.JSON页面配置文件

        页面引用子组件 

                json 文件配置

{
  "usingComponents": {
    "navigation-bar": "/components/navigation-bar/navigation-bar"
  }
}

                 wxml 文件        

<navigation-bar title="分类" back="{{false}}" color="black" background="#FFF"></navigation-bar>

全局配置 | 微信开放文档

页面配置 | 微信开放文档

// 配置引用组件
{
  "usingComponents": {}
}

  

        6，指令  wx: 相当于 v-

                         wx:if   :v-if

                        wx:elif

                        wx:else                       

                        wx:for,wx:for-inex, wx:for-item

三，组件

视图容器 | 微信开放文档

四，api

基础 | 微信开放文档

五，云数据库 云存储

        1，页面wxml

<button bind:tap="insert">插入一条数据</button>
<button bind:tap="search">查询数据</button>
<button bind:tap="searchAll">查询所有数据</button>
<button bind:tap="searchWhere">条件查询</button>
<button bind:tap="update">更新</button>
<button bind:tap="delete">删除数据</button>
<button bind:tap="upload">上传文件</button>
<button bind:tap="download">下载文件</button>
<button bind:tap="deletefile">删除文件</button>
<image src = 'cloud://test-7g5jttig68157a44.7465-test-7g5jttig68157a44-1321176364/img2.png'></image>

        2 ，页面js

// pages/database/database.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    students: null,
    database: null
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    wx.cloud.init({
      env: "test-xxxxxxxxxxxx"
    });

    let db = wx.cloud.database();
    this.data.database = wx.cloud.database();
    this.data.students = db.collection("students");

  },

  // 插入数据
  insert: function () {
    this.data.students.add({
      data: {
        age: 20,
        name: "小红",
        class: 2
      },
      success: function () {
        console.log("插入成功")
      },
      fail: function () {
        console.log("插入失败")
      },
      complete: function () {
        console.log("完成")
      },
    });
  },
  search: function () {
    // 查询数据
    this.data.students.doc("f18e14fa6516a6b9005f7ca27e734c34").get({
      success: function (res) {
        console.log(res.data);
      }
    });
  },

  searchAll: function () {
    // 查询数据
    this.data.students.get({
      success: function (res) {
        console.log(res.data);
      }
    });
  },

  searchWhere: function () {
    // 条件查询
    this.data.students.where({
      age: this.data.database.command.gte(21),
      name: "小红"
    }).get({
      success: function (res) {
        console.log(res.data);
      }
    });
  },
  update: function () {
    // 局部更新
    // this.data.students.doc("f18e14fa6516a6b9005f7ca27e734c34").update({
    //   data: {
    //     name: "小明明"
    //   },
    //   success: function () {
    //     console.log("更新成功");
    //   }
    // })

    // 全部更新
    this.data.students.doc("f18e14fa6516a6b9005f7ca27e734c34").set({
      data: {
        name: "小明明",
        age: 23
      },
      success: function () {
        console.log("更新成功");
      }
    })
  },
  delete: function () {
    // 删除
    this.data.students.doc("def1da456516b37904d1fb1f3fed6e22").remove({
      success: function () {
        console.log("删除成功");
      }
    })
  },

  upload: function () {
    // 
    wx.chooseImage({
      success: function (res) {
        wx.cloud.uploadFile({
          filePath: res.tempFilePaths[0],
          cloudPath: 'img3.png',
          succes: function (res) {
            console.log(res.fileID);
          },
          fail: function () {
            console.log("error");
          }
        });
      },
    })
  },

  download: function () {
    // 
    wx.cloud.downloadFile({
      fileID:"cloud://test-xxxxxx-test-7g5jttig68157a44-1321176364/img2.png",
      succes: function (res) {
        console.log(res.tempFilePath);
      },
    })
   
  },
  deletefile: function () {
    // 
    wx.cloud.deleteFile({
      fileList:["cloud://test-xxxxxx-test-7g5jttig68157a44-1321176364/img3.png"],
      succes: function () {
        console.log('删除成功');
      },
    })   
  },
})

六，云函数

      1 页面 wxml

<button bind:tap="callFunction">调用云函数</button>
<button bind:tap="getTeachers">获取教师列表</button>

       2  页面    js 

 callFunction:function(){
    wx.cloud.callFunction({
      name:"hello",     // 云函数名
      data:{            //传参
        name:"小明===",
        age:21
      },
      success:function(res){
        console.log(res.result)
      }
    });
  },

  
  getTeachers:function(){
    wx.cloud.callFunction({
      name:"getTeachers",     // 云函数名
      data:{                  // 传参
        page:this.data.page,
        pageSize:this.data.pageSize,
      },
      success:(res)=>{
        console.log(res.result.data)
        if (res.error){
          console.log(res.errMsg)
        }
        // 分页逻辑
        if (res.result.hasMore){
          this.data.dataList = this.data.dataList.concat(res.result.data);
          this.data.page = this.data.page+1;
          this.getTeachers();          
        }else{
          this.data.dataList = this.data.dataList.concat(res.result.data);
          console.log(this.data.dataList);
        }
      },
      fail:function(error){
        console.log("error:",error)
      }
    });
  },

        3 新建 Node.js云函数

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用当前云环境

// 云函数入口函数
exports.main = async (event, context) => {
  let db = cloud.database({
    env:"test-xxxxxxxxxx"        // 云环境id
  });
  let teachers = db.collection("teachers");
  let page = event.page;
  let pageSize = event.pageSize;
  console.log(page,pageSize); // 打印在云端日志
  let count = await teachers.count();
  let total = count.total;
  let hasMore = page * pageSize < total;
  
  let list = await teachers.limit(pageSize).skip(page*pageSize).get();

  return{
    data:list.data,
    error:list.error,
    errorMsg:list.errorMsg,
    hasMore:hasMore
  }
}

七 部署

        1，微信部署

                发布：开发者工具上传>小程序管理后台-版本管理>提交审核-审核版本>-上线版本          

                微信云托管： 微信开放社区

        2，阿里云部署

                微信小程序-阿里云部署_daizikui的博客-CSDN博客        

include和import的区别   作用都是引用公共组件

微信小程序中include和import的区别_小程序include_zhy前端攻城狮的博客-CSDN博客
        import是用来导入模板。
        include用来导入除模板以外的内容。