草庐IT

day01小程序快速入门

Heymar-10 2023-03-28 原文

这几天正式开始微信小程序的修炼了,就目前而言来看简直就是vue和react的结合体,所以在学小程序前,先把框架熟悉还是挺有用的。

一.简介

1.1与普通网页区别

二.第一个小程序

需要注册小程序开发账号,最主要是获得AppId

然后就需要安装 微信开发者工具

2.1设置外观和代理

2.2模拟器查看效果

2.3真机查看效果

三.小程序代码构成

3.1项目基本组成结构

3.2页面组成部分

3.2.1 json文件的作用

  • app.json

  • projec.config.json

  • sitemap.json我的理解为用户在微信内部搜索的时候这个就发挥作用了,用户可以直接通过微信搜索搜到你这个小程序

    现在就是表示所有小程序页面都可以被搜索到

    如果不允许被索引到

  • 页面json

    会覆盖掉全局下的配置

3.3 新建小程序页面

直接通过修改app.json创建一个页面即可自动创建

3.4 修改项目首页

修改app.json里面的顺序为第一位即可

3.5 WXML模板

和html的区别

3.6 WXSS

和css区别

注意最好别用太生僻的选择器,wxss不会认,第二个是元素选择器

3.7 js

分为三类

四.小程序宿主环境

宿主环境即程序运行所依赖的环境,比如安卓系统只能安装安卓软件,ios系统只能安装苹果软件

手机微信是小程序宿主环境

4.1 通信模型

通信主体分为渲染层(wxml、wxss)和逻辑层(js脚本)

通信模型分为两部分,渲染层和逻辑层的通信,逻辑层和第三方服务器的通信,都是由微信客户端完成转发

4.2 运行机制

小程序执行过程

页面渲染过程

4.3 组件

一共分为九大类

  • 视图容器

    view(div)、scroll-view(可滚动视图区域)、swiper和swiper-item(轮播图组件和里面的每一项)

    view基本使用

    scroll-view基本使用

    注意要加横向或者纵向滚动的属性

    swiper基本使用

    swiper常用属性

  • 基础内容

    text(span)、rich-text

    text:selectable属性表示支持长按选中文本操作(注意小程序只有text有这个属性

    rich-text:将html字符串渲染为对应ui结构通过nodes属性节点

    注意:外面是双引号里面要用单引号

  • 其他常用组件

    button

    比htmlbutton功能要更丰富

    image

    图片组件宽高默认300px 240px

image:mode属性

可以指定图片裁剪缩放模式

4.4 API

一共分为三大类

  • 事件监听API wx就是小程序的顶级对象,类似于window

  • 同步API

  • 异步API

五.协同工作与发布

5.1 权限管理

首先如果是在中大型公司里面,开发一个小程序是需要同时多个人一起来协同开发的,包括开发和测试都是有不同的权限的

开发流程:

5.2 成员管理

主要就是项目成员和体验成员,最大的就是管理员

项目成员和体验成员的添加删除在小程序管理后台修改

5.3 发布

小程序版本

上传版本

上传之后就可以在后台看见上传的版本

审核通过就可以发布了

小程序的推广与运行数据的查看

查看数据

一种是通过管理后台

一种是通过小程序数据助手

有关day01小程序快速入门的更多相关文章

  1. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep,它会中断应用程序。否则,计算机将持续运行数周,直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗?欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数,使应用程序能够通知系统它正在使用中,从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  2. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时,rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  3. ruby - 在 Ruby 中编写命令行实用程序 - 2

    我想用ruby​​编写一个小的命令行实用程序并将其作为gem分发。我知道安装后,Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用,我需要在我的gemspec中指定什么。 最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序

  4. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如,一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情,所以我什至不知道从哪里开始。任何帮助,将不胜感激。谢谢! 最佳答案 无论Rails是什么,几乎所有Web应用程序都有您的要求,大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去,网站不应直接访问彼此

  5. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器,然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  6. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗? - 2

    刚入门rails,开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗?有哪些用例。您如何为Rails应用程序使用应用程序Controller?我不想在那里放太多代码,因为据我了解,每个请求都会调用此Controller。这是真的? 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度,尽管在某些情况下ApplicationContr

  7. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容? - 2

    我是一个Rails初学者,但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现),但没有得到任何结果。有什么建议吗?我知道Rails调试器,但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  8. ruby - 检查是否通过 require 执行或导入了 Ruby 程序 - 2

    如何检查Ruby文件是否是通过“require”或“load”导入的,而不是简单地从命令行执行的?例如:foo.rb的内容:puts"Hello"bar.rb的内容require'foo'输出:$./foo.rbHello$./bar.rbHello基本上,我想调用bar.rb以不执行puts调用。 最佳答案 将foo.rb改为:if__FILE__==$0puts"Hello"end检查__FILE__-当前ruby​​文件的名称-与$0-正在运行的脚本的名称。 关于ruby-检查是否

  9. ruby-on-rails - 如何在 Gem 中获取 Rails 应用程序的根目录 - 2

    是否可以在应用程序中包含的gem代码中知道应用程序的Rails文件系统根目录?这是gem来源的示例:moduleMyGemdefself.included(base)putsRails.root#returnnilendendActionController::Base.send:include,MyGem谢谢,抱歉我的英语不好 最佳答案 我发现解决类似问题的解决方案是使用railtie初始化程序包含我的模块。所以,在你的/lib/mygem/railtie.rbmoduleMyGemclassRailtie使用此代码,您的模块将在

  10. 程序员如何提高代码能力? - 2

    前言作为一名程序员,自己的本质工作就是做程序开发,那么程序开发的时候最直接的体现就是代码,检验一个程序员技术水平的一个核心环节就是开发时候的代码能力。众所周知,程序开发的水平提升是一个循序渐进的过程,每一位程序员都是从“菜鸟”变成“大神”的,所以程序员在程序开发过程中的代码能力也是根据平时开发中的业务实践来积累和提升的。提高代码能力核心要素程序员要想提高自身代码能力,尤其是新晋程序员的代码能力有很大的提升空间的时候,需要针对性的去提高自己的代码能力。提高代码能力其实有几个比较关键的点,只要把握住这些方面,就能很好的、快速的提高自己的一部分代码能力。1、多去阅读开源项目,如有机会可以亲自参与开源

随机推荐