余温旧梦-王世彪的博客
关注公众号
  • 开发桌面程序
  • javascript教程
  • css样式
  • vuejs
  • 部署免费CDN
  • SEO搜索引擎优化
  • vuepress教程
  • redis分布式缓存
  • Golang
  • PHP
  • Python
  • Java
  • NodeJs
  • tomcat
  • ELK
  • Mysql数据库
  • Nosql数据库
  • C/C++底层开发
  • 音视频/流媒体
  • linux服务器
  • nginx服务器
  • 容器技术
  • 负载均衡
  • 项目管理
  • 持续集成
  • 大数据
  • 微信公众号运营
  • markdown用法
赞一个
友链
联系作者

王世彪

努力做个影响他人滴人
关注公众号
  • 开发桌面程序
  • javascript教程
  • css样式
  • vuejs
  • 部署免费CDN
  • SEO搜索引擎优化
  • vuepress教程
  • redis分布式缓存
  • Golang
  • PHP
  • Python
  • Java
  • NodeJs
  • tomcat
  • ELK
  • Mysql数据库
  • Nosql数据库
  • C/C++底层开发
  • 音视频/流媒体
  • linux服务器
  • nginx服务器
  • 容器技术
  • 负载均衡
  • 项目管理
  • 持续集成
  • 大数据
  • 微信公众号运营
  • markdown用法
赞一个
友链
联系作者
  • css

  • 游戏开发

  • android

  • golang

  • javascript

  • vuejs

  • 小程序

    • 微信小程序开发基础
      • 小程序开发者工具
      • 小程序目录结构
      • 小程序全局配置文件
      • 数据绑定
      • 运算(表达式)
      • 数组或对象渲染
      • block标签
      • 条件渲染
      • 事件绑定
      • 样式
      • 组件
      • 自定义组件
      • 事件
      • 应用的生命周期
  • cdn

  • seo

  • vuepress

  • 移动端真机调试方法
  • 前端
  • 小程序
王世彪
2022-01-19
目录

微信小程序开发基础

# 微信小程序开发基础

本文讲述微信小程序的开发基础。

建议:使用其他工具作为代码编辑器,使用微信开发着工具作为预览、编译工具。
同时要给第三方开发工具(如vscode)安装小程序开发插件,便于代码提示。

# 小程序开发者工具

主要设置: 设置外观 可以开发一个完整的 编译模式:通过配置编译模式,默认在预览页面预览指定页面。 预览和真机调试: 切后台:模拟小程序中页面的切换 清缓存:用到个人信息或本地存储时会用到。 微信账号详情: 可以修改appID 测试基础库:需要指定内核版本 不校验合法域名:要勾选上,否则无法请求外部的接口 弱网:支持模拟3G、4G、wifi等网络环境。 页面路径:在模拟器的下方可以看到页面的路径和参数 资源管理器: 代码编辑器: 调试器:类似于谷歌开发者工具

# 配置node环境

若想编译或预览小程序,那么必须事先配置好node环境。
若开发者工具所在的系统安装了NVM(node多版本管理工具),那么需要做额外配置,开发者工具才能识别到nvm下的node环境。
修改工程根目录下的project.config.json,修改配置项beforeCompile、beforePreview、beforeUpload。示例如下:

  "scripts": {
    "beforeCompile": "source ~/.oh-my-zsh/lib/wangshibiao.zsh && npm run tsc",
    "beforePreview": "source ~/.oh-my-zsh/lib/wangshibiao.zsh && npm run tsc",
    "beforeUpload": "source ~/.oh-my-zsh/lib/wangshibiao.zsh && npm run tsc"
  },

您根据实际的情况改为自己的配置即可。

# 小程序目录结构

WXML:类似于html WXSS:类似于css pages: 存放所有的页面代码 app.js:入口文件 sitemap: 只需要在发布时使用到。

# 小程序全局配置文件

app.json

建议在开发者工具中编辑配置,因为有智能提示。

# pages配置

  • 定义了有哪些页面
    注意不要写后缀名
  • 自动生成一个页面相关文件
    在开发者工具中,pages配置下增加一行,然后刷新即可。
  • 设置“打开开发者工具时,默认打开某页面”
    将对应页面的路由配置挪到首行。

# windows配置

nagvigationBar...: 导航栏配置,可以设置颜色、标题、标题的颜色。

# tabbar配置

用于配置小程序底部的菜单。 示例如下:

  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "pages/icons/1.jpg",
      "selectedIconPath": "pages/icons/1_selected.jpg"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "启动日志",
      "iconPath": "pages/icons/2.jpg",
      "selectedIconPath": "pages/icons/2_selected.jpg"
    }]
  }

# 页面配置

可以针对每个页面配置导航栏、上拉下拉刷新等。

# sitemap配置

用于微信搜索。

# 数据绑定

text相当于span标签 行内元素 不会换行。
view相当于div标签 块级元素 会换行

.js的示例:

// pages/demo/demo1.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    "username": "王世彪"
  }
})

数据定义在Page.data下。

.wxml的示例:

<!--pages/demo/demo1.wxml-->
<view>{{username}}</view>

使用来做渲染。

# 运算(表达式)

支持在{{}}中使用表达式(如数字加减、字符串拼接、三元运算)。

# 数组或对象渲染

wx:for支持对数组或对象做渲染。
wx:key用于绑定item的唯一属性,用于提高性能。
wx:key="*this",标识数组是一个普通数组, *this表示是循环项。
当出现嵌套循环时,注意绑定的名称不要重名。
若只有一层循环的话,wx:for-item和wx:for-index可以不写,因为小程序已默认设置。

# block标签

  1. 占位符标签
  2. 页面渲染时会把该标签去掉。

# 条件渲染

  • hidden
    当标签频繁切换显示时,优先使用hidden
    原理:通过添加样式的方式来切换显示。
    不要和display样式混合使用,否则会被覆盖。
  • wx:if
    当标签不频繁切换显示时,优先使用wx:if
    原理:把标签从页面结构中移除掉。

# 事件绑定

  • 绑定输入框
    bindinput
    从事件源对象中找到对应的变量:e.detail.value 示例:
this.setData({
  num: e.detail.value
})
  • 绑定点击事件
    bindtap
    无法再小程序当中的事件中直接传参 通过自定义属性传递参数,然后在事件处理中从事件源获取自定义属性。
    示例如下:
获取自定义属性operation
const operation = e.currentTarget.dataset.operation;

# 样式

# 单位

rpx,规定屏幕宽为750rpx。使得宽高自适应。
小程序中不需要主动引入样式文件。
需要把设计稿中的px转换为rpx单位。

利用calc属性,可以在wxss中使用表达式,示例如下:

width: calc(750rpx * 100 / 375)

# 样式导入

使用@import导入样式表。
只支持相对路径。

# 样式选择器

不支持通配符*。
默认不支持less,但可以通过在vscode中添加插件即可实现。
less也支持导入。

# 组件

常见组件:view、text、rich-text、button、image、navigator、icon、swiper、radio、checkbox。

  • view
    替换原来的div标签
  • text
    文本标签
    只能嵌套text
    长按文字可以复制(只有该标签有这个功能):添加属性selectable
    可以对空格、回车进行编码
  • image
    腾讯对小程序的大小有要求,不能超过2M, 所以图片要使用网络图片。
    image组件有默认宽高:宽320px,高240px
    mode参数用来控制图片内容如何和image标签的宽和高做适应。
    支持懒加载: 添加属性lazy-load
  • swiper
    用于轮播。
  • nagigator
    导航组件。
    支持绝对路径和相对路径。
    是块级元素,默认会换行,可以直接加宽度和高度。
    target: 跳转到自己或其他小程序。
  • rich-text
    通过nodes属性来实现
  1. 标签字符串(常用)
  2. 对象数组
  • button
    button除了拥有按钮的功能外,还有如下开放能力:
open-type:
1. contact 直接打开 客服对话功能 需要在微信小程序的后台配置
   只能够通过真机调试来打开
2. share 转发当前的小程序到微信朋友中 不能把小程序分享到朋友圈
3. getPhoneNumber 获取当前用户的手机号码信息 结合一个事件来使用 只有企业版的小程序账号有权限获取用户的收集号码
  1> 绑定一个事件bindgetphonenumber
  2> 在事件的回调函数中,通过参数来获取信息
  3> 获取到的信息,已经加密过了
     需要用户自己搭建小程序的后台服务器,在后台服务器中进行解析手机号码,返回到小程序中
4. getUserInfo 获取当前用户的个人信息
  1> 使用方法类似获取用户的手机号码
  2> 可以直接获取未加密的字段
5. launchApp 在小程序中直接打开app  
  1> 需要在app中通过app的某个链接打开小程序
  2> 在小程序中再通过这个功能重新打开app
6. openSetting 打开小程序内置的授权页面
  1> 授权页面中只会出现用户曾经点击过的权限
7. feekback 打开小程序内置的意见反馈页面
  只能够通过真机调试来打开
  • icon图标
  • radio
    需要和radio-group搭配使用
  • checkbox
    需要和checkbox-group搭配使用

# 自定义组件

创建组件 -> 声明组件 -> 使用组件

# 创建组件

新建目录,利用开发者工具的新建Component

# 声明组件

在要使用组件的地方声明组件, 在usingComponents参数下声明。

# 事件

  • 页面.js文件中,存放事件回调函数的时候,存放在data同层级下
  • 组件.js文件中,存放事件回调函数的时候,必须要存在methods中

# 应用的生命周期

#小程序
上次更新: 2022-01-19 22:01:20
vuejs使用momentjs日期库格式化时间
部署免费cdn

← vuejs使用momentjs日期库格式化时间 部署免费cdn→

最近更新
01
mysql创建用户
04-09
02
golang错误处理最佳实践
03-17
03
基于proto文件生成rpc接口定义文档
03-11
更多文章>
Theme by Vdoing | Copyright © 2019-2022 王世彪 | MIT License
冀ICP备19016776号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式