精华内容
下载资源
问答
  • 微信小程序学习和实践总结

    千次阅读 2019-06-18 19:34:57
    微信小程序学习和实践总结: 技术方案选型;原生小程序的UI库推荐;小程序和公众号账号的如何统一; 消息推送机制;小程序推广三类方式; 小程序的如何发布; 如何获取公共号微信用户openid
    展开全文
  • 微信小程序学习总结(1)

    千次阅读 2019-06-03 15:48:58
    微信小程序学习总结(1) 一、注册微信小程序 访问https://mp.weixin.qq.com/ ,点击“立即注册” 选择“小程序” 然后点击“链接地址”激活账号即可 然后进行“主体信息登记” 然后再填写小程序的一些基本信息...

    微信小程序学习总结(1)

    一、注册微信小程序

    访问https://mp.weixin.qq.com/ ,点击“立即注册”

    在这里插入图片描述

    选择“小程序”
    在这里插入图片描述

    在这里插入图片描述

    然后点击“链接地址”激活账号即可
    在这里插入图片描述
    然后进行“主体信息登记”


    然后再填写小程序的一些基本信息,即可

    二、下载微信开发者工具

    点击“文档”
    在这里插入图片描述

    然后按下面的图示点击
    在这里插入图片描述

    我这里选择“稳定版”
    在这里插入图片描述

    三、打开微信开发者工具,新建一个项目

    其他的选默认的即可
    在这里插入图片描述

    在这里插入图片描述

    小程序的代码结构如下:

    1.首先有2个文件夹,pages和utils,pages里面主要存放一些页面相关的信息,utils文件夹里面存储一些公用的代码

    2.有4个全局配置文件,app.js app.json app.wxss project.config.json

    app.js的作用是帮我们注册一个微信小程序

    app.json是配置文件

    (解释:.wxml文件就类似于我们前端的html语言,wxss就类似于css样式)

    在这里插入图片描述

    在此之前先讲一下开发语法

    例1:

    新建一个index.wxml (.wxml文件就类似于我们的html文件的作用一样)
    在这里插入图片描述
    新建一个index.js文件
    在这里插入图片描述

    页面显示效果图如下:
    在这里插入图片描述

    例2: 数据绑定

    ​ index.wxml:
    在这里插入图片描述
    ​ index.js: 给theName这个变量赋值

    在这里插入图片描述

    页面显示效果如下:
    在这里插入图片描述

    例3:列表渲染

    index.wxml:
    在这里插入图片描述

    index.js:
    在这里插入图片描述

    页面展示效果:

    在这里插入图片描述

    例4:条件渲染

    index.wxml: 类似于程序设计里面的if ,else
    在这里插入图片描述

    index.js:
    在这里插入图片描述

    页面展示效果:
    在这里插入图片描述

    例5:模板引用

    index.wxml:

    在这里插入图片描述

    小疑问:下面的data属性的item前面的3个点是什么意思?难道是指传入的属性个数吗?

    index.js:
    在这里插入图片描述

    页面显示效果如下:
    在这里插入图片描述

    例5:模板引用

    第一种引入方式:import

    index.wxml 通过import标签导入a.wxml template 的is属性是引用的模板名称
    在这里插入图片描述
    a.wxml:
    在这里插入图片描述

    所以index.wxml的页面展示效果如下:
    在这里插入图片描述

    第二种引入方式:include:

    ​ include引入的特点是引入除了template之外的所有标签

    index.wxml
    在这里插入图片描述

    a.wxml:
    在这里插入图片描述

    ​ 讲解:在index.wxml里面引入了a.wxml中除了template之外的所有标签,所以只引入了Hello,word,而没有引入template name=“a”这个模板,所以在index.wxml里面的是没有用的,因为根本引不到

    所以index.wxml的页面展示效果如下:
    在这里插入图片描述

    例5:wxss样式的引入

    index.wxml:
    在这里插入图片描述

    index.wxss 通过@import导入 assets.wxss外来的样式
    在这里插入图片描述

    assets.wxss:
    在这里插入图片描述

    所以index.wxml页面的展示效果如下: 可以看到黑色的边框
    在这里插入图片描述

    例6:内联样式wxss的引入 (类似于前端的css样式)

    index.wxml: 里面有一个colorValue变量
    在这里插入图片描述

    index.js 给colorValue变量赋值
    在这里插入图片描述

    所以index.wxml的运行效果如下: 背景变成红色
    在这里插入图片描述
    ​ wxss样式的优先级比较如下: !import的优先级是无穷大,所以是最大
    在这里插入图片描述

    例7:module
    展开全文
  • 微信小程序学习(四):微信小程序连接云数据库 我今天就只是初步的连接了数据库,我就说一下我的基础代码,和我整了好久才整完的问题 这里有个初始化,非常重要!非常重要!非常重要!!! 是放在app.js里面的,我...

    微信小程序学习(四):微信小程序连接云数据库

    我今天就只是初步的连接了数据库,我就说一下我的基础代码,和我整了好久才整完的问题

    这里有个初始化,非常重要!非常重要!非常重要!!!

    是放在app.js里面的,我一开始连接数据库的时候,总是报错,说是没有初始化,没有wx.cloud.init({})这个方法,
    在网上找了半天,终于知道这个怎么写了
    这是代码

    //云初始化
        if (!wx.cloud) {
          console.error('请使用 2.2.3 或以上的基础库以使用云能力')
        } else {
          wx.cloud.init({
            traceUser: true,
          })
        }
    

    这个就是添加进去的,并没有删减别的东西,这个是截图
    在这里插入图片描述
    然后下面这是给数据库添加信息

    //点击加载更多
      loadMore:function(){
        const db = wx.cloud.database();
        const cont = db.collection('fitnessRoom');
        db.collection('fitnessRoom').get({
          success(res){
            console.log(res.data);
          }
        })
      },
    

    loadMore是点击事件的名字,
    这个是wxml的事件按钮代码

    <!-- 加载更多 -->
    <view class="weui-panel__ft" bindtap='loadMore'>
      <view class="weui-cell weui-cell_access weui-cell_link">
        <view class="weui-cell__bd">加载更多</view>
      </view>
    </view>
    
    展开全文
  • 微信小程序学习资源视频书籍免费

    千次阅读 热门讨论 2018-09-21 16:22:44
    回复“学习”领取小程序学习资源 微信小程序源码:大转盘https://github.com/JJYYZJY/wechat-turntable 微信小程序源码:电影日历https://github.com/JJYYZJY/wechat-movie-calendar ...

    搜索微信公众号【程序学习员】关注

    回复“学习”领取小程序学习资源

     

     

    微信小程序源码:大转盘 https://github.com/JJYYZJY/wechat-turntable
    微信小程序源码:电影日历  https://github.com/JJYYZJY/wechat-movie-calendar

    展开全文
  • 小程序学习一年感悟

    千次阅读 2018-06-21 08:59:58
    小程序学习一年感悟 2017年1月,微信正式发布小程序,小程序逐渐进入公众的视野。不温不火的几个月,随着小程序的生态不断的扩大完善,用户数量呈爆炸式的增长,越来越多的人投入小程序的怀抱。 当时的我,...
  • 微信小程序学习报告

    万次阅读 2018-04-15 16:03:46
    微信小程序学习报告1.申请账号 点击 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根据指引填写信息和提交相应的资料 2.安装开发模板 下载开发工具 小程序配置 app.json app.json 是对当前小程序...
  • 微信小程序学习

    万次阅读 多人点赞 2018-08-26 14:11:45
    最近工作正好有闲暇时间,根据公司安排先前期学习调研一下“微信小程序”,以供后期解决相关的运营需求,而本篇文章就是我对此次学习的一次总结。 什么是小程序 ? 如何全面具体的学习? 注册与新建小程序 认识开发...
  • 微信小程序学习——view的显示与隐藏 需要在全局数据块中,设定一个控制键。 data: { ......//省略其他代码 showView: true }, 然后是在wxml中,view的class中设置2个class,并用三目表达式来进行设定class。...
  • 微信小程序学习(三):在微信开发者工具中,使用WeUI 这里就是将WeUI导入到微信开发者工具中,我并没有使用多少样式,这里只是展示了一下怎么引用 网上有很多的方法,我绝大多数都没看懂,这里就是最简单的将文件...
  • 钉钉小程序学习笔记

    万次阅读 2019-02-22 17:23:31
    一、钉钉E应用与微信小程序 二、应用类型 E应用 E应用是一种全新的开发模式,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持iOS、安卓、等多端部署 H5微应用 微应用是指用H5方式开发的应用...
  • 因为工作的需要所以开始接触微信小程序了,特此来记录自己的学习过程和遇到的一些问题。 在新建一个微信小程序项目时主要会有如下几个文件夹和文件,主要就是介绍一下他们的主要功能。 文件: app.js:主要就是注册...
  • 微信小程序学习心得

    万次阅读 2017-03-30 11:33:53
    微信小程序使用笔记1. 环境搭建开发工具:微信开发者工具,vs2013开发环境:Windows,sqlserver数据库2. 开发过程小程序是属于公众号下的,开发前需要注册小程序,[点击注册](https://mp.weixin.qq.com/cgi-bin/wx)...
  • 关于微信小程序学习的一些心得

    千次阅读 2020-02-23 17:21:52
    学习两周微信小程序的开发,自己颇有收获,在这里大体总结一下自己的心得体会。 微信小程序开发,入门算是非常简单,只要看官文文档即可小程序简易教程。如何申请小程序账号,如何开发自己第一个小程序,如何发布,...
  • 微信小程序学习路线

    千次阅读 2018-04-24 21:58:00
    之前有学弟问我如何学习小程序开发,以下是我的学习路线,大家仅供参考
  • 本篇博客继续我们的小程序学习记录,记录的是我觉得小程序比较有意思的常用标签与 flex 布局相关知识。 首先介绍的是常用的标签 1.view view 作为小程序中的视图容器时,其类比对象可以是 web 中的 &lt;head...
  • 小程序学习(九):查询某个数组是否含有某元素 2019年9月23日 放代码 这是借鉴代码 var char = '1' var charArr = ['1','2','3'] var index = charArr.indexOf(char) if (index <0){ console.log('数组里面没有...
  • 小程序中一个切换期刊的业务,每次切换的时候,都需要向服务器发送请求,显得很麻烦, 所以才去storage的机制,在编译过程中就加载好数据存放到缓存中,这样每次切换期刊的时候,不用再次发送请求,完成优化 ...
  • 我们在用小程序的时候大部分都会有一个类似于这样的底部菜单: 这个样例图是显示了三个菜单,但是实际上还可以更多,小程序的底部菜单,是最多不能超过五个。 那么接下来就看看是如何实现的吧。 第一步,寻找...
  • 微信小程序学习(二)——首页多页面切换 本文主要介绍app.json的作用和使用。 本文主要参考:https://www.w3cschool.cn/weixinapp/hw9k1q8m.html 好,下面上货。 先看一下运行效果。 ...
  • 详细的微信小程序学习笔记(从入门到项目)(1)

    万次阅读 多人点赞 2018-09-21 20:44:58
    微信小程序(1) 准备工作 1 获取 AppID(小程序ID) 登录微信公众平台,新建一个邮箱,避免旧有的邮箱有注册过公众号等.无法获取. 进行小程序的注册. 选择个人, 然后填写信息.进行登录之后, 在首页, 设置中. 然后点击...
  • 前段时间部门里面的前端同事,在熟悉微信小程序时遇到了一个坎,大概就是说小程序里面的canvas绘制图像不起作用。这次学习就以canvas为主题,试试看能不能解决这个问题。 先扔两个传送门在这里:   文档·小程序...
  • 1.微信小程序目录结构 微信小程序默认的目录结构,下面一一介绍: 1.1 小程序的文件格式介绍 在项目中我们可以看到四种文件类型: .js后缀的文件是脚本文件,页面的交互等代码在这里实现; .json后缀的文件是...
  • 小程序学习:动画animation

    万次阅读 2018-06-08 09:58:54
    wxml: <view class="box"> <view class="headerimg" bindtap="click" animation="{{animationData}}"> <open-data type="userAvatarUrl" ></open-data> &l...
  • 微信小程序学习笔记——view和Flexbox

    千次阅读 2016-11-21 21:56:49
    最近这段时间我看学习微信小程序的人还不少,正好公司不是太忙也就看了下,但是由于我是安卓出身,没有学过前端的东西,所以有挺多东西学起来还是比较吃力的,正好在这里讲自己学习到的东西一点点的记录下,方便自己...
  • 小程序学习——打开已有的项目

    万次阅读 2018-04-10 10:55:55
    在项目目录中选择你要打开的小程序demo,AppID可以选择无ID,项目名称要和你打开的文件同名4.打开之后大概是需要等一会会出现项目目录和代码,此时好像还是不能看到小程序页面的5.在普通编译模式那里点击,选择添加...
  • 微信小程序破解教程微信小程序只对少部分开放公测名额,大部分人都是没有权限,所以想要体验微信小程序开发还是需要破解一下的,破解方法比较简单,GitHub上早已有了破解教程...注意事项 在安装开发工具0.9版本时,它...
  • 小程序学习--promise.all用法详解

    千次阅读 2018-11-13 11:23:57
    这边的加载动画,我们可以用到小程序自带的方法 显示加载:wx.showLoading() 隐藏加载:wx.hideLoading() 那么该如何判断请求结束后,隐藏掉加载的动画呢? 可以采用 promise.all方法可以把多个promise实例合并为一个...
  • swiper{ width: 100%; height: calc(100vw*296/720); } image{ width: 100%; }

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,319,314
精华内容 527,725
关键字:

小程序学习