精华内容
下载资源
问答
  • 上一章我们讲解了微信小程序网络请求的访问,wx.request函数的调用以及数据的赋予。这一章我们来绘制一下电影分区,达到以下效果。

    上一章我们讲解了微信小程序网络请求的访问,wx.request函数的调用以及数据的赋予。这一章我们来绘制一下电影分区,达到以下效果。
    在这里插入图片描述

    拆分UI

    从UI来看,可以很明显的看到从影院热议到星级评分是一个item。而且这个item是可以左右滑动的。并且会有多个item,我们需要通过for循环来展示多个item。
    在这里插入图片描述

    绘制Item布局

    在知道布局原理之后我们就可以来绘制item子布局了。因为内容比较多,所以我们新建一个templates.wxml文件来存放item子布局的代码。
    在这里插入图片描述
    1.创建一个template当作item子布局。

    <template name="movie_subject">
      <view class="subject">
    	....
      </view>
    </template>
    

    2.绘制顶部分类标签,加载更多布局。

    <!-- 顶部 影院热映标签  查看更多按钮-->
    <view class="subject_top">
       <text class="title">....</text>
       <navigator class="lookMore" url="....">查看更多 ></navigator>
    </view>
    

    3.绘制滑动区域内容

    <!-- 内容滑动区域  scrollview-->
    <scroll-view class="movieList" scroll-x="true">
       <block wx:for="{{subItem.movieList}}" wx:key="{{index}}">
          <template is="movieItem" data="{{...item}}"></template>
       </block>
    </scroll-view>
    

    4.新建一个template绘制滑动区域内元素

    <!-- 内容滑动区域里面的元素-->
    <template name="movieItem">
      <navigator class="movie_item" url="/pages/movie-detail/movie-detail">
        <view class="movie_img">
          <image src="{{movie_img}}"></image>
        </view>
        <view class="name">{{name}}</view>
        <template is="star" data="{{rate}}"></template>
      </navigator>
    </template>
    

    5.同样新建一个template绘制星星评级区域内元素

    <!-- 星星评级-->
    <wxs src="../../wxs/star.wxs" module="starUtil" />
    <template name="star">
      <view class="star_box">
        <view class="stars">
          <block wx:for="{{starUtil.formatRate(rate)}}" wx:key="{{index}}">
            <view class="iconfont icon-xingxing {{item==1?'light':''}}"></view>
          </block>
        </view>
        <text class="star_score">{{rate}}</text>
      </view>
    </template>
    

    6.回到index.wxml绘制影视列表,通过wx-for循环绘制

      <!-- 影视列表 -->
      <block wx:for="{{subJectData}}" wx:key="{{index}}" wx:for-item="subItem">
        <template is="movie_subject" data="{{subItem}}"></template>
      </block>
    

    数据源问题

    之前已经说过微信小程序如何通过wx.request函数访问网络数据;在编写实力的时候可以自己使用mork数据进行测试,这里就不做提供了,并且所有模拟数据都存放至了utils下面的data.js文件中。
    在这里插入图片描述

    在使用的时候引入资源,并在data里面直接获取就能使用
    在这里插入图片描述
    通过以上代码就可以实现首页的电影分区内容展示了,效果如下:
    在这里插入图片描述
    最后附上源码下载地址,还没有上传至git,这里是csdn,等有空上传到git了会发布新地址。
    下载地址:
    小程序源码CSDN下载地址
    小程序源码码云下载地址

    展开全文
  • 微信小程序如何提交表单数据到数据库 1、先在wxml里面写一个表单,在form里面添加bindsubmit的属性,下面再添加两个button,在button里面添加属性form-type,form-type有两种取值:submit、reset <form ...

    微信小程序如何提交表单数据到数据库

    1、先在wxml里面写一个表单,在form里面添加bindsubmit的属性,下面再添加两个button,在button里面添加属性form-type,form-type有两种取值:submit、reset

    <form bindsubmit="btnSub">
      <input name="title" placeholder="请输入标题"></input>
      <input name="author" placeholder="请输入作者"></input>
      <textarea name="content" placeholder="请输入内容"></textarea>
      <button type="primary" form-type="submit">提交</button>
      <button type="default" form-type="reset">重置</button>
    </form>
    

    2、在wxss里面对表单进行简单的渲染

    input{ border: 1px solid grey;}
    textarea{ border: 1px solid grey;}
    

    3、在js中写方法,使用db.collection(“datalist”).add({ })向云数据库中添加数据

      btnSub(res){
        wx.showLoading({
          title: '数据提交中......',
        })
        var {title,author,content}=res.detail.value;
        //var resVlu=res.detail.value
        console.log(title,author,content)
        db.collection("demolist").add({
          data:{
            title:title,
            authot:author,
            content:content
          } 
        }).then(res=>{
          console.log(res)
          wx.hideLoading({
            success: (res) => {},
          })
        })
      }
    

    注:
    这里使用到了ES6中的解构函数来获取表单的数据,再添加到云数据库中。
    var{title,author,content}=res.detail.value;

    如不使用解构函数则可以一个一个值获取:
    var title=res.detail.value.title;
    var author=res.detail.value.author;
    var content=res.detail.value.content;

    另外这里还有一种方法,将res.detail.value返回的结果作为对象直接传入data:

    var resVlu=res.detail.value
    db.collection(“datalist”).add({
    data:resVlu
    }).then(res=>{
    console.log(res)
    })

    展开全文
  • 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。 文件 必须 作用 app.js 是 小程序逻辑 app.json 是 小程序公共配置 app.wxss 否 小程序公共样式表 一个小程序页面由四个文件组成,...

    1. 目录结构

    小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

    文件必须作用
    app.js小程序逻辑
    app.json小程序公共配置
    app.wxss小程序公共样式表

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

    文件类型必须作用
    js页面逻辑
    wxml页面结构
    json页面配置
    wxss页面样式表

    2. app.json 文件介绍

    小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

    2.1.自动创建page页面文件

    在这里插入图片描述

    2.2 菜单栏

    在这里插入图片描述

    "tabBar": {
      "list": [
         {
            "pagePath": "pages/index/index",
            "text": "主页",
            "iconPath": "images/tabBar/icon_index.png",
            "selectedIconPath": "images/tabBar/icon_index_selected.png"
          },
          {
            "pagePath": "pages/my/my",
            "text": "我的",
            "iconPath": "images/tabBar/icon_my.png",
            "selectedIconPath": "images/tabBar/icon_my_selected.png"
          }
      ]
    },
    

    2.3 页面配置

    每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置,页面中配置项会覆盖app.jsonwindow 中相同的配置项。

    {
      "navigationBarBackgroundColor": "#ffffff",
      "navigationBarTextStyle": "black",
      "navigationBarTitleText": "小程序名称",
      "backgroundColor": "#eeeeee",
      "backgroundTextStyle": "light"
    }
    

    3 app.js文件

    在这里插入图片描述

    globalData: {
    	url: "http://127.0.0.1/",
    },
    

    onLaunch() 函数:默认程序打开后一定执行的功能

    4 综合小案例

    这里配置两个文件:app.json,index.wxml

    4.1 app.json

    {
      "pages": [
        "pages/index/index",
        "pages/my/my"
      ],
      "window": {
        "backgroundColor": "#F6F6F6",
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#F6F6F6",
        "navigationBarTitleText": "小程序名称",
        "navigationBarTextStyle": "black"
      },
      "sitemapLocation": "sitemap.json",
      "style": "v2",
      "tabBar": {
        "list": [
          {
            "pagePath": "pages/index/index",
            "text": "主页",
            "iconPath": "images/tabBar/icon_index.png",
            "selectedIconPath": "images/tabBar/icon_index_selected.png"
          },
          {
            "pagePath": "pages/my/my",
            "text": "我的",
            "iconPath": "images/tabBar/icon_my.png",
            "selectedIconPath": "images/tabBar/icon_my_selected.png"
          }
        ]
      }
    }
    

    4.2 index.wxml

    <view>
    	你真棒
    </view>
    

    在这里插入图片描述

    欢迎加入博主官方QQ群交流: 779133600

    展开全文
  • 这里先要了解微信小程序的几个函数,首先定位到app.js这个文件,可以看到在文件里面有一个wx.login的函数,这个就是用来调用微信登录的函数,使用这个函数我们可以获取到一个code值,这个值的作用是需要我们将这个...

    我们在使用小程序的时候都知道,他是直接获取微信的登录信息的,所以要调用微信的登录授权,获取到用户的信息。

    微信登录授权

    函数:wx.login

    这里先要了解微信小程序的几个函数,首先定位到app.js这个文件,可以看到在文件里面有一个wx.login的函数,这个就是用来调用微信登录的函数,使用这个函数我们可以获取到一个code值,这个值的作用是需要我们将这个code值传给微信后台,通过后台来获取opeid,sessionKey和unionId等参数。

    在这里插入图片描述

    函数:wx.getSetting

    通过这个函数我们可以获取到用户的当前设置,返回值中只会出现小程序已经向用户请求过的权限。

    比如我们在打开一个新的小程序的时候会弹出一个弹框提示说获取用户信息,那是微信需要权限才能获取的,当你点击确定的时候就把这个权限设置进去了,在调用getSetting方法的时候就不会再次弹出该弹框了。
    在这里插入图片描述
    同时我们调用用户信息的函数也要放在这个函数之后。

    函数:wx.getUserInfo

    在获取用户信息的时候是网络请求,会存在延迟情况(网络比较慢的时候),所以返回数据有时候会在Page.onLoad之后才进行返回,所以这里需要些一个回调函数防止获取不到用户信息的情况出现。

    //获取用户信息
    wx.getSetting({
          success: res=>{
            //该权限是获取用户信息的权限
            if(res.authSetting['scope.userInfo']){
              wx.getUserInfo({
                success: res=>{
                  //可以将res发送给后台接续出unionId
                  this.globalData.userInfo = res.userInfo
                  console.log(res.userInfo)
                  //由于getUserInfo是网络请求,有时候会在页面绘制onLoad之后才会返回,所以这里需要写一个回调函数来防止在onLoad之后无法获取到用户信息的情况
                  if(this.userInfoReadyCallback){
                    this.userInfoReadyCallback(res)
                  }
                }
              })
            }
          },
      withSubscriptions: true,
    })
    

    然后我们看控制台就可以看到获取到的用户信息了。
    在这里插入图片描述
    以上这些函数在小程序的官方API中都可以看到,在开放接口里面。

    storage本地缓存

    同样来到小程序官方API定位到数据缓存,可以看到设置缓存居然有两个方法,这两个方法的区别在哪里呢?区别在于后面多了一个Sync,wx.setStorage这个函数设置缓存数据是异步操作,而wx.setStorageSync设置缓存数据则是同步操作;这里建议大家使用同步缓存的API。
    在这里插入图片描述
    缓存的操作也很简单,通过设置key : value的形式进行保存,key是保存的标识,在获取缓存的数据的时候也通过该标识去获取,data是缓存的数据,通过key去获取则返回data。

    wx.setStorage({
      key:"key",
      data:"value"
    })
    

    在获取数据的时候这里建议使用一个try catch的形式包裹起来,防止发生意外。

    try {
      wx.setStorageSync('key', 'value')
    } catch (e) { }
    

    通过这两个函数就可以对数据进行本地缓存了。

    展开全文
  • 上一章绘制了首页的电影分区,这一章会实现查看更多界面和电影详情界面。这里绘制的时候就不过多的介绍css样式了样式...到这里一个简单的微信小程序就能全部实现了。 小程序CSDN源码下载地址 小程序源码码云下载地址
  • 小程序Request请求 我们在开发一个小程序的时候肯定不能一直使用本地数据,所以就需要涉及到获取网络数据进行展示。在使用request请求的时候我们要先看一下小程序官网网络API,看到wx.requset方法,可以看到官网...
  • 1-1 微信小程序商业级实战-课程导学。 (13:23) 1-2 2019年更新(P1)内容概要(重要) (10:09) 1-3 优先自己开发 (02:13) 1-4 临时补充:关于appkey的申请(重要) (00:46) 1-5 appkey的申请 (05:06) 1-6 课程维护说明...
  • ——/2020-Python+微信小程序开发实战/ ├──微信小程序课件 | └──微信小程序课件.rar 28.04M ├──001 day1-01 小程序介绍.mp4 15.34M ├──002 day1-02 小程序环境搭建.mp4 88.74M ├──003 day1-03 全局...
  • 步骤一:小程序 生命周期//app.jsApp({onLaunch: function () {//当小程序初始化完成时,会触发onLaunch(全局只触发一次)},onShow: function () {//当小程序启动,或从后台进入前台显示,会触发onShow},onHide: ...
  • 音乐微信小程序,提供源码
  • 作者:BingeZhacsdn.net/zwb19940216/article/details/810231911. 前言现在微信小程序越来越火了,相信不少人都通过各种途径学习过微信小...
  • 微信小程序项目前后端分离

    千次阅读 2021-12-14 15:58:22
    树洞微信小程序 #### 软件架构 软件架构说明 #### 安装教程 1. egg_tree为项目后端,需要有Node环境,npm, 进入文件夹中,安装依赖npm install egg_tree文件夹放到编辑器中,进去egg_tree 文件夹运行npm run ...
  • 小程序上线后,改版了很多次,包括一些 Api 接口也有改动。如果你学习一个很久之前的小程序项目是没有意义的,本文推荐的小程序都是最近有更新的。相信在你学习、部署的过程中,不会遇到很多问题。...
  • 李艺《微信小程序全栈开发实战》(第一章)双线程运行机制小程序的特点及开发能力小程序的特点小程序的开发能力开发小程序的一般流程小程序的运行机制小程序双线程视图的持续更新是如何实现的使用setData可能会遇到...
  • 实现项目所需图片 loginLog.jpg name.png key.png login.wxml <view class="container"> <view class="login-icon"> <image class="login-img" src="../images/loginLog.jpg"></image&...
  • 1.微信小程序样式总结 1.1 图片的格式设置 border: 1px solid red; 边框为1px 并且是实线 红色的 justify-conent: space-between; 将元素分布在左右两边,两端对齐 display: flex: 将容器中的元素显示在一行 ...
  • 上提加载和下拉刷新) 18_从零构建微信小程序项目_数据交互_文章详情页(涵盖:多页面传参和富文本解析) b站直通车: 2021年最新微信小程序项目实战教程,从入门到精通,零基础入门小程序开发【配置素材+源码+笔记...
  • 第二步在我们的vscode/微信开发者工具中创建定义并引用我们的自定义组件: 编写我们自定义组件中的代码在我们的自定义组件中添加我们的搜索框组件: <!-- 在我们的这个位置的话就是设置我们的自定义组件 -->...
  • 在地址列表中进行地址选择,且只能选中其中一个地址 wxml代码如下: <radio-group bindchange="radioChange"> <label class="list" wx:for="{{array}}" wx:key="id"> ...view class="weui-cell__bd">...
  • ①alt+鼠标滚轮 ②ctrl+shift+→ ③ctrl+c ③shift+end ④backspace ③ctrl+v
  • 小程序上线后,改版了很多次,包括一些 Api 接口也有改动。如果你学习一个很久之前的小程序项目是没有意义的,本文推荐的小程序都是最近有更新的。相信在你学习、部署的过程中,不会遇到很多问题。...
  • 使用typescript+less/sass创建微信小程序项目背景创建 背景 新版本的原生微信小程序已经支持通过官方提供的模板,创建typescript+less或者typescript+sass版本的微信小程序 创建 在新建项目的时候,语言选择...
  • 基于云开发的微信小程序实战教程(二) 最近刚开发了款小程序,在开发过程中发现,基于云开发的教程资源不是很多,而且很不详细。所以边实战边总结了下云开发的简单教程,希望对你有所帮助。 具体的代码在这里,...
  • 第一步的话就是编写我们的wxml的代码: <view class="cates"> <!-- 这个的话是我们引入了我们的自定义组件 --> <SearchInput>...-- 在我们的这个位置的话就是设置我们的分类页面的内容部分 -->...
  • 它是一个可用于几乎任何项目的流行工具! Node.js 在浏览器外运行 V8 JavaScript 引擎(Google Chrome 的内核)。 这使 Node.js 表现得非常出色。 Node.js 应用程序运行于单个进程中,无需为每个请求创建新的线程...
  • 微信小程序-项目介绍.mp4 3.微信小程序-数据绑定.mp4 4.微信小程序-电影(导航模块).mp4 5.微信小程序-学做菜(template 、数据渲染).mp4 6.微信小程序-学做菜(template 、数据渲染).mp4 7.微信小程序-容器、基本、...
  • 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。全球最火爆的闭环生态。 全面开放申请后,主体类型...
  • 1、定义模块与设置头部 首先先在app.json文件中定义首页、分类、购物车以及我的四个模块。 背景颜色为白色,名称是秋码淘好货 "pages":[ "pages/index/index", "pages/category/category", "pages/cart/cart", ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 40,231
精华内容 16,092
关键字:

微信小程序项目实战

微信小程序 订阅