微信小程序

微信小程序

小程序项目结构

• 静态页面的构成
  • HTML：结构
  • css:样式
  • js:行为
• 小程序
  

• 页面全部存放在pages, 而且pages目录只能存放页面
  • 页面包括4个文件，pages/页面名/页面名.js(wxss,json,wxml)
    • 4个文件的文件名必须一致
    • xxx页面4个文件
      • xxx.js 页面逻辑
      • xxx.json 页面配置
      • xxx.wxml 页面结构
      • xxx.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）
  }
}

• 如果设置页面背景颜色，可在app.wxss中设置：

page{
  background-color: #eeeeee;
}

基本标签的使用

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

• text：显示文本的

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

• view包裹作用

  • 相当于是div

• image 就是显示图片

• button按钮

  • size:mini :表示小的按钮

<view>
  <!-- 小按钮 -->
  <button>默认的按钮</button>
  <button size="mini">小按钮</button>
</view>

基本语法wxml:

1.数据绑定

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

2.定义数据

<!--index.wxml-->
<view>
  {{ test }}
</view>
//示例：
<view>
    <text>相当于行内标签</text>
    时间：{{time}}
</view>

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

3.属性绑定

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

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

4.遍历

1. 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 ]
     },
   })
   

2. 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> 
   

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

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

   等同于

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

   • 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"
  },
})

三目运算

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

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
    })
  },
})

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

<!--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
    }
  },
})

7.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>

• index.js

<!--index.js-->
Page({
  data: {
    color:"blue",
    flag:true,
    color2:"red",
    bg:"orange"
  },
})

• index.wxss

<!--index.wxss-->
.color1 {
  color: #cc1;
}
.bg2 {
  background: orange;
}
.color2 {
  color: pink;
}

获取用户基本数据信息:

参数 object

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

其中 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>

<-- 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. Open平台授权接口：包括App授权登录、公众号H5授权登录、网站扫码授权登录，不再返回用户性别及地区信息；

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

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

---

授权

接口wx.getUserProfile，只能使用catchtap或者bindtap进行调用(ps:可以再wx.showmodel中使用)，并不能再onload、onshow等位置直接调用，并且返回参数有所改变

接口wx.getUserProfile返回的数据类型：

// An highlighted block
 wx.showModal({
   title: '温馨提示',
   content: '正在请求您的个人信息',
   success(res) {
     if (res.confirm) {
       wx.getUserProfile({
       desc: "获取你的昵称、头像、地区及性别",
       success: res => {
         console.log(res)
         let wxUserInfo = res.userInfo;
       },
       fail: res => {
       	 //拒绝授权
         that.showErrorModal('您拒绝了请求');
         return;
       }
     })} else if (res.cancel) {
       //拒绝授权 showErrorModal是自定义的提示
       that.showErrorModal('您拒绝了请求');
       return;
     }
   }
 })

建立云数据库

建表：

点击项目上方的云开发，任务栏有数据库，加号建表，添加记录

添加字段有两种方法：

1.直接添加记录

2.JSON模式

导入MySQL中的表：

在SQLyog中，选中你要导出的表，右键，备份/导出------->导出表数据作为

如果选项中有JSON文件也可，因为在云数据库导入的时候允许CSV 和 JSON 两种类型。

CSV(逗号分隔值)是一种用来存储数据的纯文本文件，通常都是用于存放电子表格或数据的一种文件格式 。如果电脑有 Microsoft Excel的话，.csv文件默认是被Excel打开的。

在云开发控制台：有导入

将刚保存的表格数据导入即可，.json文件可能会出问题。

云端数据初始化：

app.js中：

-- app.js

App({
  onLaunch: function () {
    -- 云初始化 wx.cloud.init
    wx.cloud.init({
      traceUser: true,
      -- 传入参数指定云环境，指向第一个创建的云环境ID，如果删除了这个环境，就指向另外一个
      env:'cloud1-0gdcaicsce323e0e' 
    })
  }  
});

同时在要使用云数据库的 .js页面 上方添加，连接数据库必备

const db = wx.cloud.database()

数据库权限管理：

1. 在微信开发工具中，数据权限设置为所有用户可读，仅创建者可读写时，调用云函数能对云数据库进行update 
  {
  "read": true,
  "write": "doc._openid == auth.openid"
}
2. 数据权限设置为所有用户可读，调用云函数仍然能对云数据库进行update
{
  "read": true,
  "write": false
}
3. 数据权限设置为所有用户不可读写，调用云函数仍然能对云数据库进行update
{
  "read": false,
  "write": false
}
4. 数据权限设置为所有用户可读写，小程序端（即用户）能够对云数据库进行update
{
  "read": true,
  "write": true
}

实现云数据库的查询

创建页面：

在 .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')
    .where({
        
    }).get()
    //请求成功处理方式
    .then(res =>{
      console.log('请求成功!!!',res.data)
      this.setData({
        	//动态的将数据库中的数据存放到list数组中
        	list:res.data
      })
     })
     //请求失败处理方式
    .catch(err =>{
        console.log('请求失败……',err)
     })
   }
})

方式二：

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

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

页面显示：

<!--pages/database/database.wxml-->
<text>pages/database/database.wxml</text>
<!-- wx:for是微信数据绑定的一种方式，该list数组有多少数据就显示多少 -->
<view wx:for="{{list}}" wx:key="key">
<!-- item相当于数组名+下标的结合体(list.[id])，适用于调用数组所有数据 -->
    <view>作者:{{item.author}},
          书名:{{item.bookName}},
          类目:{{item.category}},
          内容:{{item.content}},
          价格:{{item.price}}
          
    </view>
</view>

有条件的查询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)
     })
},

查询单条数据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>

增删改需要将数据库权限更改:

方法一：

将读写权限全部改为：

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

方法二：

略……

实现数据的添加：

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

删除与修改：

删除修改只能使用 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)
        })
},

**参考文档连接：**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来接收接口调用结果。

参数名	类型	必填	说明
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

外部 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
        })*/
      }   
    })
  }
})

wxml文件：

<!--pages/demo02/demo02.wxml-->
<text>pages/demo02/demo02.wxml</text>
<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> 

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
    })*/
  }   
})

}
})

wxml文件：

```xml
<!--pages/demo02/demo02.wxml-->
<text>pages/demo02/demo02.wxml</text>
<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>