微信小程序上线发布流程图文详解

2024-02-28 14:21:07

最近花了一天左右的时间学习了下微信小程序的开发，试着练习一把的心态，搞了一个很简单的页面。

就当是学习总结吧：学习要点还是挺多的，通过查看官方接口文档，熟悉微信小程序开发工具，工程架构，相比传统页面开发类似，微信小程序也是由js文件，页面布局文件wxml和样式文件wxss

一、先登录微信公众平台，在小程序栏目里注册获取appid，在开发工具里填写该appid，打开开发工具进行编码工作。

1.1、知识点巩固。

app.json文件

{
 "pages":[
  "pages/huangbaokang/huangbaokang",
  "pages/zhanglulu/zhanglulu"
 ],
 "window":{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#baf088",
  "navigationBarTitleText": "幸福婚姻",
  "navigationBarTextStyle":"black"
 },
 "tabBar": {
  "list": [
   {
    "pagePath": "pages/huangbaokang/huangbaokang",
    "text": "黄宝康",
    "iconPath": "images/1.png",
    "selectedIconPath": "images/1.png"
   },
   {
    "pagePath": "pages/zhanglulu/zhanglulu",
    "text": "张露露",
    "iconPath": "images/2.png",
    "selectedIconPath": "images/2.png"
   }
  ]
 }

}

入口全局配置主要配置页签tabBar设置，全局pages定义，头部背景，及字体，网络超时等。

wxml标签的掌握

huangbaokang.wxml文件

<!--pages/huangbaokang/huangbaokang.wxml-->
<view class='title'>黄宝康的帅气照</view>
<view class='photo-list' wx:for="{{photos_hbk}}" >
 <!--遍历图片文件，生成各个view-->
 <view class='photo-item'>
  <image src='/images/hbk{{index+1}}.png'></image>
 </view>
</view>

huangbaokang.js文件

Page({

 /**
  * 页面的初始数据
  */
 data: {
  photos_hbk: ['1.png', '2.png', '3.png', '4.png']
 }
})

huangbaokang.wxss文件

/* pages/huangbaokang/huangbaokang.wxss */
.title{
 font-size: 70rpx;
 text-align: center;
}

.photo-list{
 margin-top: 20rpx;
}

.photo-item{
 width: 100%;
 height: 100%;
 margin-top: 20rpx;
}

具体到页面的开发，需要学习wxml各种标签的用法，语句wx:for的使用，及动态数据绑定（使用{{}}）。

事件函数处理

进一步掌握事件处理等，绑定一个方法，在js文件中相对应一个方法。

二、上传发布审核上线

编码完之后，可以在开发工具右上角点击上传按钮将代码至微信后台。如下：

输入相关版本号确定之后可以在微信小程序后台管理处看到提交的版本。

上图我的是提交完之后的，提交完之后进入审核中，一般一两天就能查看审核结果，通过审核之后，还需要发布上线。

经过上面的操作之后就可以在微信里，小程序处进行搜索我们自己开发的程序了。

附：工程架构图

以上所述是小编给大家介绍的微信小程序上线发布流程详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

微信小程序仿朋友圈发布动态功能

仿照微信朋友圈做了一个界面如下,先看效果: 1.点开界面 2.选择图片 3.点击上传 4.动态显示第一个页面的wxml: <view class='page'> <textarea class='text' bindinput="input" placeholder="分享动态" auto-height/> <view class="image_content"> <view class='image'
微信小程序实战实例开发流程详细介绍

前言: 微信小程序最近要发布了,抽空学习下如何开发,在网上找到的实例,觉得不错,给大家分享, 前后两天花了大约四五个小时制作完了自己第一个小程序,当然是没法发布的,小程序的发布要求还是挺严格的:企业资质.HTTPS.审核. 先大概介绍下自己,我9年前和很多网友一样开始自学编程,这些年来什么语言都学过.什么平台都接触过,自己也做过十来个产品,所以编程基础不是很稳固但是各方面都相对比较熟悉,因此在接触小程序的时候上手比较快. 至于为什么现在选择开发小程序,原因很简单,尝尝鲜! 学习
微信小程序开发(一) 微信登录流程详解

最近在研究微信小程序开发,非常有意思的一个东西.花了一点时间写了一个微信的登录流程,包括后端接口和小程序代码. 做过微信登录的都知道,我们需要一个标识来记录用户的身份的唯一性,在微信中unionId就是我们所需要的记录唯一ID,那么如何拿到unionId就成了关键,我将项目分为小程序和后台PHP代码两部分来讲. 微信小程序开放平台先从我们的小程序代码开始简单的说一下我们小程序的js代码登录流程 login ->获取code ->getUserInfo获取iv和encryptedData
微信小程序开发的基本流程步骤

一,微信小程序简介 1,微信小程序简称小程序,张小龙在微信公开课 Pro 上发布的小程序正式上线,时间是2017年1月9日. 2,微信小程序这个词可以分解为"微信"和"小程序"两部分 (1),其中"微信"可以理解为"微信中的",指的是小程序的执行环境:当然微信在提供执行环境的同时也延长了用户使用微信的时间. (2),"小程序"是说它首先是程序,然后具备轻便的特征.小程序并不像其他应用那样,它不需要安装,而是
微信小程序实现流程进度的图样式功能

最近正在做微信小程序,需要实现一个流程进度的图样式如下面需求: 没完成的灰色小圆点表示完成的使用蓝色小圆点设置当前状态使用有外圈的小圆点表示实现起来比较简单,实现思路,使用一个列表实现,列表中的每一个item的样式如下图使用win10画板画的不好看图上的意思就是每个item 前面有一段线条中间是个圆圈然后后面有一段线条.之所以这样是因为下面的文字需要居中显示在圆圈的下面.如果不需要文字的话可以一个圆圈后面跟一条直线会更简单一点. 按照上面的图片,html布局为下面 <view cl
微信小程序登陆流程详细介绍

微信小程序登陆流程 1:session_key和openId是什么?session_key 官方说明为: session_key是微信服务器生成的针对用户数据进行加密签名的密钥 session_key的用途 (1)对wx.getUserInfo()接口得到"用户信息中的密文"进行解密. (2)对它"稍作处理",用作维护小程序的登录态. "稍微处理"大体为: (1)生成一个随机数(官方把他叫做3rd_session) (2)把这个随机数当sess
微信小程序支付及退款流程详解

首先说明一下,微信小程序支付的主要逻辑集中在后端,前端只需携带支付所需的数据请求后端接口然后根据返回结果做相应成功失败处理即可.我在后端使用的是php,当然在这篇博客里我不打算贴一堆代码来说明支付的具体实现,而主要会侧重于整个支付的流程和一些细节方面的东西.所以使用其他后端语言的朋友有需要也是可以看一下的.很多时候开发的需求和相应问题的解决真的要跳出语言语法层面,去从系统和流程的角度考虑.好的,也不说什么废话了.进入正题. 一. 支付支付主要分为几个步骤: 前端携带支付需要的数据(商品id,购
微信小程序利用co处理异步流程的方法教程

本文主要介绍的是关于微信小程序利用co处理异步流程的方法教程,分享出来供大家参考学习,需要的朋友们下面来看看详细的介绍: co co是一个基于ES6 Generator特性实现的[异步流程同步化]写法的工具库. co需要使用Promise特性,所以,我们先来创建一个使用Promise来处理的异步方法: function myAsyncFunc() { return new Promise(function (resolve, reject) { setTimeout(function () {
微信小程序中使用Promise进行异步流程处理的实例详解

微信小程序中使用Promise进行异步流程处理的实例详解我们知道,JavaScript是单进程执行的,同步操作会对程序的执行进行阻塞处理.比如在浏览器页面程序中,如果一段同步的代码需要执行很长时间(比如一个很大的循环操作),则页面会产生卡死的现象. 所以,在JavaScript中,提供了一些异步特性,为程序提供了性能和体验上的益处,比如可以将代码放到setTimeout()中执行:或者在网页中,我们使用Ajax的方式向服务器端做异步数据请求.这些异步的代码不会阻塞当前的界面主进程,界面还是可以
微信小程序上线发布流程图文详解

最近花了一天左右的时间学习了下微信小程序的开发,试着练习一把的心态,搞了一个很简单的页面. 就当是学习总结吧:学习要点还是挺多的,通过查看官方接口文档,熟悉微信小程序开发工具,工程架构,相比传统页面开发类似,微信小程序也是由js文件,页面布局文件wxml和样式文件wxss 一.先登录微信公众平台,在小程序栏目里注册获取appid,在开发工具里填写该appid,打开开发工具进行编码工作. 1.1.知识点巩固. app.json文件 { "pages":[ "pages/huan
微信小程序全局文件的使用详解

目录全局文件总结我们前边两篇介绍了账号的申请.注册,工具的安装,云服务的开通.本篇我们介绍一下基础语法.介绍的方法呢我们会结合上微搭低代码的工具一起做个对比.因为低代码工具也产生了非常多的技术概念,但最终在发布成小程序的时候也是按照微信的规范去生成的,把微信开发者工具学会了也可以更深入的了解低代码的相关概念. 全局文件小程序中是分为全局和页面级两部分.全局是在小程序的所有页面都有效,页面级是只在当前页面中生效.小程序根目录有三个文件app.js.app.json.app.wxss这三个就
网络安全渗透测试小程序抓包流程步骤详解

目录小程序测试流程搜索目标小程序小程序主体信息确认小程序包获取 PC端 windows端获取小程序包流程移动端解包调试抓包小程序测试流程分为两个方面,解包可以挖掘信息泄露问题.隐藏的接口,抓包可以测试一些逻辑漏洞.API安全问题.两者结合起来就可以边调试边进行测试,更方便于安全测试. 搜索目标小程序目标搜索不能仅仅局限于主体单位,支撑单位.供应商.全资子公司等都可能是入口点,所以小程序当然也不能放过它们. 小程序主体信息确认查看小程序账号主体信息,否则打偏了花费了时间不说
微信小程序本地数据存储实例详解

微信小程序本地数据存储实例详解前言如果您在看此文章之前有过其他程序的开发经验,那一定会知道一般例如安卓或者苹果的原生APP都提供了本地的存储功能,甚至可以使用sqlite数据库来做存储.可是微信的小程序框架基于微信本身,其实际运行环境只是在浏览器里面,所以不会提供那么丰富的数据存储实力.但html5开始已经可以在浏览器里面存储数据,好在微信的小程序给这个功能封装好了,这样我们可以使用数据存储. 每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStor
微信小程序url与token设置详解

微信小程序url与token设置详解新浪云应用sae的代码里创建一个weixin.php文件,写入以下代码 define("TOKEN","myToken");// 后台填写的token,在微信公众平台启用 $wechatObj = new wechatAPI(); $wechatObj->isValid(); class wechatAPI { public function isValid()//验证微信接口,验证函数以外的代码和微信公众号开发token
微信小程序动态传参实例详解

微信小程序动态传参实例详解在微信小程序的开发过程中经常会用到动态传参,比如根据某一页面传参的不同,加载不同的新的页面.接下来介绍下如何实现. 上一篇博客中介绍了如何用wx:for循环显示数组,一般情况下我们要实现的功能是点击不同的元素进入不同的页面,比如在另一个页面加载某个元素的详细信息. 跳转这里采用navigator跳转,在navigator跳转的链接上将参数加上去: index.wxml(根据点击页面的不同传递参数) <view class="item" wx:for=
微信小程序检查接口状态实例详解

微信小程序检查接口状态实例详解实例代码: // 检查接口是否可用 wx.getSetting({ success(res) { if (!res['scope.record']) { // 接口调用询问 wx.authorize({ scope: 'scope.userInfo', success(res) { wx.startRecord() // 用户已经同意小程序使用录音功能,后续调用 wx.startRecord 接口不会弹窗询问 }, fail() { }, complete()
微信小程序滚动选择器(时间日期)详解及实例代码

微信小程序滚动选择器(时间日期)详解微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器. 看下相应的属性: 具体的来看看代码,布局: <view class="section" > <
微信小程序 POST请求的实例详解

微信小程序 POST请求的实例详解在微信小程序里post请求和get情求,写法差不多,但是还是有一点点不同的,下面利用post请求做一个查询天气的微信小程序demo. 页面代码: <view> {{title}} </view> <span style="font-size:24px;"> <view class="container"> <view style=
微信小程序网络请求wx.request详解及实例

微信小程序网络请求wx.request详解及实例如果说小程序API里面最重要一个接口是哪一个?那么首推wx.request().相当于在小程序内请发起一个https请求(本地调试模式下支持HTTP).HTTP协议中共定义了八种方法或者叫"动作"来表明对Request-URI指定的资源的不同操作方式. GET:向特定的资源发出请求. POST:向指定资源提交数据进行处理请求.数据被包含在请求体中. PUT:向指定资源位置上传其最新内容. DELETE:请求服务器删除Request-UR

微信小程序上线发布流程图文详解

相关推荐

随机推荐