微信小程序------入门

最新推荐文章于 2024-07-01 16:51:29 发布
最新推荐文章于 2024-07-01 16:51:29 发布
阅读量159 收藏
点赞数
文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Agont_/article/details/134280706
版权

微信小程序

一、微信小程序的简介：

小程序的介绍：
  1. 微信小程序：是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，可以理解为使用微信平台开发的app。
  2. 小程序是混合开发模式的一种具体实现。
  3. 通过wxml（类似与H5）与wxss（类似于css）构建页面的渲染。
  4. 通过逻辑控制层（类似于vue中的view-model）控制数据逻辑。
  5. 底层通过封装实现了硬件设备调用（例如wifi、蓝牙等）。
  6. 提供了微信登录、离线缓存等通用接口。
小程序与普通网页开发的区别：

​ 小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页开发相比有很大的相似性。对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是有些许区别的。

网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而如上文所述，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。

网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具，小程序中三大运行环境也是有所区别的。

小程序的运行环境(图1)：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或者编辑器即可。小程序的开发则有所不同，需要经过申请小程序账号、安装小程序开发者工具、配置项目等等过程方可完成。

二、微信小程序的发布流程：

注册申请账号

进入小程序注册页 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序账号。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

再输入完邮箱和密码后会跳转到邮箱激活确认的页面：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

点击登录邮箱进入登录界面会弹出邮箱给的地址：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

点击发送的链接进入界面：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

最后一步就是信息登记，根据工作的需求来选择主题类型。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在这块输入自己的身份信息然后进行短信验证。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

点击完继续后，会跳转到开发管理的这个页面，然后在点击开发设置，就会看到自己的开发者ID。属于自己的一个AppID

一般在写项目的时候会首先选择测试号，在等项目上线的时候我们再去填写一个注册时候的AppID，这样就可以按需上线。

在这个小程序管理平台，你可以管理你的小程序的权限，查看数据报表，发布小程序等操作。

登录 小程序后台 ，我们可以在菜单 “开发”-“开发设置” 看到小程序的 AppID 了 。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID （注意这里要区别于服务号或订阅号的 AppID）。

有了小程序账号之后，我们需要一个工具来开发小程序。

安装开发工具

前往 开发者工具下载页面 ，根据自己的操作系统下载对应的安装包进行安装

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

这里的话就是根据自己的一个需求去下载一个微信开发者工具来编写属于自己的小程序，这里的话我自己下载的稳点版，相对于其他两个来说把他们两个中存在的缺陷在这个稳定版中也全都得到了改善。

三、创建第一个小程序：

新建项目
  1. 打开开发者工具，然后选择“小程序项目”，点击右下角的“+”新建项目。
  2. 选择一个空的文件夹作为项目目录，填入刚刚的 AppID，再填写一个项目名称，比如我这里叫做GoZeroWaster。点击“确定”进入工具主界面。
项目目录结构

. ├── app.js # 小程序的逻辑文件 ├── app.json # 小程序的配置文件 ├── app.wxss # 全局公共样式文件 ├── pages # 存放小程序的各个页面 │ ├── index # index页面 │ │ ├── index.js # 页面逻辑 │ │ ├── index.wxml # 页面结构 │ │ └── index.wxss # 页面样式表 │ └── logs # logs页面 │ ├── logs.js # 页面逻辑 │ ├── logs.json # 页面配置 │ ├── logs.wxml # 页面结构 │ └── logs.wxss # 页面样式表 ├── project.config.json └── utils └── util.js

根目录下有三个文件分别是：app.js、app.json、app.wxss，小程序必须有这三个描述APP的文件，并且必须放在根目录下。这三个是应用程序级别的文件，和他平行的还有一个pages文件夹，用来存放小程序的各个页面。

可以和web前端开发技术做个类比：

  1. wxml相当于HTML文件，用来编写页面的标签和整体的结构，但是里面只能用小程序自己封装的组件；
  2. wxss相当于CSS文件，用来写页面的样式，只是把CSS文件换成了wxss文件；
  3. js文件相当于前端编程中的 JavaScript 文件，用来写小程序的页面逻辑；
  4. json文件用来配置页面的样式和行为；

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

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

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

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

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

下面是一个微信开发者工具界面图，我们先来认识一下主题的页面：(图2)：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

页面介绍：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

项目组成

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

给小程序新增一个页面

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

测试号申请（我们小程序账号申请完成之后，建议务必要申请一个测试号用来开发）,在点击测试号的时候会自动生成一个AppID，这个ID自己无法更改。测试号和我们刚刚上面注册的正式号不一样 测试号登录成功后只显示你的一些信息

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

这个就是创建完之后出现这个页面。

  1. 进入app.json 在第一个pages数组里面指定生成页面文件路径即可生动创建

注！想要哪一个页面先展示可按顺序排即可，第一个页面路径就是第一个显示的页面

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

给小程序当前页面设置局部配置

  1. 当局部样式和全局样式冲突，根据就近原则，局部样式会覆盖全局样式

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    1. 当局部样式的权重大于等于全局样式的权重时，才会覆盖全局的样式

      外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

      页面配置和全局配置的关系

      小程序中app.json中的window节点，可以全局配置小程序中每个页面的窗口表现。
      如果某些小程序页面想要拥有特殊的窗口表现，此时，”页面级别的.json配置问价“就可以实现这种需求。
      注意：当页面配置和全局配置冲突时，根据就近原则，最终的效果是以页面配置为准

      页面配置中常用的配置项

      和全局配置一样

完整的代码如下：

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#000000",
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "第一个小程序项目",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

四、微信开发者工具组件：

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。

Vant Weapp的引入：

  1. 初始化 ，进入项目，输入cmd,j进入后输入npm init -y

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    1. 安装通过 npm 安装
    npm i @vant/weapp -S --production

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    1. 删除style：v2
     删除style:v2

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    1. 修改project.config.js，packNpmManually改为 TRUE 添加对象

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    1. 点击工具，构建npm ,构建成功会出现

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    1. 入组件，使用组件

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    tab底部栏
    1. 引入,在app.json或index.json中引入组件
    "usingComponents": {
  "van-tab": "@vant/weapp/tab/index",
  "van-tabs": "@vant/weapp/tabs/index"
}
    1. 使用插件.通过active设定当前激活标签对应的索引值，默认情况下启用第一个标签
    <van-tabs active="a">
  <van-tab title="标签 1" name="a">内容 1</van-tab>
  <van-tab title="标签 2" name="b">内容 2</van-tab>
  <van-tab title="标签 3" name="c">内容 3</van-tab>
</van-tabs>

官方把小程序的组件分为了9大类：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

 1.视图容器    2.基础内容    3.表单组件        
 4.导航组件    5.媒体组件    6.地图组件        
 7.画布组件    8.开放能力    9.无障碍访问

现只举例部分常用组件，大部分可以看官方文档组件部分，不再做过多赘述。

自适应单位rpx

大家应该注意到了，在hello.wxss样式表里，绝大多数长度单位都设置的是rpx这个全新的单位。比如设置图片大小的时候。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

要透彻的了解rpx这个单位，还需要对移动端的分辨率有一定的了解，比如物理分辨率px和逻辑分辨率pt等概念。简单的说，rpx将随着屏幕尺寸的变换而变换，但px不会。这里我们只需要记住如下的结论：

在iPhone6的宽度750个物理像素作为标准来做设计图，1物理像素=1rpx=0.5px，

比如在iPhone6宽度750物理像素下，要显示一张宽和高都是200像素*200像素的图片，就要把图片的高度和宽度都设置为200rpx，或者100px ，这时候在iphone6上的显示的效果都是一样的，但是我们换到其他机型的时候，就会出现差异。因为rpx将随着屏幕尺寸的变换而变换，但px不会改变大小。

视图容器
1. view 组件

在小程序中,通常使用<view/>代替<div/>作为容器来做布局

<!--pages/welcome/welcome.wxml-->
<view class="container">
  <image class="avatar" src="/images/测试.jpg"></image>
  <text>Hello</text>
  <!-- <button>微信小程序</button> -->
  <view>
    <text>微信小程序</text>
  </view>
</view>
2. scroll-view组件

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

  1. 横向滚动需打开 enable-flex 以兼容 WebView，如
  2. 滚动条的长度是预估的，若直接子节点的高度差别较大，则滚动条长度可能会不准确

通用属性：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

示例代码：

<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title">
        <text>Vertical Scroll\n纵向滚动</text>
      </view>
      <view class="page-section-spacing">
        <scroll-view scroll-y="true" style="height: 300rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
          <view id="demo1" class="scroll-view-item demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item demo-text-2"></view>
          <view id="demo3" class="scroll-view-item demo-text-3"></view>
        </scroll-view>
      </view>
    </view>
    <view class="page-section">
      <view class="page-section-title">
        <text>Horizontal Scroll\n横向滚动</text>
      </view>
      <view class="page-section-spacing">
        <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
          <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item_H demo-text-2"></view>
          <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
        </scroll-view>
      </view>
    </view>
  </view>
</view>

.page-section-spacing{
  margin-top: 60rpx;
}
.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item{
  height: 300rpx;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 300rpx;
}

const order = ['demo1', 'demo2', 'demo3']

Page({
  onShareAppMessage() {
    return {
      title: 'scroll-view',
      path: 'page/component/pages/scroll-view/scroll-view'
    }
  },

  data: {
    toView: 'green'
  },

  upper(e) {
    console.log(e)
  },

  lower(e) {
    console.log(e)
  },

  scroll(e) {
    console.log(e)
  },

  scrollToTop() {
    this.setAction({
      scrollTop: 0
    })
  },

  tap() {
    for (let i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1],
          scrollTop: (i + 1) * 200
        })
        break
      }
    }
  },

  tapMove() {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})

实现的效果图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

基础内容
1. text 组件

（1）是一个⽂本标签

（2）只能嵌套text

（3）⻓按⽂字可以复制（只有该标签有这个功能）–>selectable

（4） 可以对如: 空格回车 进⾏编码 -->decode

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

列：通过 text 组件的user-select 属性，可以实现长按选中文本内容的效果。

<view>
长按可以选中文本内容:
<text user-select>HelloWorld!</text>
</view>

效果图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2. progress 组件

进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

实例代码：

<view class="progress-box">
  <progress percent="20" show-info stroke-width="3"/>
</view>

<view class="progress-box">
  <progress percent="40" active stroke-width="3" />
  <icon class="progress-cancel" type="cancel"></icon>
</view>

<view class="progress-box">
  <progress percent="60" active stroke-width="3" />
</view>

<view class="progress-box">
  <progress percent="80" color="#10AEFF" active stroke-width="3" />
</view>

效果图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3. icon组件

图标组件

以下是一个属性说明：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

代码实列：

<view class="container">
  <view class="icon-box">
    <icon class="icon-box-img" type="success" size="93"></icon>
    <view class="icon-box-ctn">
      <view class="icon-box-title">成功</view>
      <view class="icon-box-desc">用于表示操作顺利完成</view>
    </view>
  </view>
  <view class="icon-box">
    <icon class="icon-box-img" type="info" size="93"></icon>
    <view class="icon-box-ctn">
      <view class="icon-box-title">提示</view>
      <view class="icon-box-desc">用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息</view>
    </view>
  </view>
  <view class="icon-box">
    <icon class="icon-box-img" type="warn" size="93" color="#C9C9C9"></icon>
    <view class="icon-box-ctn">
      <view class="icon-box-title">普通警告</view>
      <view class="icon-box-desc">用于表示操作后将引起一定后果的情况；也用于表示由于系统原因而造成的负向结果</view>
    </view>
  </view>
  <view class="icon-box">
    <icon class="icon-box-img" type="warn" size="93"></icon>
    <view class="icon-box-ctn">
      <view class="icon-box-title">强烈警告</view>
      <view class="icon-box-desc">用于表示由于用户原因造成的负向结果；也用于表示操作后将引起不可挽回的严重后果的情况</view>
    </view>
  </view>
  <view class="icon-box">
    <icon class="icon-box-img" type="waiting" size="93"></icon>
    <view class="icon-box-ctn">
      <view class="icon-box-title">等待</view>
      <view class="icon-box-desc">用于表示等待，告知用户结果需等待</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="success_no_circle" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">多选控件图标_已选择</view>
      <view class="icon-box-desc">用于多选控件中，表示已选择该项目</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="circle" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">多选控件图标_未选择</view>
      <view class="icon-box-desc">用于多选控件中，表示该项目可被选择，但还未选择</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="warn" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">错误提示</view>
      <view class="icon-box-desc">用于在表单中表示出现错误</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="success" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">单选控件图标_已选择</view>
      <view class="icon-box-desc">用于单选控件中，表示已选择该项目</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="download" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">下载</view>
      <view class="icon-box-desc">用于表示可下载</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="info_circle" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">提示</view>
      <view class="icon-box-desc">用于在表单中表示有信息提示</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="cancel" size="23"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">停止或关闭</view>
      <view class="icon-box-desc">用于在表单中，表示关闭或停止</view>
    </view>
  </view>
  <view class="icon-box">
    <view class="icon-small-wrp">
      <icon class="icon-small" type="search" size="14"></icon>
    </view>
    <view class="icon-box-ctn">
      <view class="icon-box-title">搜索</view>
      <view class="icon-box-desc">用于搜索控件中，表示可搜索</view>
    </view>
  </view>

</view>
媒体组件
1. image 组件

（1） 图⽚标签，image组件默认宽度320px、⾼度240px,所以如果不进行宽高设置,不会进行自适应

（2） ⽀持懒加载

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

（3） mode模式列举:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

代码实列：

<view class="page">
  <view class="page__hd">
    <text class="page__title">image</text>
    <text class="page__desc">图片</text>
  </view>
  <view class="page__bd">
    <view class="section section_gap" wx:for="{{array}}" wx:for-item="item">
      <view class="section__title">{{item.text}}</view>
      <view class="section__ctn">
        <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>
      </view>
    </view>
  </view>
</view>

Page({
  data: {
    array: [{
      mode: 'scaleToFill',
      text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
    }, {
      mode: 'aspectFit',
      text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
    }, {
      mode: 'aspectFill',
      text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
    }, {
      mode: 'top',
      text: 'top：不缩放图片，只显示图片的顶部区域'
    }, {
      mode: 'bottom',
      text: 'bottom：不缩放图片，只显示图片的底部区域'
    }, {
      mode: 'center',
      text: 'center：不缩放图片，只显示图片的中间区域'
    }, {
      mode: 'left',
      text: 'left：不缩放图片，只显示图片的左边区域'
    }, {
      mode: 'right',
      text: 'right：不缩放图片，只显示图片的右边边区域'
    }, {
      mode: 'top left',
      text: 'top left：不缩放图片，只显示图片的左上边区域'
    }, {
      mode: 'top right',
      text: 'top right：不缩放图片，只显示图片的右上边区域'
    }, {
      mode: 'bottom left',
      text: 'bottom left：不缩放图片，只显示图片的左下边区域'
    }, {
      mode: 'bottom right',
      text: 'bottom right：不缩放图片，只显示图片的右下边区域'
    }],
    src: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg'
  },
  imageError: function(e) {
    console.log('image3发生error事件，携带值为', e.detail.errMsg)
  }
})

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

以上代码可以实现图片的插入。

表单组件
1. button 组件

小程序中的按钮组件类似于HTML中的按钮组件，同时可以调用微信提供的丰富的功能，例如：获取用户信息，获取用户授权，转发等。

例：使用type属性设置按钮的类型：

<button >默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>

效果图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

例：使用size属性设置按钮的大小：

<button size="mini">默认按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>

效果图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

例：使用plain属性设置镂空按钮：

<button plain>默认按钮</button>
<button type="primary" plain>主色调按钮</button>
<button type="warn" plain>警告按钮</button>

效果图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

爱抽烟的老汉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序开发教程(基础篇)1-初识微信小程序
crazytea的博客
10-04 3245
这篇教程是微信小程序开发教程的第一篇，我会简要介绍下微信小程序开发相关的一些基本知识获取AppID 如果你是收到邀请的开发者，我们会提供一个帐号，利用提供的帐号，登录 https://mp.weixin.qq.com ，就可以在网站的“设置”-“开发者设置”中，查看到微信小程序的 AppID 了，注意不可直接使用服务号 或订阅号的 AppID 。 上述内容来自微信的官方教程。按照微信官方的说法
详解微信小程序开发教程
karamos的专栏
09-22 5864
微信应用开放的服务和组件包含如下： 视图容器：视图(View)、滚动视图、Swiper 基础内容：图标、文本、进度条 表单组件：按钮、表单等等 操作反馈 导航 媒体组建：音频、图片、视频。 地图 画布 文件操作能力 网络：上传下载能力、WebSocket 数据：数据缓存能力 位置：获取位置、查看位置 设备：网络状态、系统信息、重力感应、罗盘 界面：设置导航条、导航、动画、绘图等等 开放接口：登录，...
首个微信小程序开发教程！
Lovnx
09-23 1907
原文链接：http://gold.xitu.io/entry/57e34d6bd2030900691e9ad7本文档将带你一步步创建完成一个微信小程序，并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像，点击头像，可以在新开的页面中查看当前小程序的启动日志。 微信应用号（小程序，「应用号」的新称呼）终于来了！目前还处于内测阶段，微信只邀请了部分企业参与封测。想
微信小程序开发指南：精通一切的秘籍（保姆级别+超详细）
最新发布
老高的博客
07-01 6465
小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。微信小程序是一种不用下载就能使用的应用，也是一项创新，经过将近两年的发展，已经构造了新的微信小程序开发环境和开发者生态。
微信小程序入门教程
程序像一种魔法
10-13 3695
本文档将带你一步步创建完成一个微信小程序，并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像，点击头像，可以在新开的页面中查看当前小程序的启动日志。
微信小程序应用号开发教程！博卡君通宵吐血赶稿
weixin_34192816的博客
09-22 847
微信应用号（微信公众平台小程序，「应用号」的新称呼）终于来了！开源中国社区的博卡君通宵吐血赶稿写出的微信公众平台应用号开发教程！大家赶紧来学习一下吧 对了，昨天晚间微信小程序开发文档官方版发布了 微信公众平台小程序目前还处于内测阶段，微信只邀请了部分企业参与封测。想必大家都关心应用号的最终形态到底是什么样子？怎样将一个「服务号」改造成为「小程序」？我们暂时以一款简单的第三方工具的实例，来演示一...
微信小程序-笑话大全源码
06-12
通过研究这个"微信小程序-笑话大全源码"，开发者不仅可以深入理解微信小程序的开发流程，还能提升对前端技术、移动端开发以及用户体验设计的理解，对于想要入门或提升微信小程序开发技能的人员来说，这是一个宝贵的...
微信小程序-配置开源接口
03-29
下面整理了一下，热门小程序的接入开源接口的配置步骤。。给初入门的小白指指路 先大概说一下流程： 1.以百思不得姐开源接口为例子  2.注册小程序开发者账号  3.找开源接口  4.怎么配置小程序的域名  5.请求数据...
微信小程序-赞赏.zip
04-26
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，为用户提供便捷的交互体验和服务。这个“微信小程序-赞赏.zip”压缩包显然包含了一个关于微信小程序赞赏功能的开发实例，非常适合初学者...
微信小程序－简易计算器
03-15
sCalc 微信小程序版，适合入门，由于重点不是实现计算器具体功能，主要是为了学习微信小程序开发， 所以一些非关注点问题就不要太在意 为了实现计算功能，被微信小程序坑死了，应为js文件中不支持window对象，没法...
072-微信小程序-环球小镇.zip
06-11
000.pdf可能是一个入门指南或教程文档，详细介绍了微信小程序的开发环境搭建、基础语法、页面结构、API调用等核心知识点。通常，微信小程序的开发需要使用到微信开发者工具，它提供了编写WXML（微信小程序标签语言）...
微信小程序demo
01-30
微信小程序（wei xin xiao cheng xu），简称小程序，缩写XCX，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。 全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。小程序、订阅号、服务号、企业号是并行的体系。
微信小程序Demo微信小程序Demo
02-26
微信小程序Demo 微信小程序Demo
微信小程序官方Demo
01-24
微信小程序官方Demo, 2018-1-24最新版本! 所有控件示例与使用介绍！
微信小程序完整demo
01-31
这是一个完整的微信小程序demo，包含前端和后台开发的代码，内容齐全，适合新手入门学习
微信小程序开发教程--从零开始
热门推荐
gjy_it的博客
01-07 4万+
从零开始 微信小程序中就四种类型的文件
微信小程序开发
qq_59294755的博客
03-05 562
</text><text>
使用uni-app开发微信小程序uni-shop的全面指南
"微信小程序uni-shop的开发指南" 在微信小程序开发领域，"uni-shop" 是一个基于 uni-app 框架构建的电商类小程序项目。uni-app 是一个使用 Vue.js 开发全平台应用的框架，它允许开发者通过编写一套代码，实现跨平台...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值