小程序开发经验分享

最新推荐文章于 2023-01-03 15:25:45 发布

J1a_l3

最新推荐文章于 2023-01-03 15:25:45 发布

阅读量802

点赞数 1

分类专栏：小程序文章标签：小程序开发入门

本文链接：https://blog.csdn.net/weixin_43409286/article/details/85163709

版权

小程序专栏收录该内容

5 篇文章 0 订阅

订阅专栏

小程序开发的优势

小程序是有别于传统 Web App、HTML5、原生 App 以及微信公众号的一种新的应用形式，由微信团队于 2017 年 1 月对外发布的，经过近两年的发展，小程序越来越成熟，小程序研发也越来越受到重视。什么是小程序？用张小龙自己的话来说：

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无须安装卸载。

和H5对比

哪些更适合使用小程序开发

小程序开发流程

申请账号->安装开发工具->编写代码->进行测试->上传版本->提交审核->通过审核->发布上线

注册申请小程序

所有人都可以申请；使用的注册邮箱需要没注册过小程序、公众号、服务号等

注册地址： https://mp.weixin.qq.com/

在这里插入图片描述
注册界面截图

填写小程序信息、获取小程序appId

设置界面截图

小程序开发工具

用来编写、编译小程序代码，进行小程序预览、调试、发布

下载地址： https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

开发工具截图

VS Code

实际开发工具；功能更强大，编写更方便；可以实时在开发工具中查看

下载地址： https://code.visualstudio.com/

VSCode截图

安装插件：

VSCode截图

小程序文件介绍

小程序文件截图

images文件夹

lib文件夹

weui.wxss 可以复用并且用来引入的css样式

pages文件夹

wxml 类似于html

wxss 类似于css

js 每个单独页面中的变量、方法

json 页面配置文件

utils文件夹

util.js 可复用的js方法

app.js 小程序全局相关js

app.json 小程序配置文件

小程序的相关配置

全局配置app.json

小程序配置截图

页面配置page.json

小程序配置截图

app.wxss 小程序全局app样式

小程序UI库-WEUI

project.config.json 工具项目配置文件

WXSS

小程序中的单位 rpx

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

WXML

列表渲染wx:for

实例：HFGA页面和“我的”页面中，业务模块从后台动态获取

实例代码截图

条件渲染wx:if

实例：“我的”页面中根据授权状态的不同显示不同内容

实例代码截图

模板的使用

模板的定义

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

模板的使用：使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：

<template is="msgItem" data="{{item}}"/>

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

实例：我发起的、我审批的、抄送我的、信息查询等各个模块中的列表页、详情页中，模块相同，显示数据相同，样式也相同

实例代码截图

form表单

input输入框-type属性

type=“text” 文本输入键盘

type=“number” 数字输入键盘

type=“digit” 身份证输入键盘

type=“idcard” 带小数点的数字键盘

input输入框-常用事件

bindinput 键盘输入时触发，处理函数可以直接return一个字符串，将替换输入框的内容。

实例：用印申请中的发往单位、合同金额、招待申请中的招待单位都使用了该事件用来匹配单位，或对输入数据进行判断，进行下一步操作

bindfocus 输入框聚焦时触发

bindblur 输入框失去焦点时触发

input-placeholder

placeholder 输入框为空时占位符

placeholder-style 指定placeholder的样式

placeholder-class 指定placeholder的样式类

实例代码截图

picker选择器-mode

普通选择器：mode = selector

实例：业务申请中审批人的选择

实例代码截图

多列选择器：mode = multiSelector

实例：公车申请中的借出时间、归还时间的选择

实例代码截图

时间选择器：mode = time

日期选择器：mode = date

实例：年假申请中的时间选择

实例代码截图

picker选择器-常用属性

range mode为 selector 或 multiSelector 时，range 有效

range-key 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容

实例：业务申请中的审批人，后台传过来的是一个数组，即range；显示并且选择的是用户名，即range-key

radio单选

radio组件截图

实例：年假申请中的休假次数的选择

checkbox多选

checkbox组件截图

实例：用印申请中用印类型的选择

button组件-基本属性

size default 按钮的大小

type default 按钮的样式类型

plain false 按钮是否镂空，背景色透明

disabled false 是否禁用

hover-class 指定按钮按下去的样式类。当 hover-class=“none” 时，没有点击态效果

button组件-常用方法

form-type 用于form组件，点击分别会触发form组件的submit/reset事件

bindgetuserinfo 用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致

bindgetphonenumber 获取用户手机号回调

button组件截图

JS

Page(Object) 构造器

Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

页面的初始数据

<view>{{text}}</view>
<view>{{array[0].msg}}</view>

Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

生命周期回调

onLoad 生命周期回调—监听页面加载

onShow 生命周期回调—监听页面显示

onReady 生命周期回调—监听页面初次渲染完成

onHide 生命周期回调—监听页面隐藏

onUnload 生命周期回调—监听页面卸载

onLoad(options)

页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

实例：页面A通过跳转链接"http://www.baidu.com?a=5&b=12"的url传值a=5，b=12到B页面，在B页面的onLoad(options)方法中打印options，可以看到A页面的数据a和b已经传到了B页面

onShow() 页面显示/切入前台时触发-需要经常性判断页面状态等信息时使用。

实例：HFGA页面和“我的”页面中，需要经常性判断授权信息是否丢失，用户openId等数据是否丢失，以及我发起的、我审批的、抄送我的等模块是否有新的消息通知，而此时不适合使用onLoad()函数进行判断（页面加载时触发。一个页面只会调用一次），因此使用onShow()函数。

页面事件处理函数

onPullDownRefresh 监听用户下拉动作

onReachBottom 页面上拉触底事件的处理函数

实例：我发起的、我审批的、抄送我的、信息查询等模块，默认显示5条数据，下拉时触发事件获取更多数据，提高页面性能

分享转发事件-onShareAppMessage(Object)

监听用户点击页面内转发按钮（button组件 open-type=“share”）或右上角菜单“转发”按钮的行为，并自定义转发内容。注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮

自定义转发内容

小程序转发截图

小程序版本

预览、真机调试-开发版

使用开发者工具可以预览小程序，帮助开发者检查小程序在移动客户端上的真实表现。

点击开发者工具顶部操作栏的预览按钮，开发者工具会自动打包当前项目，并上传小程序代码至微信的服务器，成功之后会在界面上显示一个二维码。使用当前小程序开发者的微信扫码即可看到小程序在手机客户端上的真实表现。

体验版

上传版本截图
版本说明截图

开发版本使用开发者工具，可将代码上传到开发版本中。开发版本只保留每人最新的一份上传的代码。点击提交审核，可将代码提交审核。开发版本可删除，不影响线上版本和审核中版本的代码。

审核中版本只能有一份代码处于审核中。有审核结果后可以发布到线上，也可直接重新提交审核，覆盖原审核版本。

线上版本线上所有用户使用的代码版本，该版本代码在新版本代码发布后被覆盖更新。