小程序开发

注册小程序账号

image.png

image.png

安装开发者工具 开发者工具下载地址:微信开发者工具

WeUI 有两个版本,一个是普通的 HTML5 版本,另外是小程序版本

[

image.png

image.png

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

image.png

自定义组件

image.png

插件

image.png

image.png

image.png

image.png

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

捕获是先于冒泡的触发

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

image.png

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

image.png

<view class="life-style">
    <view class="item" wx:for="{{lifeStyle}}" data-name="{{item.name}}" data-detail="{{item.detail}}" bindtap="indexDetail">
      <view class="title">
        <icon type="{{item.icon}}"></icon>
        {{item.name}}
      </view>
      <view class="content">{{item.info}}</view>
    </view>
</view>
// weather/index.js
// 响应事件的处理函数
indexDetail(e) {
  const {name, detail} = e.currentTarget.dataset
  wx.showModal({
    title: name,
    content: detail,
    showCancel: false
  })
}

image.png

image.png

image.png

路由

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

Page({
  gotoUrl(){
    let url = 'pages/another/url'
    wx.navigateTo({
      url
    })
  }
})

flex 布局

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

image.png

需要先调用 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

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

image.png

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

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

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

熟悉GIT

小程序架构解密

image.png

image.png

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

image.png

image.png

image.png

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

image.png

image.png

image.png

image.png

image.png

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

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

image.png

image.png

image.png

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的页面

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券