小程序开发

￡神魔★判官ぃ 2021-09-29 11:04 499阅读 0赞

注册小程序账号  
![image.png][]

![image.png][image.png 1]

安装开发者工具  
开发者工具下载地址：[微信开发者工具][Link 1]

WeUI 有两个版本，一个是[普通的 HTML5 版本][HTML5]，另外是[小程序版本][Link 2]。

\[![image.png][image.png 2]

![image.png][image.png 3]

.json 后缀的 JSON 配置文件  
.wxml 后缀的 WXML 模板文件  
.wxss 后缀的 WXSS 样式文件  
.js 后缀的 JS 脚本逻辑文件

![image.png][image.png 4]  
自定义组件  
![image.png][image.png 5]

插件

![image.png][image.png 6]

![image.png][image.png 7]

![image.png][image.png 8]

![image.png][image.png 9]

bind 不会阻止冒泡  
catch 会阻止事件继续冒泡

捕获是先于冒泡的触发

在下面的代码中，点击 inner view 会先后调用 handleTap2、handleTap4、handleTap3、handleTap1。

![image.png][image.png 10]

如果将上面代码中的第一个 capture-bind 改为 capture-catch，将只触发 handleTap2

![image.png][image.png 11]

// weather/index.js
    // 响应事件的处理函数
    indexDetail(e) {
      const {name, detail} = e.currentTarget.dataset
      wx.showModal({
        title: name,
        content: detail,
        showCancel: false
      })
    }

![image.png][image.png 12]

![image.png][image.png 13]

![image.png][image.png 14]

路由

<navigator url="跳转页面URL" >跳转到新页面</navigator>

<view bindtap="gotoUrl">跳转页面</view>
    
    Page({
      gotoUrl(){
        let url = 'pages/another/url'
        wx.navigateTo({
          url
        })
      }
    })

flex 布局

小程序·云开发提供数据库、云函数和静态存储三大功能

![image.png][image.png 15]

需要先调用 wx.cloud.init 对云开发进行初始化：

wx.cloud.init({
      env: 'tianqi-xxx'
    })
    
    需要传入 env 参数，该参数为创建小程序·云开发时的环境 ID

// 初始化
    wx.cloud.init({
      env: 'tianqi-xxx'
    })
    // 获取数据库实例
    const db = wx.cloud.database()
    // 增
    db.collection('集合名称').add({
      data: {} // 插入的数据
    }).then(res => {
      // 可以通过 res._id 获取创建的记录的 id
      console.log(res._id)
    })
    // 删
    db.collection('集合名称').doc('文档 ID').remove().then(res => {
      console.log('removed')
    })
    // 改
    db.collection('集合名称').doc('文档 ID').update({
      data: {
        title: '我的第 1 篇文章', // 只更新 title 字段，其他不更新
      }
    }).then(res => {
      // 可以通过 res._id 获取创建的记录的 id
      console.log(res._id)
    })
    // 查
    db.collection('集合名称').doc('文档 ID').get().then(res => {
      // 打印结果，res.data 即为记录的数据
      console.log(res)
    })
    const _ = db.command // 取指令
    db.collection('集合名称').where({
      // 查找条件
      category: 'computer',
      properties: {
        memory: _.gt(8), // 表示大于 8
      }
    })

![image.png][image.png 16]

// 上传，上传后会返回资源的 ID
    wx.cloud.uploadFile
    // 下载
    wx.cloud.downloadFile
    // 根据资源 ID 获取资源访问地址
    wx.cloud.getTempFileURL
    // 根据资源 ID 列表删除某资源
    wx.cloud.removeFile

![image.png][image.png 17]

具有扎实的前端语言基础，良好的ES6基础

有完整的微信小程序项目经验

熟悉掌握至少一种前端框架

熟悉GIT

## 小程序架构解密 ##

![image.png][image.png 18]

![image.png][image.png 19]

小程序生命周期  
小程序生命周期包括应用的生命周期（逻辑层 App Service）和页面的生命周期（视图层 View），两者支持的事件不同，详见官方文档中的这张配图。

![image.png][image.png 20]

![image.png][image.png 21]

![image.png][image.png 22]

Gulp 和 webpack  
Gulp 来搭建小程序开发环境

![image.png][image.png 23]

![image.png][image.png 24]

![image.png][image.png 25]

![image.png][image.png 26]

![image.png][image.png 27]

## Gulp构建的微信小程序开发 ##

全局安装gulp-cli

$ npm install --global gulp-cli

import wepy from 'wepy';
    
    // 通过继承自wepy.page的类创建页面逻辑
    export default class Index extends wepy.page {
        //可用于页面模板绑定的数据
        data = {
          motto: 'Hello World',
          userInfo: {}
        };
    
        //事件处理函数(集中保存在methods对象中)
        methods = {
          bindViewTap () {
            console.log('button clicked');
          }
        };
    
        //页面的生命周期函数
        onLoad () {
          console.log('onLoad');
        };
    }

![image.png][image.png 28]

基于gulp+less构建的微信小程序工程项目  
项目图片自动压缩  
ESLint代码检查  
使用命令行快速创建page、template和component

![image.png][image.png 29]

![image.png][image.png 30]

![image.png][image.png 31]

Tasks:
      dev              开发编译，同时监听文件变化
      build            整体编译
    
      clean            清空产出目录
      wxml             编译wxml文件（仅仅copy）
      js               编译js文件，同时进行ESLint语法检查
      json             编译json文件（仅仅copy）
      wxss             编译less文件为wxss
      img              编译压缩图片文件
      watch            监听开发文件变化
      
      auto             自动根据模板创建page,template或者component(小程序自定义组件)
    
    gulp auto 
    
    选项：
      -s, --src        copy的模板                     [字符串] [默认值: "_template"]
      -p, --page       生成的page名称                                       [字符串]
      -t, --template   生成的template名称                                   [字符串]
      -c, --component  生成的component名称                                  [字符串]
      --msg            显示帮助信息                                           [布尔]
    
    示例：
      gulp auto -p mypage           创建名为mypage的page文件
      gulp auto -t mytpl            创建名为mytpl的template文件
      gulp auto -c mycomponent      创建名为mycomponent的component文件
      gulp auto -s index -p mypage  复制pages/index中的文件创建名称为mypage的页面

--------------------

## 请点赞！因为你的鼓励是我写作的最大动力！ ##

![官方微信公众号][aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWYwYzExMDQxYTc2NTYzZTc]

吹逼交流群：**711613774**

![吹逼交流群][aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWQ5ZDY0ZmEyOTAzNzFlYTUucG5n]

[image.png]: /images/20210724/e4f5014c7eb74e749c02e25a8bf1c2b5.png
[image.png 1]: /images/20210724/7efde48457384c2b8f8ad8f77d6d1e67.png
[Link 1]: https://link.juejin.im/?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fdevtools%2Fdownload.html
[HTML5]: https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2FTencent%2Fweui
[Link 2]: https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2FTencent%2Fweui-wxss
[image.png 2]: /images/20210724/6f7e7ba145c44dccbadc2995ec21edbd.png
[image.png 3]: /images/20210724/2ee26009bebb4d31b8a9d446ffe9863c.png
[image.png 4]: /images/20210724/590861d4b6fb42e5af322d1ea3e4372b.png
[image.png 5]: /images/20210724/247a900d8e8746aa84ccb7b735d9a15d.png
[image.png 6]: /images/20210724/11525355eb0046b3b991e1b244953ae0.png
[image.png 7]: /images/20210724/369e028accf843409c6f726380a8d2c2.png
[image.png 8]: /images/20210724/b9f67b0964854a6b99ea8b020ff48f70.png
[image.png 9]: /images/20210724/d7b32f848a2c4b3aa90b695d594f5acd.png
[image.png 10]: /images/20210724/15b466feabeb44d18447b1d153346db4.png
[image.png 11]: /images/20210724/00a8060f0bb9475da7b65e18ff3e75ec.png
[image.png 12]: /images/20210724/9c3d405508f24d8bac127f477ae56f17.png
[image.png 13]: /images/20210724/7d0735f93d8f4d1d8c0cdcb33793040e.png
[image.png 14]: /images/20210724/ecb4dec127664b21bccff9bd650e6d4f.png
[image.png 15]: /images/20210724/8e141d2a15d94a70a48d880427d12a49.png
[image.png 16]: /images/20210724/51c4c77500b24f7baac13a313961af9e.png
[image.png 17]: /images/20210724/f589973a40da4c5ead38ef90b665aa5d.png
[image.png 18]: /images/20210724/afda97df0acb4e779deed96c01686912.png
[image.png 19]: /images/20210724/f993cca5fa37431b889c5f154959723a.png
[image.png 20]: /images/20210724/f23bfa86d10646faa6d900e8db825019.png
[image.png 21]: /images/20210724/66ecaa2347324061983a8b4ac943644c.png
[image.png 22]: /images/20210724/1be7b29ec28843f1810a18a023514ec5.png
[image.png 23]: /images/20210724/f5d12eb546b04669bb1be02239eb8d05.png
[image.png 24]: /images/20210724/b9e7b751bc704a9f82d0e72953d4b502.png
[image.png 25]: /images/20210724/9c4a50ce415b4552854602acaccfd559.png
[image.png 26]: /images/20210724/f6f2e55814eb43a89fc96f820ccf8bdb.png
[image.png 27]: /images/20210724/c118b5fa3330425fa35ae844774b778d.png
[image.png 28]: /images/20210724/57c7424ba6064bb09cc2912a69804829.png
[image.png 29]: /images/20210724/d5bf5165ca7d403fb4cb93a094056452.png
[image.png 30]: /images/20210724/3e0e8c91b2ba4c27bd89c79a1c569bf3.png
[image.png 31]: /images/20210724/7705a2c9209849eba0eb6e31004db795.png
[aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWYwYzExMDQxYTc2NTYzZTc]: /images/20210724/e3fd53d5e3b2451cabb279b21031dfbb.png
[aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWQ5ZDY0ZmEyOTAzNzFlYTUucG5n]: /images/20210724/97039949476a45899bf75606355e71e9.png