小程序开发特辑—小程序申请及开发环境搭建(代码片段)

栏观科技 栏观科技     2023-04-02     445

关键词:

  互联网巨头们都热衷于搭建平台,希望能够打造自己的生态,依靠生态公司开发各种各样的应用来满足用户的需求。这其中涉及到两个比较大的问题:一方面巨头的腿需要足够粗,这样生态公司才愿意花时间和精力在这些平台上;另一方面如何管控这些生态公司,保证它们能够提供相对一致的用户体验,这样不至于出现“生态繁荣了,但体验下降了”的局面,小程序应运而生。
  2017微信发布小程序,之后各大互联网巨头都推出了自己的小程序。但只有微信小程序支持个人开发者,其他小程序均需要企业认证,顾本特辑只能以微信小程序为例,结合小编自己开发的小程序具体讲讲如何进行小程序开发。

小程序申请

  小程序的申请比较的简单,只需要准备一个手机号和一个邮箱即可。注意邮箱必须没有绑定过其他小程序或者公众号,手机号之前绑定的小程序和公众号的数量不超过5个。需要提醒的是:小程序服务类型不同,审核的标准也会不一样。工具类的小程序比较容易过审,也不需要提交额外的材料。注册成功之后记下小程序的appKey和appSecret,后续的开发中会经常用到。

环境搭建

  小程序开发需要专门的开发工具,可以前往官网进行下载安装。打开开发工具,填入申请的小程序appId,开发环境就搭建完成了。

目录结构介绍

  小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:

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

开发实战

  接下来介绍之前做的一款小程序:《工具百宝箱》,我会分多期介绍里面的每一个工具。先介绍一个首页是如何实现的。
  工具百宝箱这个小程序底部有两个tab,一个是工具的列表,一个是我的。这个只需要在app.json里面进行配置即可:


 "useExtendedLib": 
    "kbone": true,
    "weui": true
  ,
  "entryPagePath": "pages/index/index",
  "tabBar": 
    "selectedColor": "#f47920",
    "backgroundColor": "#f2f2f2",
    "list": [
        "pagePath": "pages/index/index",
        "text": "工具",
        "iconPath": "/resources/icons/tools-not-selected.png",
        "selectedIconPath": "/resources/icons/tools-selected.png"
      ,
      
        "pagePath": "pages/my-profile/my-profile",
        "text": "我的",
        "iconPath": "/resources/icons/my-profile-ori.png",
        "selectedIconPath": "/resources/icons/my-profile-selected.png"
      
    ]
  

上面配置中的"entryPagePath": "pages/index/index"表示应用启动之后打开的页面为index,即工具列表页面。工具列表页比较的简单,只用到了常用的列表渲染。代码如下:

<view class="page" data-weui-theme="light">
  <view class="page__bd linui-mt-16 linui-mlr-5">
    <view class="weui-grids">
      <navigator class="weui-grid" wx:for="toolList" url="item.url" wx:key="text">
        <view class="weui-grid__icon">
          <image src="item.icon" alt></image>
        </view>
        <view class="weui-grid__label">item.text</view>
      </navigator>
    </view>
  </view>
</view>
// index.js
// 获取应用实例
const app = getApp()

Page(
  data: 
    toolList: [
      
        text: "转盘做决定", icon: "../../resources/icons/wheel.png",
        url: "../wheel-config/wheel-config"
      ,
      
        text: "手持滚动弹幕", icon: "../../resources/icons/subtitles.png"
        , url: "../subtitle-config/subtitle-config"
      , 
        text: "手机闪屏", icon: "../../resources/icons/rainbow.png",
        url: "../rainbow/rainbow"
      , 
        text: "情侣昵称",
        icon: "../../resources/icons/love.png"
        , url: "../love-nickname/love-nickname"
      ,
      
        text: "金额转大写", icon: "../../resources/icons/money.png",
        url: "../money-upper/money-upper"
      ,
      
        text: "二维码生成"
        , icon: "../../resources/icons/qr-code.png"
        , url: "../qrcode/arcode"
      , 
        text: "本机IP"
        , icon: "../../resources/icons/ip.png"
        , url: '../ip/ip'
      , 
        text: "IP查询"
        , icon: "../../resources/icons/internet.png"
        , url: "../search-ip/search-ip"
      , 
        text: "md5加密"
        , icon: "../../resources/icons/md5.png"
        , url: "../md5-tool/md5-tool"
      
    ]
  
)

保存一下文件,开发工具会自动的进行编译,即可看到首页了。

结语

  接下来将介绍每一个工具具体是如何开发的,喜欢的朋友记得关注哦~

10分钟入门微信小程序开发:从环境搭建到开发出第一个程序。(代码片段)

小程序简介小程序是一种不需要下载安装即可使用的快速应用,它实现了应用“触手可及”的操作;用户扫一扫或搜一下即可打开应用,完全不需要安装,因此小程序不仅可提高的用户的应用体验,也方便应用的传扩散。... 查看详情

微信小程序开发上线注意事项(代码片段)

微信小程序开发上线注意事项记录微信小程序开发及上线过程中需要注意的一些事项。一、准备工作1.抢注小程序名称只要想好要开发小程序后,就应该立刻进行小程序账号和名称的注册。及时验证小程序名称是否符合要求&#... 查看详情

微信小程序开发环境搭建

微信小程序可谓是今天最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会给移动端App带来一个寒冬,身为一个Android开发者我是不相信的,即使有,那也是很遥... 查看详情

微信公众号及小程序开发入门(代码片段)

开发过程中一些对微信公众号和小程序的认识。一、服务号在公众号开发入门一中提到,微信公众号分为订阅号和服务号,其中服务号功能最强,只准企业申请,并且要每年交300元认证费。如果企业想拥有自己的... 查看详情

最全教程:微信小程序开发入门详解(代码片段)

笔者由于工作需要,曾经参加过一个微信小程序同SAP系统集成的项目,因此从零开始学习了微信小程序的开发知识。这里通过系列文章把自己所学分享出来,希望对相关学习者有所帮助。步骤1:微信小程序的申请... 查看详情

微信小程序开发开启(代码片段)

小程序和普通网页开发的区别1.运行环境不同小程序是运行在微信环境中,而网页是运行在浏览器环境中。2.API不同由于运行环境不同,所以小程序中,无法调用DOM和BOM的API。但是,小程序中可以调用微信环境提供... 查看详情

小程序开发总结一:mpvue框架及与小程序原生的混搭开发(代码片段)

mpvue-native:小程序原生和mpvue代码共存问题描述mpvue和wepy等框架是在小程序出来一段时间之后才开始有的,所以会出现的问题有:需要兼容已有的老项目,有些场景对小程序的兼容要求特别高的时候需要用原生的方式开发解决思路... 查看详情

微信小程序开发入门教程-小程序账号注册及开通(代码片段)

17年小程序开始公测,经过5年的发展,无论从组件、开发工具、api、生态、社区,都已经发展的非常成熟了。如果17年年初你看小程序,觉得无需安装即用即走还是一个理念的话。站在今天看过去,往往是先提... 查看详情

微信小程序开发入门教程-小程序账号注册及开通(代码片段)

17年小程序开始公测,经过5年的发展,无论从组件、开发工具、api、生态、社区,都已经发展的非常成熟了。如果17年年初你看小程序,觉得无需安装即用即走还是一个理念的话。站在今天看过去,往往是先提... 查看详情

微信小程序开发基础「配置」与「逻辑层」(代码片段)

微信小程序作为微信生态重要的一环,在实际生活、工作、商业中的应用越来越广泛。想学习微信小程序开发的朋友也越来越多,本文将在小程序框架的基础上就微信小程序项目开发所必需的基础知识及语法特点进行了详细总结... 查看详情

分享《微信小程序开发图解案例教程》pdf及代码+《微信小程序开发入门及案例详解》pdf及代码

...9g0g更多分享:https://pan.baidu.com/s/1g4hv05UZ_w92uh9NNNkCaA《微信小程序开发图解案例教程》PDF及代码+《微信小程序开发入门及案例详解》PDF及代码《微信小程序开发图解案例教程》PDF,356页,带书签目录;配套源代码。采用图、表与... 查看详情

前端微信小程序开发基础

文章参考(黑马小程序教学视频)仅供参考与学习简介小程序和普通页面开发的区别运行环境不同网页运行在浏览器中,小程序运行在微信环境中API不同由于运行环境不同,所以小程序中,无法调用DOM和BOM的AP... 查看详情

微信小程序开发创建一个小程序helloworld!(代码片段)

开发微信小程序并不是很难,网上有很多小程序开发资料,尤其是微信官方的《小程序开发指南》最详细。下面是我开发小程序的历程:第一步,请前往https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 微信开发者工具下载... 查看详情

微信小程序开发从0到1~入门篇(代码片段)

目录1. 微信小程序介绍1.1 什么是小程序?1.2  小程序可以干什么?2.申请账号2.1申请帐号2.2 测试号申请(我们小程序账号申请完成之后,建议务必要申请一个测试号用来开发)3. 安装开发工具3.1选择稳定... 查看详情

微信小程序开发——打开另一个小程序(代码片段)

微信小程序打开另一个小程序,有两种方法:1.超链接;2.点击按钮。全局配置:跳转到其他小程序,需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下:App.json..."navigateToMiniProgramAppIdList":["wxe5f52902cf4de896"]否则会... 查看详情

小程序开发之路由跳转(代码片段)

文章目录I、小程序路由跳转1.1wx的用法1.2uni的用法II路径的获取2.1获取小程序路径2.2获取小程序码seealso无论是小程序内部的快捷跳转,还是从外部进入小程序都离不开路由的使用。今天就来谈谈小程序的路由跳转。I、小程序路... 查看详情

小程序开发之路由跳转(代码片段)

文章目录I、小程序路由跳转1.1wx的用法1.2uni的用法IV路径的获取2.1获取小程序路径2.2获取小程序码seealso无论是小程序内部的快捷跳转,还是从外部进入小程序都离不开路由的使用。今天就来谈谈小程序的路由跳转。I、小程序路... 查看详情

微信小程序开发创建一个小程序页面(代码片段)

为了方便讲解,我们将上篇博客创建的小程序除了project.config.json和sitemap.json两个文件保留,其他全部删除(这两个文件存的是小程序的创建信息,删掉会有报错提示)。接下来我们创建如下文件,先不写内容。写入如下代码://... 查看详情