微信小程序培训文档

微信小程序

1. ****全局配置,小程序的分页,分页配置

分页

"tabBar": {
    "selectedColor": "#ff3366",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath":"./images/home.png",
        "selectedIconPath": "./images/home-active.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/userConsole/userConsole",
        "iconPath": "./images/home.png",
        "selectedIconPath": "./images/home-active.png",
        "text": "用户"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "./images/home.png",
        "selectedIconPath": "./images/home-active.png",
        "text": "日志"
      }
    ]
  },

分页配置

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

获取点击的tab信息

  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },

2. ****bindtap=“clickMe” 函数绑定

3. ****this.setData({ }) 设置data 必要内容

4. ****app.js的钩子函数

onLaunch: function(){} // 小程序启动时触发

5. ****chooseLib.js 页面的钩子函数 必要内容

6. 微信小程序地图

wxml
<map></map>
js
wx.getLocation({
  type: 'wgs84',
  success: (res) => {
    var latitude = res.latitude // 纬度
    var longitude = res.longitude // 经度
  }
})

7. 微信小程序扫描

wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})

8. 小程序开发指南

9. 模块化

创建一个common.js，通过module.exports = {}的方式暴露出其中的函数，然后在相应的页面var xxx = require（）

10. ****数据绑定

<view wx:for="{{text}}" wx:key="name">
  <view>{{index}} + {{item.name}}</view>
  <view>{{index}} + {{item.age}}</view>
</view>

11.****条件渲染

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

12.模板

  <template name="msgItem">
    <view wx:for="{{text}}" wx:key="name">
      <text>{{item.name}} </text>
      <text> age: {{item.age}} </text>
    </view>
  </template>
  <template is="msgItem" data="{{text}}"/>

13.引用

引入文件，就是引入了文件中的模板，import没有传递性
import

<import src="../index/index.wxml" />
<view>
  <template is="msgItem" data="{{text}}" />
</view>

include会引入整个wxml文件的内容

14.数据库，云存储，云函数 云开发

小程序端api和服务端api不同 小程序端api

• 云函数

	wx.cloud.callFunction({
      name: 'login',
      data: {},
      success: res => {
        console.log('[云函数] [login] user openid: ', res.result.openid)
        app.globalData.openid = res.result.openid
        wx.navigateTo({
          url: '../userConsole/userConsole',
        })
      },

• 数据库，数据库操作大多需要openid
  全局常量 const db = wx.cloud.database()
  create 集合，要上传到云函数

	const cloud = require('wx-server-sdk')

	cloud.init()
	const db = cloud.database();
	// 云函数入口函数
	exports.main = async (event, context) => {
 	 return await db.createCollection('person')
	}

db.collection(‘xxx’).add({}) 增加数据传入data

db.collection(‘xxx’).where({}).get({}) 查询，传入查询参数

db.collection(‘xxx’).doc(id).update({}) 数据更新,doc传入数据id，一次一个，data参数为修改的内容

doc(this.data.personID[0]).remove 删除

• 云存储，上传多张图片,并显示成功存储的图片

     wx.chooseImage({
      count: 5,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      // 上传多张图片到云存储
      success: res => {
        const filePath = res.tempFilePaths;
        console.log(filePath);
        let container = [];//存放成功上传的图片，只有成功上传的图片才能显示
        const length = filePath.length;
        for (let i = 0; i < length; i++) {
        // 涉及到作用域这里必须用let，因为是promise回调函数，用var i一直等与最大时才会执行then里面的东西
        // 这时候i都是用的最大的，但是用let时，会为每个回调函数单独创建一个i，即i=1，2，3，4...，而不是最大的
          let cloudPath = "moreImg/" + filePath[i].match(/[A-Za-z0-9]+\.[a-z]+$/)[0];
          wx.cloud.uploadFile({
            cloudPath: cloudPath,
            filePath: filePath[i],
          }).then(res => {
            container.push(filePath[i]); // 成功时存入container，再赋值
            console.log(res)
            this.setData({
              img: container
            })
          }).catch(err => {
            console.log(err);
          })
        }
      }
    })

15. 引入iview组件 教程

16. 自习任务 墨刀