微信小程序开发（一）

最新推荐文章于 2024-03-04 17:19:46 发布
最新推荐文章于 2024-03-04 17:19:46 发布
阅读量856 收藏 4
点赞数 2
分类专栏： 微信小程序和公众号
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41249041/article/details/88118566
版权

微信开发者工具

  1. 微信开发者工具

  2. WebStorm

  3. VS Code

微信开发者工具快捷键

快捷键功能
Shift+Alt+F格式化代码
Ctrl+B编译
Ctrl+D选中匹配
Ctrl+P跳转文件

 

微信小程序文件结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

主体文件结构

一个小程序主体部分由 2 到 3 个文件组成，必须放在项目的根目录，如下：

文件必填作用
app.js是小程序逻辑
app.json是小程序公共设置
app.wxss否小程序公共样式表
注意：微信小程序根目录下，app.js 和 app.json 文件是必需的。

页面文件结构

一个小程序页面由 2 到 4 个文件组成，分别是：

文件类型必填作用
js是页面逻辑 ( 微信小程序没有window和document对象 )
wxml是页面结构 ( XML语法，不是HTML语法 )
wxss否页面样式表 ( 拓展了rpx尺寸单位，微信专属响应式像素 )
json否页面配置 ( 不能写注释，否则编译报错 )
注意：微信小程序页面目录下，.js 和  .wxml 文件是必需的。

 

小程序四大标准

  • JSON 配置 JavaScript Object Notation(JavaScript对象表示法)

  • WXML 结构 WeiXin Markup Language(WeiXin标记语言)

  • WXSS 样式 Weixin Style Sheet

  • JS 脚本 JavaScript

 

Web三大标准

  • HTML 结构 HyperText Markup Language

  • WXSS 样式 Cascading Style SheetJS

  • 脚本 JavaScript

 

JSON - 小程序配置文件

app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

以下是一个包含了所有配置选项的 app.json ：

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

 

app.json 全局配置

属性类型必填描述
pagesString Array是设置页面路径
windowObject否设置默认页面的窗口表现
tabBarObject否设置底部 tab 的表现
networkTimeoutObject否设置网络超时时间
debugBoolean否设置是否开启 debug 模式

pages 配置项

用于设置小程序的页面组成，接受一个数组，每一项都是字符串。

以下是 app.json 中 pages 的配置示例：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}
注意：
    1. 数组的第一项代表小程序的初始页面。
    2. 小程序中新增/减少页面，都需要对 pages 数组进行修改。
    3. 文件名不需要写文件后缀，因为框架会自动去寻找路径下 .json, .js, .wxml, .wxss 四个文件进行整合。

 

window 配置项

用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性类型默认值描述
navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如"#000000"
navigationBarTextStyleStringwhite导航栏标题颜色，仅支持 black/white
navigationBarTitleTextString 导航栏标题文字内容
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStyleStringdark下拉背景字体、loading 图的样式，仅支持 dark/light
enablePullDownRefreshBooleanfalse是否开启下拉刷新，详见页面相关事件处理函数。
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离，单位为px

以下是 app.json 中 window 的配置示例：

{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

tabBar 配置项

在pages里面的页面放在第一个是显示的页面，tabBar也要配置在第一个页面才会显示出来。

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

属性说明：

属性类型必填默认值描述
colorHexColor是 tab 上的文字默认颜色
selectedColorHexColor是 tab 上的文字选中时的颜色
backgroundColorHexColor是 tab 的背景色
borderStyleString否blacktabbar上边框的颜色， 仅支持 black/white
listArray是 tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
positionString否bottom可选值 bottom、top，设置成top是无图标

其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：

属性类型必填说明
pagePathString是页面路径，必须在 pages 中先定义
textString是tab 上按钮文字
iconPathString否图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效
selectedIconPathString否选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

以下是 app.json 中 tabbar 的配置示例：

"tabBar": {
        "color": "#ddd",
        "selectedColor": "#3cc51f",
        "backgroundColor": "#fff",
        "borderStyle": "black",
        "list": [
            {
                "pagePath": "pages/components",
                "text": "组件",
                "iconPath": "images/icon_components@3x.png",
                "selectedIconPath": "images/icon_components_active@3x.png"
            },
            {
                "pagePath": "pages/interface",
                "text": "接口",
                "iconPath": "images/icon_interface@3x.png",
                "selectedIconPath": "images/icon_interface_active@3x.png"
            }
        ]
    }
注意：
    1. 当设置 position 为 top 时，将不会显示 icon。
    2. tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

networkTimeout 配置项

可以设置各种网络请求的超时时间。

属性说明：

属性类型必填说明
requestNumber否wx.request的超时时间，单位毫秒，默认为：60000
connectSocketNumber否wx.connectSocket的超时时间，单位毫秒，默认为：60000
uploadFileNumber否wx.uploadFile的超时时间，单位毫秒，默认为：60000
downloadFileNumber否wx.downloadFile的超时时间，单位毫秒，默认为：60000

debug 配置项

可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。

 

page.json 页面配置

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

属性类型默认值描述 
navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如"#000000" 
navigationBarTextStyleStringwhite导航栏标题颜色，仅支持 black/white 
navigationBarTitleTextString 导航栏标题文字内容 
backgroundColorHexColor#ffffff窗口的背景色 
backgroundTextStyleStringdark下拉 loading 的样式，仅支持 dark/light 
enablePullDownRefreshBooleanfalse是否开启下拉刷新，详见页面相关事件处理函数。 
disableScrollBooleanfalse设置为 true 则页面整体不能上下滚动；只在 page.json 中有效，无法在 app.json 中设置该项 
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离，单位为px 
{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}
注意：页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键，

 

WXML - 小程序结构文件

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

 

WXML 组件语法

  1. 双标记组件

    <组件名> 内容 </组件名>

  2. 单标记组件

    <组件名 />
注意：
    1. 所有组件与属性都是小写，以连字符 - 连接。
    2. 所有组件必须闭合。

 

组件共同属性类型

所有组件都有的属性：

属性名类型描述注解
idString组件的唯一标示保持整个页面唯一
classString组件的样式类在对应的 WXSS 中定义的样式类
styleString组件的内联样式可以动态设置的内联样式
hiddenBoolean组件是否显示所有组件默认显示
data-*Any (任意属性)自定义属性组件上触发的事件时，会发送给事件处理函数
bind* / catch*EventHandler组件的事件详见事件

 

WXML常用布局组件

框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。组件是视图层的基本组成单元。

 

容器组件

<view> 是最常用的视图容器组件，类似于HTML中的 <div> 标签。

<view>  </view>
属性名类型默认值说明
hover-classStringnone指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-start-timeNumber50按住后多久出现点击态，单位毫秒 (开始时间)
hover-stay-timeNumber400手指松开后点击态保留时间，单位毫秒 (持续时间)
注意: 
    1. 如果需要使用滚动视图，请使用 <scroll-view> 组件。
    2. 目前支持 hover-class 属性的组件有三个：view、button、navigator。
    3. 支持 hover-class 属性的组件，同时也支持 hover-start-time、hover-stay-time。

 

文本组件

微信小程序的文本默认是不能复制的，<text>组件是唯一可以复制的文本的主键，需要加下面的一个属性为'true',长按可选中。

小程序支持转义符，在文本中直接加\n可以换行。

<text> 是最常用的基础内容组件，类似于HTML中的 <span> 标签。

<text>  </text>
属性名类型默认值说明
selectableBooleanfalse文本是否可选
注意：
    1. 支持转义符 "\" ，可通过 "\n" 实现文本换行。
    2. <text> 组件内只支持 <text> 嵌套。
    3. 除了 <text> 组件以外的其他组件都无法长按选中。

 

图片组件

<image> 是最常用的媒体组件，类似于HTML中的 <img> 标签。

<image src="图片资源地址" />
属性名类型默认值说明最低版本
srcString 图片资源地址 
modeString'scaleToFill'图片裁剪、缩放的模式 
lazy-loadBooleanfalse图片懒加载。只针对page与scroll-view下的image有效1.5.0
binderrorHandleEvent 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'} 
bindloadHandleEvent 当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'} 

mode 有效值：

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

模式值说明
缩放scaleToFill不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放aspectFit保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放aspectFill保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
缩放widthFix宽度不变，高度自动变化，保持原图宽高比不变
裁剪 可选值 "top"，"bottom"，"center"，"left"，"right"，"top left"，"top right"，"bottom left"，"bottom right"，不缩放图片，显示图片的指定区域。
 注意：
    1. image 组件必须闭合。
    2. image 组件有默认宽度 300px、高度 225px。
    3. 小程序样式表无法获取本地资源，本地图片资源优先使用 <image> 代替 background-image 。

<image style='width:100%' mode='widthFix'  src='/upload/banner1.png' />

页面导航组件

<text> 是页面链接/导航组件，类似于HTML中的 <a> 标签。

<navigator url="跳转链接" open-type="navigate">  </navigator>

页面链接。

属性名类型默认值说明
urlString 应用内的跳转链接
open-typeStringnavigate跳转方式，可选值 'navigate'，'switchTab'，'redirect'
deltaNumber 当 open-type 为 'navigateBack' 时有效，表示回退的层数
hover-classStringnavigator-hover指定点击时的样式类，当hover-class="none"时，没有点击态效果
注意：
    1. navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}。
    2. navigate 跳转方式，保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回到原页面。
    3. switchTab 跳转方式，跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
    4. redirect 跳转方式，关闭当前页面，跳转到应用内的某个页面。

 

表单组件

表单组件目前包括：button，input，checkbox，radio，slider，switch，label，textarea，form，picker，picker-view，用于构建与用户交互的表单。

 

文本框组件

<input type="" />
属性名类型默认值说明最低版本
valueString 输入框的初始内容 
typeString"text"input 的类型 
placeholderString 输入框为空时占位符 

文本域组件

<textarea>  </textarea>

单选框、复选框组件

<radio-group>  </radio-group>
<radio value="" />
<checkbox-group>  </checkbox-group>
<checkbox value="" />

switch组件

label组件

picker组件

form组件

button组件

form组件

silder组件

 

地图组件

<map>  </map>

媒体组件

audio

video

camera

WXSS

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比，WXSS 扩展的特性有：

  • 尺寸单位

  • 样式导入

尺寸单位

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

设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)
iPhone51rpx = 0.42px1px = 2.34rpx
iPhone61rpx = 0.5px1px = 2rpx
iPhone6 Plus1rpx = 0.552px1px = 1.81rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

样式导入

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

示例代码：

/** common.wxss **/
.small-p {
  padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

  • style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view style="color:{{color}};" />

  • class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

<view class="normal_view" />

选择器

目前支持的选择器有：（官方公布）

选择器样例样例描述
.class.intro选择所有拥有 class="intro" 的组件
#id#firstname选择拥有 id="firstname" 的组件
elementview选择所有 view 组件
element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件
::afterview::after在 view 组件后边插入内容
::beforeview::before在 view 组件前边插入内容

经过测试得出可用选择器：(以后框架升级迭代可能会发生变化)

实际可用的 wxss 选择器样例样例描述
element elementview text选择 view 组件内部的所有 text 组件
:activeview:active点击 view 组件时的状态
:focusinput:focus选择获得焦点的 input 组件
:first-childview:first-child选择属于父组件的第一个子组件的每个 view 组件。
:last-childview:last-child选择属于其父组件最后一个子组件每个 view 组件。
:first-of-typeview:first-of-type选择属于其父组件的首个 view 组件的每个 view 组件。
:last-of-typeview:last-of-type选择属于其父组件的最后 view 组件的每个 view 组件。

可能存在兼容问题选择器：(以后框架升级迭代可能会发生变化)

可能存在兼容问题选择器 
element > elementelement + element
element ~ element 
:nth-of-type(n):nth-last-of-type(n)
:nth-child(n):nth-last-child(n)
:hover:visited
:enabled:disabled
:checked 
:not(selected)::selection
[attribute][attribute=value]

全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

JS

 

项目案例：（样式设置）

主页：

<!-- 搜索框  -->
<view class="searchbar">
  <view class="searchbar-in">
    <!-- <view class="icon-search"></view> -->
    <image class="icon-search" src="/images/icon_search@2x.png"></image>
    <text>搜索</text>
  </view>
</view>
<!-- 首页轮播图  -->
<!-- <view data-num="{{ num + 12 }}">一段文字 {{ msg + "拼接字符串"  }} {{num}}</view> -->
<!-- <view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view> -->
<swiper class="index-swiper" indicator-dots="{{ true }}" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#ffffff" interval="2500" autoplay="true" circular="true">
  <block wx:for="{{ swiperArr }}" wx:for-index="i" wx:for-item="item" wx:key="">
    <swiper-item>
      <image class="index-swiper-img" src="{{ item.image_src }}" data-index="{{ i }}"></image>
    </swiper-item>
  </block>
</swiper>
<!-- 首页导航分区 -->
<view class="index-nav">
<!-- 
   wx:if 与 hidden
    wx:if 在初始渲染的时候性能更好，
    hidden 在切换显示隐藏的时候性能更好
 -->
  <navigator  class="index-nav-item" hover-class="none" url="">
    <image class="index-nav-img" src="/upload/icon_index_nav_1@2x.png"></image>
  </navigator>
  <navigator  class="index-nav-item" hover-class="none" url="">
    <image class="index-nav-img" src="/upload/icon_index_nav_2@2x.png"></image>
  </navigator>
  <navigator  class="index-nav-item" hover-class="none" url="">
    <image class="index-nav-img" src="/upload/icon_index_nav_3@2x.png"></image>
  </navigator>
  <navigator  class="index-nav-item" hover-class="none" url="">
    <image class="index-nav-img" src="/upload/icon_index_nav_4@2x.png"></image>
  </navigator>
</view>
<!-- 首页楼层 -->
<view class='floor'>
  <!-- 首页标题 -->
  <view class='floor-head' bindtap='testHandle'>
    <navigator url='/pages/home/home' catchtap='sonHandle' class='floor-head-link' data-para='函数参数'>
      <image class='floor-head-img' src='/upload/pic_floor01_title@2x.png'></image>
    </navigator>
  </view>
  <!-- 楼层主体  -->
  <view class='floor-body'>
    <!-- 主体左侧大图  -->
    <view class='floor-body-left'>
      <navigator class='floor-body-img-link' url=''>
        <image class='floor-body-left-img' src='/upload/pic_floor01_1@2x.png'></image>
      </navigator>
    </view>
    <!-- 主体右侧小图  -->
    <view class='floor-body-right'>
      <navigator class='floor-body-img-link' url=''>
        <image class='floor-body-right-img' src='/upload/pic_floor01_2@2x.png'></image>
      </navigator>
      <navigator class='floor-body-img-link' url=''>
        <image class='floor-body-right-img' src='/upload/pic_floor01_3@2x.png'></image>
      </navigator>
      <navigator class='floor-body-img-link' url=''>
        <image  class='floor-body-right-img' src='/upload/pic_floor01_4@2x.png'></image>
      </navigator>
      <navigator class='floor-body-img-link' url=''>
        <image class='floor-body-right-img' src='/upload/pic_floor01_5@2x.png'></image>
      </navigator>
    </view>
  </view>
</view>

搜索框样式：

.searchbar{
  background-color: #ff2d4a;
  padding: 20rpx 16rpx;
}
.searchbar-in{
  height: 60rpx;
  color: #bbb;
  background-color: #fff;
  /* text-align: center;
  line-height: 60rpx; */
  border-radius: 5rpx;

  /* flex伸缩盒布局  */
  display: flex;
  /* 1. 水平居中对齐  */
  justify-content: center;
  /* 2. 垂直居中对齐 */
  align-items: center;

}
.icon-search{
    width: 32rpx;
    height: 32rpx;
    /* background-color: pink; */
    /* display: inline-block; */
    margin-right: 16rpx;
    /* background: url("/images/icon_search@2x.png"); */
}

轮播图样式：

/* 2. 轮播图分区  */
.index-swiper{
    height: 340rpx;
}
.index-swiper-img{
    width: 750rpx;
    height: 340rpx;
}

导航样式：

.index-nav{
  display: flex;
  padding: 24rpx 0 29rpx 0 ;
  background-color: #fff;
}
.index-nav-item{
  flex: 1;
  display: flex;
  justify-content: center;
}

.index-nav-img{
  width: 128rpx;
  height: 140rpx;
}

首页楼层样式：

/* 首页楼层 */
.floor{
  margin-top: 30rpx;
}
.floor-head-img{
  width: 750rpx;
  height: 59rpx;
}
.floor-body{
  background-color: #fff;
  padding: 20rpx 0 10rpx 16rpx;
  display: flex;
}
.floor-body-right{
  display: flex;
  flex-wrap: wrap;
}
.floor-body-img-link{
  margin: 0 10rpx 10rpx 0 ;
}
.floor-body-left-img{
  width: 232rpx;
  height: 386rpx;
}
.floor-body-right-img{
  width: 233rpx;
  height: 188rpx;
}

 

 

 

 

 

 

 

 

 

 

 

weixin_41249041
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何让微信开发者工具显示切后台按钮，微信开发者工具显示“切后台”按钮
02-26
在使用微信开发者工具开发小程序时，默认情况下没有“切后台”这个按钮，今天教大家如何显示出“切后台”这个按钮。 简单2步，就可以显示出“切后台”按钮， 大大提高了小程序的调试效率。 赶快来试试吧！！
微信小程序入门+实战案例+代码+常用demo
08-13
微信小程序入门教程+实战案例展示+实战代码+常用demo，
微信小程序开发基础
最新发布
weixin_74181678的博客
03-04 867
（1）app.js:小程序逻辑文件，主要用来注册小程序全局实例。（2）app.json:小程序公共设置文件，配置小程序全局设置。（3）app.wxss:小程序主样式表文件，类似HTML的.css文件。
微信小程序开发入门
qq_41662119的博客
08-09 116
&#13; 微信小程序的开发入门流程：&#13; &#13; &#13; https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&amp;lang=zh_CN进入后选择小程序注册&#13; &#13; &#13; &#13; &#13; &#13; &#13; 邮箱，密码，确认密码，验证码，注册，&#13; ...
微信小程序开发入门实例
Joychen404的博客
06-06 1381
开发准备工作，获取微信小程序的 AppID登录微信公众平台，就可以在网站的“设置”-“开发者设置”中，查看到微信小程序的 AppID 了，注意不可直接使用服务号或订阅号的 AppID 。下载开发工具后新建项目开发者工具安装完成后，打开并使用微信扫码登录。选择创建“项目”，填入上文获取到的 AppID ，设置一个本地项目的名称（非小程序名称），比如“我的第一个项目”，并选择一个本地的文件夹作为代码存...
微信小程序入门开发实例-自我学习总结
qq_38196820的博客
06-06 1152
微信小程序入门实践自我学习总结一、准备篇二、小程序开发篇三、后台开发篇四、POSTMAN测试接口五、小程序测试、部署、审核、上线。 自我学习总结 第一次使用 微信小程序 进行开发，开发内容是人员出入登记管理功能。主要实现了，两种角色登录实现不同功能，信息登记，照片上传与显示，拨打电话，下拉刷新；密码设置及密码登录，功能选择，列表循环展示，状态的控制改变，时间的记录与显示，等待。 由于技术有实效性，本文完成于2020年6月。但是思路没有，永远值得回看：） 一、准备篇 本部分主要是为开发小程序做准备。 微信小
一个微信小程序开发示例
凡尘雪的博客
11-09 5516
一个微信小程序开发示例（豆瓣电影） 新版本（不包含工作流）请移步至：https://github.com/zce/weapp-douban 当前仓库会暂缓更新，主要留下来给大家答疑 需要基础教程的朋友们稍等一阵吧，目前有计划重新去写一套更系统的。最近有很多要屈服于现实的问题，谢谢理解 
微信小程序开发总结
02-25
微信小程序是微信公众平台推出除服务号、订阅号、企业号外的第四种微信内应用类型，它是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的仿原生app的交互使用体验和实用功能。...
微信小程序点餐系统微信小程序开发实战
06-07
微信小程序点餐系统微信小程序开发实战
微信小程序开发视频教程全套
12-14
微信小程序（wei xin xiao cheng xu），简称小程序，缩写XCX，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。 全面开放申请后，主体...
微信小程序开发图解案例教程-源代码
05-06
微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码...
微信小程序开发-闹钟小程序
05-13
微信小程序开发-闹钟小程序
微信小程序一只风扇源码分享
09-06
微信小程序一只风扇源码分享
微信小程序开发视频
05-08
微信小程序开发视频教程，链接: https://pan.baidu.com/s/1XIcYYUN4naVvoB6ZHUTafg
微信小程序开发-云开发-校园论坛小程序
05-27
该系统使用微信小程序开发工具开发，通过微信小程序自定义的WXML微信标记语言来构建页面的结构，利用微信小程序自定义的样式，语言WXSS编写样式文件来控制页面的样式，使用JavaScript来进行业务处理,实现页面交互...
微信小程序开发环境搭建
02-20
不排斥新技术，所以，心动不如行动，赶紧先搭建一个微信小程序开发工具。那么接下来就让我们一起来开始吧。先放一张Github上demo的动态图开发工具下载是看到GitHub（https://github.com/gavinkwoe/weapp-ide-crack）...
微信小程序开发实例
m0_38052645的博客
04-18 436
现在市面上的微信小程序很多都是按知识点来讲解的，但是这样子对新手入门是学到了一大堆的知识，但是无法真正的完整的完成一个项目，而一个整个项目的要么就是只有前端的小程序页面的制作，很少有后台的编程部分，要么是太贵了（没舍得购买）。我最近在上的一个视频教程，讲解一个实战项目，虽然非常完美，但是由于我是按一个项目用到的知识来分开讲解的，也可以单独购买一个章节，其金额很低，可以根据自己的需要来购买。最重要的...
微信小程序开发（1 基本）
qq_41810184的博客
06-02 174
一.Page对象生命周期 1.data对象：页面初始数据，可以在里面定义一些wxml里展示的对象，可以用setData方法为其赋值，当然也可以取值 赋值（that是Page对象）： 2.onload方法：页面初次加载时调用的方法，入参options会携带有跳转到此页面时的所带参数，例如： 可以按红框中所示获取options中前置页面传来的对象 3.onshow方法：每次页...
实例-0基础微信小程序开发入门1.1-【开发准备】
在所不辞的博客
04-24 2799
【前言】        近来微信小程序开发大热， 正值腾讯联合高校举办了高校小程序开发大赛，我也打算趁着机会学一学，便正好把所学内容记录下来，以帮助后人学习。【开发准备】1. 申请AppID​ 开发小程序的第一步，需要拥有一个小程序 AppID，后续的所有开发流程会基于这个 AppID 来完成。小程序的注册非常简单，只需几个操作。​ 使用浏览器打开 https://mp.weixin.qq.com...
微信小程序开发一个婚礼请帖
06-07
好的，开发微信小程序婚礼请帖需要以下几个步骤： 1. 定义小程序页面结构：根据婚礼请帖的内容和设计风格，定义小程序页面结构，包括首页、宾客信息填写页面、地图导航页面、祝福留言页面等。 2. 制作小程序设计图：根据页面结构，制作小程序设计图，包括颜色、字体、排版等，确保页面美观、易读。 3. 开发小程序代码：根据设计图，开发小程序代码，包括页面布局、样式、交互逻辑等。 4. 集成地图导航功能：在地图导航页面中，集成地图导航功能，让宾客可以直接通过小程序导航到婚礼现场。 5. 集成祝福留言功能：在祝福留言页面中，集成祝福留言功能，让宾客可以通过小程序给新人留言祝福。 6. 集成支付功能：在宾客信息填写页面中，集成支付功能，让宾客可以通过小程序支付请帖费用。 7. 联调和测试：完成小程序开发后，进行联调和测试，确保小程序运行稳定、功能正常。 以上是开发微信小程序婚礼请帖的大致步骤，具体实现过程中还需要根据需求进行细节调整和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值