• 微信小程序干货

    【微信小程序系列】微信小程序超简单教程

    小程序项目结构

    • 静态页面的构成
      • HTML：结构
      • css:样式
      • js:行为
    • 小程序
      在这里插入图片描述
    • 页面全部存放在pages, 而且pages目录只能存放页面
      • 页面包括4个文件，pages/页面名/页面名.js(wxss,json,wxml)
        • 4个文件的文件名必须一致
        • 4个文件
          • .js 页面逻辑
          • .json 页面配置
          • .wxml 页面结构
          • .wxss 页面样式
    • app.js 是小程序入口文件，先忽略掉
    • app.wxss 全局样式
    • app.json
      • pages配置的数组，是有序的。第一个就是模拟器显示的页面
    {
	// 所有的页面路径都应该配置在这个数组里面，如果没有配置，如果跳转
  "pages":[
    "pages/index/index",	// 第一个界面即为默认启动页面
    "pages/logs/logs"
  ],
    //全局窗口样样式 
  "window":{
      //设置网页进行下拉刷新的时候的样式 (需要先有下拉刷新的功能)
    "backgroundTextStyle":"light",	//（light / dark）
      //手动设置一个下拉刷新的功能
      "enablePullDownRefresh": true，
      //可设置下拉框刷新的颜色（并不是设置页面的背景颜色）
      "backgroundColor": "#0094ff",


      //导航栏方案的背景色
    "navigationBarBackgroundColor": "#fff",
      //导航栏的标题文字
    "navigationBarTitleText": "微信小程序",
      //导航栏方案的前景色	
    "navigationBarTextStyle":"black"	//（black / white）
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 如果设置页面背景颜色，可在app.wxss中设置：
    page{
  background-color: #eeeeee;
}

    • 1
    • 2
    • 3

    基本标签的使用

    组成程序的页面的并不是HTML标签，而是小程序的组件

    • text：显示文本的

      • 相当于是span标签，是行内元素

    • view包裹作用

      • 相当于是div

    • image 就是显示图片

    • button按钮

      • size:mini :表示小的按钮
    <view>
  
  <button>默认的按钮button>
  <button size="mini">小按钮button>
view>

    • 1
    • 2
    • 3
    • 4
    • 5

    基本语法

    数据绑定

    • {{}}：数据绑定使用 Mustache 语法（双大括号）将变量包起来

    1. 定义数据

      <!--index.wxml-->
<view>
  {{ test }}
</view>


<!--index.js-->
Page({
  data: {
    test:"test"
  },
})

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12

    2. 属性绑定

      <!-- 属性绑定,{{}} -->
<image src="{{imgUrl}}"></image>

      • 1
      • 2
      • 注意：images和pages是同级目录，当pages想引用images里面的图片时"…/…/images/h.jpg"; 如果路径是"…/images/h.jpg"则表示是在pages/images/h.jpg目录下的（则为子目录）

    3. wx:for 遍历 数组

      <!--index.wxml-->
<view class="container">
  <view wx:for="{{arr}}" wx:key="index">{{ item }}</view>
</view>

<!--index.js-->
Page({
  // 定义数据
  data: {
    arr: [
      1, 2, 3, 4
    ]
  },
})

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14

    4. wx:for 遍历 对象

      <!-- wx:for 遍历对象 设置item为每一个项 和 index值 -->
<view wx:for="{{obj}}"  wx:for-item="value" wx:for-index="key" wx:key="key">
  <text>{{ value.age }}</text>
</view> 

      • 1
      • 2
      • 3
      • 4

      wx:for-item： 数组obj的别名 （ 不进行设置时默认是item，但是如果设置了则只能用设置的别名）

      <view wx:for="{{list}}" wx:for-item="sss"></view>

      • 1

      等同于

      for (var i = 0 ; i < list.length; i++) {
var sss = list[i];
}

      • 1
      • 2
      • 3
      • wx:for-index： 数组的当前项的下标变量名 , 默认为 index ，自定义赋值形式和上面wx:for-item一样

      • wx:key： 来指定列表中项目的唯一的标识符。

        • 1.需要wx:key的情况
        1. 列表中项目的位置会动态改变或者有新的项目添加到列表中
        2. 希望列表中的项目保持自己的特征和状态
          （如 中的输入内容， 的选中状态）
        • 2.可不需要wx:key的情况
          如果明确知道该列表是静态，或者不必关注其顺序，可以不用加wx:key，忽略如下的警告。

    5. wx:if wx:elif wx:else 条件语句

      <!--index.wxml-->
<view class="container">
  <view  wx:if="{{ view == '1'}}">我是1</view>
  <view  wx:elif="{{ view == '2'}}">我是2</view>
  <view  wx:else="{{ view == '3'}}">我是3</view>
</view>


<!--index.js-->
Page({
  // 定义数据
  data: {
    view:"1"
  },
})

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15

    6. 三目运算

      <view> {{flag ? "我是true" : "我是false"}} </view>

      • 1

    7. hidden 显示和隐藏属性

      <!--index.wxml-->
<view>
  flag - {{ flag }}
  <view hidden="{{flag}}">为true时隐藏,flase为显示</view>
  <button bindtap="btn">修改</button>
</view>


<!--index.js-->
Page({
  data: {
    flag:true
  },
  btn(e){
    this.setData({	//setData是微信小程序提供的一个内置的接口,是用于改变逻辑层中 data下的数据的
      flag: !this.data.flag
    })
  }
})

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19

    8. 模板语法（ 渲染 同样的标签，只不过内容不一致而已 ）

      <!--index.wxml-->
<view>
  <template name="staffInfo">
    <view>
      name:{{name}}, age:{{age}}
    </view>
  </template>
  <template is="staffInfo" data="{{...staffA}}"></template>
  <template is="staffInfo" data="{{...staffB}}"></template>
</view>


<!--index.js-->
Page({
  data: {
     staffA: {
      name:"张三",
      age:23
    },
    staffB:{
      name:"李四",
      age:20
    }
  },
})

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25

    9. class 与 style 两种写法

      • index.wxml
      <!--index.wxml-->
<view>
  <!-- style 普通写法 -->
  <view style="color: red">我是style red1</view>

  <!--style 动态绑定 数据 -->
  <view style="color:{{ color }};background: {{bg}};">我是style red2</view>
  <view style="color:{{flag? color:color2 }};">我是style red3</view>
  <view style="color:{{!flag? color:color2 }};">我是style red4</view>

  <view> ---- 分割线 ---- </view>   

  <!-- class 普通写法 -->
  <view class="color1">我是class red1</view>
  <view class="{{ flag ? 'color1':'color2'}} 'bg2'">我是class red2</view>
  <view class="{{ !flag ? 'color1':'color2'}}">我是class red3</view>
</view>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • index.js
      <!--index.js-->
Page({
  data: {
    color:"blue",
    flag:true,
    color2:"red",
    bg:"orange"
  },
})

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • index.wxss
      
.color1 {
  color: #cc1;
}
.bg2 {
  background: orange;
}
.color2 {
  color: pink;
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10

    获取用户基本数据信息

    参数 object

    属性类型默认值必填说明
    langstringen否显示用户信息的语言
    descstring是声明获取用户个人信息后的用途，不超过30个字符
    successfunction否接口调用成功的回调函数
    failfunction否接口调用成功的回调函数
    completefunction否接口调用结束的回调函数（调用成功、失败都会执行）

    其中 desc 是必须要填，用于说明获取用户个人信息的用途。

    object.lang 的合法值

    值说明
    en英文
    zh_CN简体中文
    zh_TW繁体中文

    具体使用

    注意：

    ​ 仅小程序中 wx.getUserInfo 接口进行调整，小游戏中不受影响；为了兼容低版本，可以做以下兼容：

    <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile">获取头像昵称</button>
<button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"获取头像昵称</button>

    • 1
    • 2
    <-- index1.wxml -->
<view>申请获得你的公开信息(用户昵称、头像、城市等)</view>
<button bindtap="getUserProfile">获取用户基本信息</button>
<text>{{userInfoStr}}</text>
    

<-- index1.js --> 
Page({
  data: {
    userInfo: {},
    canIUseGetUserProfile: false,
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，最多15个中文或者30个字符
        success: (res) => {
        console.log("获取到的用户信息成功: ",JSON.stringify(res));//在控制台输出得到的用户信息
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
      userInfoStr: JSON.stringify(res)
    })
  },
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    相关接口调整：

    1. 小程序与小游戏获取用户信息相关接口：不再返回用户性别及地区信息；
    2. 公众号用户信息获取接口：不再返回用户性别及地区信息；
    3. Open平台授权接口：包括App授权登录、公众号H5授权登录、网站扫码授权登录，不再返回用户性别及地区信息；

    本次改造调整生效后，所述涉及字段返回值将按如下规则生效：

    *注：字段名均保持不变，小程序与小游戏获取用户信息接口“用户性别”字段名为gender；Open 平台授权接口“用户性别”字段名为 sex

    实现云数据库的查询

    创建页面：

    在 .js文件编写数据和请求：

    数据绑定

    写onLoad函数：

    方式一：页面 .js

    在 onLoad() 里面添加 this.setData({ list:res.data }) 动态的将数据库中的数据存放到list中

    // pages/database/database.js
const db = wx.cloud.database()		
Page({
  /**
   * 页面的初始数据
   */
  data: {
      list:[ ]
  },
 /*
 header: {
    'content-type':'application/x-www-form-urlencoded',//解决请求不到数据
    //'cookie': wx.getStorageSync("sessionid")//读取sessionid,当作cookie传入后台将PHPSESSID做session_id使用
  },
 */
  onLoad(){
   
    //用于获取当前数据库中表的实例对象，注意后面的.get()!!!
    wx.cloud.database().collection('book').get()
    //请求成功处理方式
    .then(res =>{
      console.log('请求成功!!!',res.data)
      this.setData({
        	//动态的将数据库中的数据存放到list数组中
        	list:res.data
      })
     })
     //请求失败处理方式
    .catch(err =>{
        console.log('请求失败……',err)
     })
   }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    方式二：

     onLoad(){
    //固定写法,用于获取当前数据库中goods这个表的实例对象
    wx.cloud.database().collection('book')
    //查询操作
    .get({
      //请求成功
      success(res){
        console.log('请求成功',res)
      },
      //请求失败
      fail(err){
        console.log('请求失败',err)
      }
 })

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    控制台请求成功，获得数据：

    页面显示：
    
<text>pages/database/database.wxmltext>

<view wx:for="{{list}}" wx:key="key">

    <view>作者:{{item.author}},
          书名:{{item.bookName}},
          类目:{{item.category}},
          内容:{{it.
        em.content}},
          价格:{{item.price}}
          
    view>
view>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    有条件的查询where：
    onLoad(){  
    //用于获取当前数据库中表的实例对象，注意后面的.get()!!!
    wx.cloud.database().collection('book')
    .where({
      bookName:'龙族'
    }).get()
    //请求成功
    .then(res =>{
      console.log('请求成功!!!',res.data)
      this.setData({
        //动态的将数据库中的数据存放到list数组中
        list:res.data
      })
     })
     //请求失败
    .catch(err =>{
        console.log('请求失败……',err)
     })
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    查询单条数据doc()：
    //js:
wx.cloud.database().collection('goods')
.doc('里面写云数据库中数据的id').get()

//wxml: 数据来源为数组，不是数据库的item了
<!-- doc查询的单条数据的页面输出  -->
<view>doc查询的单条数据:</view>
    <view>作者:{{list.author}},
          书名:{{list.bookName}},
          类目:{{list.cotegory}},
          内容:{{list.content}},
          价格:{{list.price}}，
    </view>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    增删改需要将数据库权限更改:

    方法一：

    将读写权限全部改为：

    {
  "read": true,
  "write": true
}

    • 1
    • 2
    • 3
    • 4

    方法二：

    略……

    实现数据的添加：
    //添加数据
  add1(){
    wx.cloud.database().collection('book')
    .add({
       data:{
         bookName:'老人与海',
         author:'海明威',
         price:'50'
       }
    })
    .then(res =>{
     console.log('添加数据成功')
   })
   .catch(err =>[
     console.log('添加数据失败')
   ])
  },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    删除与修改：

    删除修改只能使用 doc 根据 id 查询

    //修改并更新
  update1(){
    wx.cloud.database().collection('book')
    .doc('058dfefe630d76b31761545328312d23')
    .update({
      data:{
         content:'sainahupanwanjie'
      }
    })
    .then(res =>{
      console.log('更新数据成功')
    })
    .catch(err =>[
      console.log('更新数据失败……')
    ])
  },
  //删除数据：
  remove1(){
    wx.cloud.database().collection('book')
    .doc('f6e08a64630d9f3b1548b2887ec506e1') //要删除的那条数据的_id
    .remove()
        .then(res => {
          console.log('删除成功',res)
          this.setData({  
          list : res.data
          })
        })
        .catch(err => { 
          console.log('删除失败……',err)
        })
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    参考文档链接：https://blog.csdn.net/qq_47354826/category_11261728.html

    小程序API

    https://www.w3xue.com/mobile/wxminiapp/hpm41q8p.html

    基础：

    API，全称Application Programming Interface，即应用程序编程接口。

    • API 是一些预先定义函数，目的是用来提供应用程序与开发人员基于某软件或者某硬件得以访问一组例程的能力，并且无需访问源码或无需理解内部工作机制细节。

    • API 就是操作系统给应用程序的调用接口，应用程序通过调用操作系统的 API而使操作系统去执行应用程序的命令（动作）。在 Windows 中，系统API是以函数调用的方式提供的。

    说明：

    • wx.on 开头的 API 是监听某个事件发生的API接口

      如：接受一个CALLBACK函数作为参数，当该事件触发时，会调用CALLBACK函数。

    • 如未特殊约定，其他API接口都接受一个OBJECT作为参数。

    • OBJECT中可以指定success,fail,complete来接收接口调用结果。

    参数名类型必填说明
    successFunction否接口调用成功的回调函数
    failFunction否接口调用失败的回调函数
    completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）
    外部 api 的引用示例:

    js文件：

    // pages/demo02/demo02.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    code:'',
    testList:[],
    dreamCode:'',
    dreamResult:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    self=this;
  },
  test1:function() {
    //访问外部api需请求：
      wx.request({
        url: 'http://api.tianapi.com/starinfo/index',
        method:'GET',
        //请求参数：
        data:{
          key:'9b46f4069f578a5808847c85ce6b93eb',
          name:'刘德华'
        },
        //接口调用成功的回调函数：
        success:function(res){
            console.log(res.data);
            self.setData({
              testList:res.data.code,
              testList:res.data.newslist
            })
          }
      })
  },
  test2:function() {
    wx.request({
      url: 'http://api.tianapi.com/dream/index',
      method:'GET',
      data:{
        key:'9b46f4069f578a5808847c85ce6b93eb',
        num:5,
        word:'西瓜'
      },  
      success: function(res) {
        console.log(res.data)
         //页面获得数据
        /*self.setData({
            dreamCode:res.data.code,
            dreamResult: res.data.newslist
        })*/
      }   
    })
  }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60

    wxml文件：

    
<text>pages/demo02/demo02.wxmltext>
<button open-type="share" bindtap="test2">周公解梦button>-
<view wx:for="{{dreamResult}}" >
    <view>梦到{{dreamResult[index].title}}------{{dreamResult[index].result}}view>
view>

<button type="primary" bindtap="test1">明星百科大全button>
<view wx:for="{{testList}}" >
  <view>名字：{{testList[index].nationality}}view> =
view> 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
  • 相关阅读:
    软件工程——期末复习知识点汇总
    ITE IT66021FN/BX HDMI 1.4接收器/接收芯片/收发器
    好细的Vue安装与配置
    聊聊HttpComponentsHttpInvokerRequestExecutor
    五分钟“手撕”栈
    SAP 物料分类账配置详解Part 1（ 基于SAP S/4HANA1909 版本）
    【学习笔记58】JavaScript面向对象
    2023复旦大学计算机科学技术（网络空间安全）保研记录
    【MATLAB源码-第52期】基于matlab的4用户DS-CDMA误码率仿真，对比不同信道以及不同扩频码。
    C语言K&R圣经笔记 2.4声明 2.5算术操作符 2.6关系和逻辑操作符
  • 原文地址：https://blog.csdn.net/weixin_55452293/article/details/126749852