微信小程序申请,开发介绍及示例

这篇具有很好参考价值的文章主要介绍了微信小程序申请,开发介绍及示例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  • 微信小程序从申请到开发(看开发内容需要有点前端的基础)

    • 小程序申请

      • 微信公众平台
      • 邮箱:作为登录账号,请填写未被微信公众平台注册,未被微信开放平台注册,未被个人微信号绑定的邮箱
      • 信息登记要注意,如果你的小程序涉及个体工商户,企业,你得用企业主体,还得付每年300元的审核费,不然备案不通过!!!备案不通过就无法发布,只能自己和添加的测试人员能看到。
    • 当所有的准备工作做好之后,接着就要开始进行微信小程序的开发,小程序开放有一套独有的开发工具,
      下在地址为:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html,安装打开
      开发工具之后,默认会帮我们建立如下的项目结构:

    • pages展开之后,结构如下图所示:
      微信小程序申请,开发介绍及示例,微信小程序,微信小程序,小程序

    • page下面的层级,如下如所示:
      微信小程序申请,开发介绍及示例,微信小程序,微信小程序,小程序

    • WXML全称WeiXin Markup Language,是框架设计的一套标签语言,结合组件、事件系统来构建页
      面的结构,其语法参考以下示例代码:

      <!-- 滚动字幕 -->
      <view class="notice">
        <view class="notice_desc">
          <view style="transform: translateX(-{{ distance }}px);">
            <text style="margin-right:{{ space }}px;"></text>
            <text id="mjltest">{{ text }}</text>
            <text style="margin-right:{{ space }}px;"></text>
            <text>{{ text }}</text>
          </view>
        </view>
      </view>
      <!-- 数据列表 -->
      <view class="spList">
        <block class="" wx:for="{{goods.data}}" wx:key="{{goods.data}}">
          <view id="{{item.id}}" style='display:flex;height:120px;'>
            <!-- 左边图片 -->
            <view style= 'width:100px;height:150px;margin:10px;'>
              <image bindtap="previewImg" wx:if="{{item.imgSrc == ''}}" class="index-logo" style="width:100px;height:100px" src="/images/goods/fm.png"></image>
              <image bindtap="previewImg"  wx:else="{{item.imgSrc}}" class="index-logo" style="width:100px;height:100px" data-imgUrl="{{item.imgSrc}}" src="{{item.imgSrc}}"></image>
            </view>
            <!-- 右边内容 上下结构 -->
            <view style='display: flex;flex-direction: column;margin:10px'>
              <label class="item_title">{{item.title}}</label>
              <label class='item_content'>{{item.content}}</label>
            </view>
          </view>
              <!-- 分割线(重点) start-->
              <view class="{{index%1 === 0 && goods.data.length-index !== 0 && goods.data.length-index !== 1? 'hasLine': 'noLine'}}"></view>
        </block>
      </view>
      
      
    • 逻辑层,是事务逻辑处理的地⽅。对于⼩程序⽽⾔,逻辑层就是.js脚本⽂件的集合。逻辑层将数据进⾏处理后发送给视图层,同时接收视图层的事件反馈。具体函数参考相关文档,此处不做详细介绍,直接上代码(相关路径图片自己放):

      // pages/index1/index1.js
      Page({
      
        /**
         * 页面的初始数据
         */
        data: {
           xs:true,
           goods: {
             "data": [
               {
                 "id": 1,
                 "imgSrc": "/images/goods/data1.png",
                 "title": "test1",
                 "content": "我是列表数据1"
               },{
                 "id": 2,
                 "imgSrc": "/images/goods/data2.png",
                 "title": "test2",
                 "content": "我是列表数据2"
               }
             ]
           },
          text: "20年老店!质量有保障!欢迎新老顾客前来选购!",
          step: 1, // 滚动速度
          distance: 80, // 初始滚动距离
          space: 110,
          interval: 18 // 时间间隔
        },
      
        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {
      
        },
      
        /**
         * 生命周期函数--监听页面初次渲染完成
         */
        onReady: function () {},
      
        /**
         * 生命周期函数--监听页面显示
         */
        onShow: function () {
          var that = this;
          var query = wx.createSelectorQuery();
          // 选择id
          query.select('#mjltest').boundingClientRect();
          query.exec(function(res) {
            var length = res[0].width;
            var windowWidth = wx.getSystemInfoSync().windowWidth; // 屏幕宽度
            that.setData({
              length: length,
              windowWidth: windowWidth,
              space:windowWidth
            });
            that.scrollling(); // 第一个字消失后立即从右边出现
          });
        },
      
        scrollling: function() {
          var that = this;
          var length = that.data.length; // 滚动文字的宽度
          var windowWidth = that.data.windowWidth; // 屏幕宽度
          var interval = setInterval(function() {
            var maxscrollwidth = length + that.data.space;
            var left = that.data.distance;
            if (left < maxscrollwidth) { // 判断是否滚动到最大宽度
              that.setData({
                distance: left + that.data.step
              })
            } else {
              that.setData({
                distance: 0 // 直接重新滚动
              });
              clearInterval(interval);
              that.scrollling();
            }
          }, that.data.interval);
        },
      
        /**
         * 生命周期函数--监听页面隐藏
         */
        onHide: function () {
      
        },
      
        /**
         * 生命周期函数--监听页面卸载
         */
        onUnload: function () {
      
        },
      
        /**
         * 页面相关事件处理函数--监听用户下拉动作
         */
        onPullDownRefresh: function () {
      
        },
      
        /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom: function () {
      
        },
      
        /**
         * 用户点击右上角分享
         */
        onShareAppMessage: function () {
      
        },
      
        
        /**
         * 用于点击图片放大
         */
        previewImg: function(e) {
          let arr = []
          arr.push(e.currentTarget.dataset.imgurl)
          wx.previewImage({
            current: e.currentTarget.dataset.imgurl, //当前图片地址
            urls: arr, //所有要预览的图片的地址集合 数组形式
            success: function (res) {},
            fail: function (res) {},
            complete: function (res) {},
          })
        }
      })
      
    • wxss文件,就是对应的css样式喽,修改页面的样式,开发工具有手机模拟器调试起来很方便,还是上代码:

      /* pages/index1/index1.wxss */
      page{
       
      .spList{
        margin-top: 35px;
      }
      
      
      .item_content{
        width:100%;height:50px;font: size 12pt;color:rgb(92, 77, 77); word-break: break-al1;text-overflow: ellipsis;overflow: hidden;
      }
      
      .item_from{
        width:130px;font-size:10pt;color:#999
      }
      
      .item_iscollect{
        width:90px;height:18px;font-size:8pt;color:white;border-width:1px;border-style:solid;text-align:center; border-radius :5px;background-color: red;
      }
      
      .item_time{
        width:100%;font-size:10pt;color:#999;word-break: break-all;text-overflow: ellipsis;overflow: hidden;margin-left: 20px;
      }
      .hasLine{
        width: 750rpx;
        height: 2rpx;
        border-top: 2rpx solid white;
        left: -30rpx;
        position: relative;
      }
      .noLine{
        display: none;
      }
      
      .preview {
        cursor: pointer;
      }
      .item_title {
        font-weight: bold;
      }
      .notice {
        width: 100%;
        height: 56rpx;
        line-height: 56rpx;
        background-color: #fff;
        box-shadow: 0 3rpx 6rpx 1rpx rgba(0,97,6,0.4100);
        border-radius: 30rpx;
        position: absolute;
        top: 0px;
        left:auto;
        display: flex;
      }
      .notice .notice_desc {
        margin-right: 40rpx;
        font-size: 28rpx;
        color: rgb(238, 20, 20);
        overflow: hidden;
        white-space: nowrap;
      }
      

      注意:这里注意一些背景图或者占比比较大的元素,最好使用百分比,不然换不同大小型号的手机,显示可能会有问题

    • 展示上面的代码成果(我的数据就不展示了,模糊处理下):
      微信小程序申请,开发介绍及示例,微信小程序,微信小程序,小程序

    • 版本管理,在开发工具中可以直接跳转,注册后,可以进行代码提交,跟SVN和Git一样的

    • 小程序开发完成后进行上传,上传完成进行提交审核,提交成功后进行备案,备案成功后就可以发布了。文章来源地址https://www.toymoban.com/news/detail-716724.html

到了这里,关于微信小程序申请,开发介绍及示例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序用什么工具开发(微信小程序开发工具介绍)

    有很多人在开发小程序之前都会去了解微信小程序开发工具,想知道微信小程序用什么工具开发。时至今日,随着互联网技术的发展,现在开发微信小程序也能使用多种不同的工具,让我们来了解一下吧。 一、微信开发者工具 这是微信官方提供的微信小程序开发工具,可以

    2024年02月11日
    浏览(67)
  • 微信小程序的开发---tabBar的介绍

    目录 一、tabBar的介绍 二、tabBar的6个组成部分 三、tabBar节点的配置项 四、tab项的配置选项 五、tabBar的使用 tabBar是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序中通常将其分为: (1)底部tabBar (2)顶部tabBar 注意: (1)tabBar中只能配置最少2个,最多

    2024年02月08日
    浏览(55)
  • 微信小程序蓝牙功能全套开发流程介绍

    1.1初始化蓝牙模块(打开蓝牙适配器) 初次加载,自动获取获取系统信息,检查蓝牙适配器是否可用 初始化蓝牙,提示打开GPS和蓝牙,开始自动搜索蓝牙设备 1.2搜索周围蓝牙 开始搜索蓝牙设备,定时1s获取搜索到的设备 把搜索到的设备保存在一个数组内,渲染在页面 1.3监

    2024年02月08日
    浏览(254)
  • HTML实现微信小程序跳转全指南,附代码示例和开发注意事项

    学习如何在HTML页面中实现微信小程序跳转,包括前端准备工作、签名验证、后端配置等详细步骤。本文提供了代码示例和开发注意事项,帮助您顺利完成微信小程序的跳转功能。

    2024年02月11日
    浏览(44)
  • 微信小程序开发工具介绍及安装(上)

    本章主要介绍 微信小程序开发工具的介绍 小程序开发工具的安装方法 开发工具的基本功能介绍 微信小程序开发工具是一款由微信官方提供的集成开发环境(IDE),旨在帮助开发者更便捷地创建、调试和发布微信小程序。该开发工具具备丰富的功能和工具集,可以极大地提高

    2024年02月06日
    浏览(68)
  • 微信小程序开发工具介绍及安装(下)

    微信小程序开发工具是一款强大的集成开发环境(IDE),旨在帮助开发者更便捷地创建、调试和发布微信小程序。它提供了丰富的功能和工具集,下面将对微信小程序开发工具的基本功能进行详细介绍: 一、项目管理功能: 新建项目:微信小程序开发工具提供了创建新项目

    2024年02月06日
    浏览(65)
  • 微信小程序开发工具介绍及安装(中)

    微信小程序开发工具的安装方法相对简单,并且适用于多个操作系统平台。以下是关于Windows、macOS和Linux三个平台上安装微信小程序开发工具的步骤和注意事项的详细介绍。 一、Windows平台安装方法: 访问微信小程序官方网站,在开发者工具页面上下载适用于Windows平台的安装

    2024年02月07日
    浏览(63)
  • (技巧)微信小程序getLocation接口申请

    之前在做个人小程序的时候,想要做一个地图功能,那么需要获取用户的地理位置,但是微信小程序获取高精位置接口需要申请。 天下苦微信久已!! 但是,有时候我又非常理解微信。如果使我们做这个平台,可能也是会有非常多的限制。 经过不断地失败,我总结了如何去

    2024年04月12日
    浏览(34)
  • 微信小程序第三方插件申请

    记录下小程序申请插件的页面,之前自己找了很久,方便后续使用 1. 先找到自己需要的第三方插件的appid 2. 登录微信公众平台后台(mp.weixin.qq.com) 3. 打开小程序插件页面          https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=插件appid         如小程序直播的页面就是:http

    2024年02月09日
    浏览(59)
  • 【微信小程序地理位置权限】申请教程

    1.微信为进一步规范开发者调用涉用户信息相关接口或功能,自2022年4月18日开始,将对地理位置相关接口实行准入开通。如未申请,后续将影响线上小程序相关功能的使用。 点击查看公告: 小程序地理位置相关接口调整 (qq.com) 1.打开微信公众平台 (qq.com),扫码登录小程序管

    2024年02月11日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包