小程序开发攻略

简介: 小程序开发攻略

目录


前言


近期了解了公众号,公众号可以设置关联小程序跳转,因此我编写了一个简单的小程序,做一个简单的攻略笔记。


包括设置与使用数据的方法、小程序绑定事件传参的方法,小程序异步请求方法及注意事项,公众号自定义菜单绑定小程序路径内容介绍。


微信开发者工具


下载链接:微信开发者工具。


创建小程序


个人名义创建小程序必须要邮箱,一个邮箱只能绑定一个公众号或者一个小程序,挺麻烦的,因此可能需要准备很多个邮箱。

进入微信公众平台以未绑定邮箱注册一个小程序,获得小程序id。

打开微信开发者工具,创建项目,输入对应id,模板我选择的是js基础模板。

image.png

基础页面


页面组成


页面在pages中,一个页面有四部分组成。

.wxml与html相仿,但是标签用法存在不同。

.wcss就是普通的css写法,可以添加类,在wxml中使用。

.json是一些配置信息,比如"navigationBarTitleText"可以配置小程序上方显示的页面名称。

.js就是脚本代码,生命周期在基础模板中都有,常用的onLoad可以在进入页面加载时执行。

image.png

创建页面

  1. 可以在pages中新建一个文件夹,名字起为页面名。
  2. 右击文件夹,新建page。

image.png

注意删除页面时,要记得去根目录的app.json中pages属性把对应的页面路径删除。

image.png

数据的设置与使用


从js到wxml

  1. 数据的处理一般在js文件中,js是一个Page包裹着一个对象,数据状态data有点类似react的state,对象属性data中可以设置初始值,同时生命周期也在该对象中。

image.png

设置data默认值使用this.setData,也类似react中的this.setState。


this.setData({ show: true })


页面获取时使用{{}}中间的值就可以识别data中的变量,用法非常丰富,总结起来就是可以当成字符串在你任何想要的地方使用


可以直接在文本使用

<view>
   注意信息时效性!更新于{{result.updatetime}}
</view>


可以在元素样式中使用


<view style="color: {{type===item.value?'red':''}};">
</view>


可以在元素属性中使用


<image src="{{ result.photo }}"/>

从wxml到js

  1. 页面与脚本交互,小程序的点击事件是bindtap,后面绑定方法名,方法名在js文件设置,与data属性同级。

image.png

小程序绑定方法名时不能直接传递参数,必须要通过设置属性比如data-xxx。

//错误
<view bindtap="changeType({{item.value}})"></view>
//正确
<view bindtap="changeType" data-value="{{item.value}}"></view>

获取参数时,可以通过event.currentTarget.dataset.xxx获取,xxx与设置属性时对应。

changeType: function (event) {
 this.setData({ type: event.currentTarget.dataset.value }) 
}

数据请求


  1. 微信小程序请求不支持fetch,可以使用wx.request,比如在onLoad中加载初始数据。
  2. 因为回调中无法正确识别this指向,因此我们得在内部声明一下_this
onLoad: function () {
  const _this = this
  wx.request({
    url: 'https://xxxx.com/xxxx',
    method: 'GET',
    data: {},
    success: function success(res) {
      _this.setData({ data: res.data })
    },
    fail: function fail() {
    },
    complete: function complete() {
    }
  });
},

注意,请求的必须是域名且是备案过的,否则上线的小程序是用不了的,我们还需要在小程序开发管理-开发设置-服务器域名中设置request白名单。

image.png

公众号自定义菜单绑定小程序


  1. 绑定时需要一个备用图文,发表一下即可。
  2. 另外注意,配置的路径为小程序页面路径,比如pages/index/index
相关文章
|
3天前
|
小程序 Android开发
|
18天前
|
人工智能 小程序
一步步开发AI运动小程序】二、引入插件
随着人工智能技术的发展,阿里体育等公司推出的“乐动力”、“天天跳绳”等AI运动APP广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。内容包括新建uni-app项目、配置插件、部署模型、安装依赖包、全局初始化和调用插件对象。
|
17天前
|
小程序 搜索推荐 数据挖掘
跳绳打卡小程序开发多钱费用
跳绳打卡小程序通过智能手机即可轻松使用,无需额外设备,只需一根跳绳即可开始您的健康之旅。它结合了便捷性、互动性和个性化设置,让跳绳这项运动变得更加有趣和高效
|
2天前
|
小程序 云计算 Android开发
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)+ 10月更文挑战第24天
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)+ 10月更文挑战第24天
19 5
|
3天前
|
小程序
小程序开发与公众号用户关联推送消息(八)+ 10月更文挑战第23天
小程序开发与公众号用户关联推送消息(八)+ 10月更文挑战第23天
27 3
|
3天前
|
小程序
小程序开发与公众号用户关联推送消息(七)+ 10月更文挑战第22天
小程序开发与公众号用户关联推送消息(七)+ 10月更文挑战第22天
21 3
|
3天前
|
小程序
小程序开发与公众号用户关联推送消息(六)+ 10月更文挑战第21天
小程序开发与公众号用户关联推送消息(六)+ 10月更文挑战第21天
22 2
|
3天前
|
小程序
小程序开发与公众号用户关联推送消息(五)+ 10月更文挑战第20天
小程序开发与公众号用户关联推送消息(五)+ 10月更文挑战第20天
24 2
|
4天前
|
小程序
|
4天前
|
人工智能 小程序
【一步步开发AI运动小程序】五、帧图像人体识别
随着AI技术的发展,阿里体育等公司推出的AI运动APP,如“乐动力”和“天天跳绳”,使云上运动会、线上健身等概念广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。文章分为四部分:初始化人体识别功能、调用人体识别功能、人体识别结果处理以及识别结果旋转矫正。下篇将继续介绍人体骨骼图绘制。