精华内容
下载资源
问答
  • uni-app开发微信小程序的简要流程

    万次阅读 多人点赞 2019-06-03 15:22:59
    uni-app开发微信小程序 1. 开发工具调试 然后打开微信开发工具—>设置—>安全—>开启服务端口(微信开发者工具最新版) 进入XHbuilder,点击工具—>设置,找到微信开发者工具安装目录,设置启动地址, ...

    uni-app开发微信小程序

    开发uni-app的技术条件就是微信小程序及Vue,不熟悉vue的同学要先学习了解一下。不熟悉小程序可以直接看uni文档。https://uniapp.dcloud.io/frame
    其他博客:
    vue+element:https://blog.csdn.net/weixin_42618191/article/details/100586437
    vue-element-admin:https://blog.csdn.net/weixin_42618191/article/details/102610157
    vue常见/高级功能:https://blog.csdn.net/weixin_42618191/article/details/107487526
    1. 开发工具调试

    打开微信开发工具-–>设置—>安全—>开启服务端口(微信开发者工具最新版)
    进入XHbuilder,点击工具—>设置,找到微信开发者工具安装目录,设置启动地址(安装插件:工具—>插件安装)
    (如果是开发支付宝小程序就需要自己打开生成的代码包,运行到支付宝开发者工具的时候编译平台会提示在哪个路径)
    以上设置完成后就可在代码开发后点击运行,就能自主选择运行到哪端进行查看调试了。在编辑器中进行修改后不用重新运行,小程序开发者工具会自动更新,如果没有变化,点击重新运行即可:
    在这里插入图片描述
    详细流程介绍:https://uniapp.dcloud.io/quickstart

    2. 开发项目配置

    项目目录的manifest.json ,配置小程序AppID等。
    项目目录的pages.json,配置页面路由(pages数组),配置应用的状态栏、导航条、标题、窗口背景色(globalStyle对象), 配置 tabBar 内容。这个开发过小程序的朋友来说是差不多的。不过uni-app的每个页面是没有自己对应json文件的,都在公共的page.json中设置。列如开启下拉刷新
    在这里插入图片描述
    官方文档有详细介绍:https://uniapp.dcloud.io/collocation/pages

    3.公共文件

    在components中建立公共的文件
    common.js的代码地址:https://github.com/lady-mei/uni-app-common.js
    components
    main.js中引入公共文件或方法
    在这里插入图片描述
    4. 微信登录及获取用户信息

    在公共的js文件中定义登录的方法在这里插入图片描述
    获取用户信息进行解密的方法
    在这里插入图片描述
    在这里插入图片描述
    其他方法后续添加。。。。。。
    以上为个人开发项目的经验,有不对的或者更优方法的十分希望可以指点一二。谢谢!

    展开全文
  • uni-app开发微信小程序.zip
  • 主要介绍了使用uni-app开发微信小程序的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • uni-app开发微信小程序 1. 配置开发环境 uni-app基于Hbuilder、微信开发者工具开发 下载链接: https://www.dcloud.io/ https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 全部安装好后,...
  • 主要介绍了详解使用uni-app开发微信小程序之登录模块,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 使用uni-app开发微信小程序uni-app是使用vue开发的框架,能通过框架编译到微信开发者工具的代码 新建项目 下载app开发版的HBuilder(含插件多点) - 新建uni-app项目 - 选择默认模版 运行小程序 运行小程序 - ...

    概念

    使用uni-app开发微信小程序,uni-app是使用vue开发的框架,能通过框架编译到微信开发者工具的代码

    新建项目

    下载app开发版的HBuilder(含插件多点) - 新建uni-app项目 - 选择默认模版

    运行小程序

    运行小程序 - 点击运行 - 点击运行到微信小程序 - 会进行编译并且打开一个开发者工具

    基本知识

    在pages目录下创建页面,创建完页面需要在page.json上添加页面的路径path

    pages.json使用(配置页面路径,顶部导航栏,底部导航栏-图标配置)

    {
      "pages": [
        {
          "path": 'pages/index/index', //页面路径
          "style": {
            navigationBarTitleText: '页面导航栏标题'
          }
        }
      ],
      "globalStyle": {
         "navigationBarTextStyle" : 'black',       //导航栏文字颜色
         "navigationBarTitleText": '全局导航栏标题'  //导航栏标题
         "navigationBarBackgroundColor":'#FFF',    //导航栏背景颜色
         "backgroundColor":'#F8F8F8'               //窗口的背景色跟上面保持一致即可
      },
      "tabBar": {
        "color": '#999794',                       //底部导航栏文字颜色
        "selected": '#33312e',					  //底部导航栏选中文字颜色
        "borderStyle": 'white',					  //底部导航栏边框颜色
        "backgroundColor": '#fafafa',			  //底部导航栏背景颜色
        "list": [
          {
            "pagePath": "page/index/index",		  //首页页面路径
            "iconPath": "static/tab/hone.png",	  //首页未选中图标
            "selectedIconPath": "static/tab/hone_selected.png", //首页选中图标
            "text": '首页'						  //首页图标文字
          }
        ]
      }
    }

    写页面的技巧:组件拆分

    在index目录下新建一个index.vue和一个components目录放首页所有组件

    然后在index.vue下引入所有的组件(引入后需要组册下才能显示 - vue的知识)

    <template>
    	<view>
    		<Search></Search>                            //组件显示
            <Title></Title>
            <Takeout></Takeout>
    	</view>
    </template>
    
    <script>
    	import Search from './components/search.vue' //引入组件
        import Title from './components/title.vue'
        import Takeout from './components/takeout.vue'
        export default {
            component:{ 
              Search,                                //注册组件
              Title,
              Takeout
            } 							
        }
    </script>

     

    展开全文
  • 基于UNI-APP开发微信小程序的基本流程 1/申请微信小程序账号 申请微信小程序的两种途径: 通过公司微信服务号进行申请(推荐)。 通过公司微信服务号申请微信小程序可免认证,节省费用300元,同时审核周期更短。 ...

    基于UNI-APP开发微信小程序的基本流程

    1/申请微信小程序账号

    申请微信小程序的两种途径:

    1. 通过公司微信服务号进行申请(推荐)。
      通过公司微信服务号申请微信小程序可免认证,节省费用300元,同时审核周期更短。
      申请地址:进入公司微信服务号(登录时需要管理员认证)点击小程序管理快速注册 并认证小程序根据提示进行后续操作(需要提供未绑定任何微信服务端的邮箱)
      微信公众平台登录地址:微信公众平台入口

    2. 通过个人邮箱申请(不推荐)。
      通过个人邮箱(需提供未绑定任何微信服务的邮箱)申请微信小程序。根据注册提示完成信息录入。通过此种方法注册的微信小程序无法调用微信的高级接口,如微信支付,视频直播等。需要条用此类接口需要进行小程序认证。需提供企业营业执照,对公账号等信息,认证费用300元或企业小额打款验证。
      独立小程序注册地址:小程序申请地址

    2/微信小程序开发前准备

    获取小程序APPID,APPSERECT

    小程序注册成功,通过微信公众平台登录地址:微信小程序入口
    进入小程序。在</>开发开发者设置里获取到APPID(小程序ID)以及AppSecret AppID和AppSecret非常重要是后续开发的重要凭证。

    配置域名白名单

    在开发者设置里完成服务器域名配置(域名白名单)不在域名白名单里的URL资源正式上线后将无法访问。开发时若没有,此配置可展缓设置。
    注意:域名必须是HTTPS协议,服务器TLS1.2及以上

    基本信息设置

    在设置里完成小程序的通用配置,入名称,行业,头像等,按要求配置即可。

    开发人员,体验人员配置

    在管理成员管理下添加开发人员(主要是协同开发,以及让相关用户可以使用体验版本),权限什么的按要求配置即可。

    注意:添加开发者和体验人员需要通过微信号搜索,如果微信号正确,但是搜索不到,则可能是对方关闭了微信的通过微信号添加好友功能。解决办法:联系对方在微信手机端操作:点击我设置隐私添加我的方式开启允许通过微信号添加。设置完成后再次通过微信号搜索添加开发人员或体验人员。

    3/微信小程序开发工具

    1. HBUIDER-X (编辑器)下载地址:下载
    2. 微信开发者工具(预览、代码调试)下载地址:下载
    3. 开发工具配置
      将微信开发者工具和HBuiderX绑定,将浏览器与HBuiderX绑定。HBuiderX点击工具设置运行配置对应位置输入浏览器安装路径微信开发者工具安装路径。
      配置

    4/微信小程序开发步骤

    1. 新建uni-app项目:HBuiderX 文件新建项目UNI-App项目
    2. 参考uni-app官方文档及相关实例进行程序功能开发
      Uni-app官方文档:uni-app官网
    3. 程序在微信开发者工具运行测试:HBuiderX点击运行运行到小程序模拟器微信开发者工具
      注意:若是程序运行失败,请调试程序,若是无法打开开发者工具请检查是否将微信开发者工具和HBuiderX绑定。此外需要在初次启动微信开发者工具时在设置代理设置里将代理设置为使用系统代理、安全里开启服务端口。配置完成后关闭微信开发者工具,重启HBuiderX再次运行步骤3.
      在这里插入图片描述
    4. 微信小程序调试说明:
      【情形一】如果调试期间后台服务器不是https协议,或者服务器域名不在微信小程序后台域名白名单内,可在微信开发者工具里点击详情本地设置勾选不校验合法域名、web-view(业务域名)、TLS版本以及https证书
      在这里插入图片描述
      【情形二】无法启用预览和真机调试:请在详情基本信息中填入小程序的APPid
      注意:预览和真机测试人员必须在微信小程序的开发者列表内,详情见上文描述。

    5/微信小程序版本发布

    小程序业务功能开发完毕后可提交发布,发布前需要做如下准备:

    1. 配置域名白名单,参见配置域名白名单
    2. 在HBUIDERX里面完成APPID和APPSERECT绑定(这样在预览或真机调试时无须每次都输入APPID)在HBUIDERX里点击发行小程序(微信)填写小程序名字和小程序APPID,小程序APPID获取参见获取小程序APPId、APPSerect
    3. 将程序运行在微信开发者工具,调试无误后(确保实在未勾选不校验合法域名、WEB-VIEW(业务域名)、TLS版本及HTTPS证书的前提下程序运行正常,参见小程序调试说明)点击上传。
      程序上传完毕后,使用注册微信小程序的邮箱登录到微信小程序管理后台,点击管理版本管理查看刚才上传的版本,可将上传的版本设置为体验版(仅开发人员和体验人员可用,相关人员配置见开发人员,体验人员配置)
      微信小程序入口:小程序登录入口
    4. 发布正式版,选择要发布的版本提交审核,初次提交按照要求填写表单,完成提交。提交后等待微信官方审核。初次提交审核,审核时间较久(3—7个工作日),以后版本更新提交审核则审核相对较快。审核成功后需要进入当前界面手动发布。发布之后社会用户就能在微信上搜索到相关小程序了。

    6/学习参考文档

    微信小程序开发文档

    【参考】主要学习其 API,开发技巧及语法参看uni-app
    地址:微信小程序开发文档

    UNI-APP开发文档

    【重要】主要学习其基础组件的使用,语法,Api及开发规范
    地址:UNI_APP开发文档

    Vue开发文档

    【重要】uni-app基于vue的语法和规范,主要学习vue的指令,组件开发, 组件间通信,动态样式绑定等
    地址:Vue.js

    扩展

    【微信云开发】地址:微信云开发文档
    【vuex】地址:vuex

    展开全文
  • 微信小程序uni-app开发微信小程序、taro开发微信小程序基础知识 一、基本目录介绍 1.微信小程序 app.js ------ 小程序逻辑 app.json — 小程序公共配置(配页面路由、导航条、选项卡等页面类信息) app.wxss ---- ...

    微信小程序、uni-app开发微信小程序、taro开发微信小程序基础知识


    一、基本目录介绍

    1.微信小程序

    app.js ------ 小程序逻辑
    app.json — 小程序公共配置(配页面路由、导航条、选项卡等页面类信息)
    app.wxss ---- 小程序公共样式表
    components — 组件目录
    pages ------- 业务页面文件存放的目录
    resources ---- 存放应用引用静态资源(如图片、视频等)的目录
    utils ---------- 接口文件

    2.uni-app开发小程序

    pages.json ------- 公共配置(配页面路由、导航条、选项卡等页面类信息)
    App.vue ---------- 应用配置,用来配置App全局样式以及监听
    main.js ------------ Vue初始化入口文件
    components — 组件目录
    pages ------- 业务页面文件存放的目录
    static -------- 存放应用引用静态资源(如图片、视频等)的目录
    utils ---------- 接口文件

    3.taro开发小程序

    dist --------- 编译结果目录
    config ------ 配置目录
    src ------ 源码目录(包含:
    –|--------- pages ----- 页面文件目录
    –|--------- app.scss — 项目总通用样式
    –|--------- app.jsx ------ 项目入口文件
    –|--------- resources – 存放应用引用静态资源(如图片、视频等)的目录
    –|--------- utils ---------- 接口文件
    –|--------- components — 组件目录

    二、全局配置

    1. 微信小程序

    在app.json文件内配置:
    pages: 页面文件路径
    window: 设置小程序的状态栏、导航条、标题、窗口背景色
    tabBar: 客户端窗口的底部或顶部有 tab 栏可以切换页面
    networkTimeout: 各类网络请求的超时时间,单位均为毫秒
    debug: 者工具中开启 debug 模式

    {
      "pages": [
        "pages/index/index",
        "pages/logs/index"
      ],
      "window": {
      	"navigationBarTitleText": "Demo"
      },
      "tabBar": {
        "list": [{
          "pagePath": "pages/index/index",
          "text": "首页"
        }, {
          "pagePath": "pages/logs/index",
          "text": "日志"
        }]
      },
      "networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
      },
      "debug": true,
      "navigateToMiniProgramAppIdList": [
        "wxe5f52902cf4de896"
      ]
    }
    

    【注意】:页面的导航栏标题文字内容修改,需要到页面json文件内修改。

    详细流程介绍:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

    2. uni-app开发小程序

    pages.json文件内配置:
    pages: 页面文件路径
    globalStyle: 设置小程序的状态栏、导航条、标题、窗口背景色
    tabBar: 客户端窗口的底部或顶部有 tab 栏可以切换页面

    {
        "pages": [{
            "path": "pages/component/index",
            "style": {
                "navigationBarTitleText": "组件"
            }
        }],
        "condition": { //模式配置,仅开发期间生效
            "current": 0, //当前激活的模式(list 的索引项)
            "list": [{
                "name": "test", //模式名称
                "path": "pages/component/view/index" //启动页面,必选
            }]
        },
        "globalStyle": {
            "navigationBarTextStyle": "black",
            "navigationBarTitleText": "演示",
            "navigationBarBackgroundColor": "#F8F8F8",
            "backgroundColor": "#F8F8F8",
            "usingComponents":{
                "collapse-tree-item":"/components/collapse-tree-item"
            },
        "pageOrientation": "portrait"//横屏配置,全局屏幕旋转设置(仅 APP/微信/QQ小程序),支持 auto / portrait / landscape
        },
        "tabBar": {
            "color": "#7A7E83",
            "selectedColor": "#3cc51f",
            "borderStyle": "black",
            "backgroundColor": "#ffffff",
            "height": "50px",
            "fontSize": "10px",
            "iconWidth": "24px",
            "spacing": "3px",
            "list": [{
                "pagePath": "pages/component/index",
                "iconPath": "static/image/icon_component.png",
                "selectedIconPath": "static/image/icon_component_HL.png",
                "text": "组件"
            }, {
                "pagePath": "pages/API/index",
                "iconPath": "static/image/icon_API.png",
                "selectedIconPath": "static/image/icon_API_HL.png",
                "text": "接口"
            }],
            "midButton": {
                "width": "80px",
                "height": "50px",
                "text": "文字",
                "iconPath": "static/image/midButton_iconPath.png",
                "iconWidth": "24px",
                "backgroundImage": "static/image/midButton_backgroundImage.png"
            }
        },
      "easycom": {
        "autoscan": true, //是否自动扫描组件
        "custom": {//自定义扫描规则
            "uni-(.*)": "@/components/uni-$1.vue"
        }
      }
    }
    

    在uni-app里页面文件路径不是在pages里直接写,是在pages下面path属性里面写,页面导航栏标题在pages下面style属性里修改

    详细流程介绍:https://uniapp.dcloud.io/collocation/pages?id=pages

    3. taro开发小程序

    src目录下app.jsx文件内配置:

    pages: 页面文件路径
    window: 设置小程序的状态栏、导航条、标题、窗口背景色
    tabBar: 客户端窗口的底部或顶部有 tab 栏可以切换页面

    import Taro, { Component } from '@tarojs/taro'
    import Index from './pages/index'
    import './app.scss'
    
    // 如果需要在 h5 环境中开启 React Devtools
    // 取消以下注释:
    // if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5')  {
    //   require('nerv-devtools')
    // }
    
    class App extends Component {
    
      componentDidMount () {}
    
      componentDidShow () {}
    
      componentDidHide () {}
    
      componentDidCatchError () {}
    
      config = {
        pages: [
          'pages/index/index',
          'pages/logs/index'
        ],
        window: {
      	  navigationBarTitleText: 'Demo'
        },
        tabBar: {
          selectedColor: '#e1251b',
          list: [
            {
                pagePath: 'pages/component/index',
                iconPath: 'static/image/icon_component.png',
                selectedIconPath: 'static/image/icon_component_HL.png',
                text: '组件"
            }, 
            {
                pagePath: 'pages/API/index',
                iconPath: 'static/image/icon_API.png',
                selectedIconPath: 'static/image/icon_API_HL.png',
                text: '接口'
            }]
        }
      }
    
      // 在 App 类中的 render() 函数没有实际作用
      // 请勿修改此函数
      render () {
        return (
          <Index />
        )
      }
    }
    Taro.render(<App />, document.getElementById('app'))
    

    taro开发小程序基本语法跟react相同,引入组件首字母需要大写,不然会被当做html标签,key值一律不加引号,value只加单引号,图片使用相对路径。
    全局配置API跟微信小程序一样
    详细流程介绍: https://taro-docs.jd.com/taro/docs/tutorial.html

    三、生命周期

    1. 微信小程序
    • 生命周期(全局)
      app.js文件内
    App({
      onLaunch (options) { 
        console.log('小程序初始化')
      },
      onShow(options) {
        console.log('监听小程序启动或切前台')
      },
      onHide() {
        console.log('监听小程序切后台')
      },
      onError(msg) {
        console.log('错误监听函数')
      },
      onPageNotFound(res) {
        console.log('小程序要打开的页面不存在时触发');
        wx.redirectTo({ // 重定向
          url: 'pages/...'
        }) // 如果是 tabbar 页面,请使用 wx.switchTab
      },
      globalData: { //全局变量
        userInfo: null,
      },
      f1() {
      	console.log('自定义函数')
      }
    })
    

    onLaunch一般用于请求数据,onShow是当前页面显示时执行(可以多次执行),onHide当前页面隐藏时执行(可以多次执行),onError出现错误时执行

    • 页面生命周期:
      页面js文件内
    Page({
    
     /**
      * 页面的初始数据
      */
     data: {
     },
     
     /*页面生命周期*/
      onReady: function () {
        console.log('监听页面初次渲染完成')
      },
      onShow: function () {
        console.log('监听页面显示')
      },
      onHide: function () {
        console.log('监听页面隐藏')
      },
      onUnload: function () {
        console.log('监听页面卸载')
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
      }
    })
    

    onLaunch一般用于请求数据,onShow是当前页面显示时执行(可以多次执行),onHide当前页面隐藏时执行(可以多次执行),onUnload完全退出当前页面时执行

    • 组件生命周期:
    Component({
      /**
       * 组件的属性列表
       */
      properties: {
      },
    
      /**
       * 组件的初始数据
       */
      data: {
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
      },
      
      /*组件生命周期*/ 
      lifetimes: {
        created() {
          console.log("在组件实例刚刚被创建时执行")
        },
        attached() { 
          console.log("在组件实例进入页面节点树时执行")
        },
        ready() {
          console.log("在组件在视图层布局完成后执行")
        },
        moved() {
          console.log("在组件实例被移动到节点树另一个位置时执行")
        },
        detached() {
          console.log("在组件实例被从页面节点树移除时执行")
        },
        error() {
          console.log("每当组件方法抛出错误时执行")
        },
        
        /*组件所在页面的生命周期 */
        pageLifetimes: {
          show: function () {
            console.log("页面被展示")
          },
          hide: function () {
            console.log("页面被隐藏")
          },
          resize: function (size) {
            console.log("页面尺寸变化")
          }
        }
      }
    })
    

    properties父子传递时候,子组件接收数据;methods子组件自定义函数

    2. uni-app
    • 生命周期(全局)
      App.vue文件内
    <script>
        // 只能在App.vue里监听应用的生命周期
        export default {
            onLaunch: function() {
                console.log('App Launch')
            },
            onShow: function() {
                console.log('App Show')
            },
            onHide: function() {
                console.log('App Hide')
            }
        }
    </script>
    
    • 页面生命周期
    函数名说明平台差异说明最低版本
    onLoad监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参),参考示例
    onShow监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
    onReady监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发
    onHide监听页面隐藏
    onUnload监听页面卸载
    onResize监听窗口尺寸变化App、微信小程序
    onPullDownRefresh监听用户下拉动作,一般用于下拉刷新,参考示例
    onReachBottom页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项
    onTabItemTap点击 tab 时触发,参数为Object,具体见下方注意事项微信小程序、支付宝小程序、百度小程序、H5、App(自定义组件模式)
    onShareAppMessage用户点击右上角分享微信小程序、百度小程序、头条小程序、支付宝小程序
    onPageScroll监听页面滚动,参数为Objectnvue暂不支持
    onNavigationBarButtonTap监听原生标题栏按钮点击事件,参数为ObjectApp、H5
    onBackPress监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:onBackPress 详解app、H5、支付宝小程序
    onNavigationBarSearchInputChanged监听原生标题栏搜索输入框输入内容变化事件App、H51.6.0
    onNavigationBarSearchInputConfirmed监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。App、H51.6.0
    onNavigationBarSearchInputClicked监听原生标题栏搜索输入框点击事件App、H51.6.0

    详细流程介绍: https://uniapp.dcloud.io/collocation/frame/lifecycle

    • 组件生命周期
    函数名说明平台差异说明最低版本
    beforeCreate在实例初始化之后被调用。详见
    created在实例创建完成后被立即调用。详见
    beforeMount在挂载开始之前被调用。详见
    mounted挂载到实例上去之后调用。详见 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
    beforeUpdate数据更新时调用,发生在虚拟 DOM 打补丁之前。详见仅H5平台支持
    updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。详见仅H5平台支持
    beforeDestroy实例销毁之前调用。在这一步,实例仍然完全可用。详见
    destroyedVue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。详见

    详细流程介绍: https://uniapp.dcloud.io/collocation/frame/lifecycle

    3. taro开发
    • 生命周期(全局)
      App.jsx
    // app.jsx
    // onLaunch 在微信/百度/字节跳动/支付宝小程序中这一生命周期方法对应 app 的 onLaunch
    componentWillMount() {}
    
    // onLaunch 在微信/百度/字节跳动/支付宝小程序中这一生命周期方法对应 app 的 onLaunch,在 componentWillMount 后执行
    componentDidMount () {}
    
    // 在微信小程序中这一生命周期方法对应 onShow
    componentDidShow () {}
    
    // 在微信小程序中这一生命周期方法对应 onHide
    componentDidHide () {}
    
    // 错误监听函数,在微信小程序中这一生命周期方法对应 onError
    componentDidCatchError () {}
    
    // 页面不存在监听函数,在微信小程序中这一生命周期方法对应 onPageNotFound
    componentDidNotFound () {}
    
    • 页面生命周期
    //创建对象初始化state.this的指向
    constructor () { }
    
    //页面即将加载----react一致
    componentWillMount () { }
    
    //页面加载完毕----react一致
    componentDidMount () { }
    
    //在微信小程序中这一生命周期方法对应 onShow
    componentDidShow () { }
    
    //在微信小程序中这一生命周期方法对应 onHide
    componentDidHide () { }
    
    //页面是否需要更新----react 一致
    shouldComponentUpdate () { }
    
    //页面即将更新----react一致
    componentWillUpdate () { }
    
    //页面更新完毕----react一致 
    componentDidUpdate () { }
    
    //页面卸载时触发,在微信小程序中这一生命周期方法对应 onUnload
    componentWillUnmount () { }
    
    //页面相关事件处理函数–监听用户下拉动作
    onPullDownRefresh () { }
    
    //页面上拉触底事件的处理函数
    onReachBottom () { } 
    
    //用户点击右上角转发
    onShareAppMessage () { }
    
    //页面滚动触发事件的处理函数
    onPageScroll () { } 
    
    //当前是 tab 页时,点击 tab 时触发
    onTabItemTap () { }
    
    //预加载,只在微信小程序中可用
    componentWillPreload () { }
    
    • 组件生命周期
    // 创建对象初始化state
    constructor(): 
    
    // 在渲染前调用,在客户端也在服务端
    componentWillMount() { }
    
    // 在第一次渲染后调用
    componentDidMount() { }
    
    // 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用
    componentWillReceiveProps(newProps) { }
    
    // 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 
    shouldComponentUpdate(newProps, newState) { }
    
    // 组件将要被更新,在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
    componentWillUpdate(nextProps, nextState) { }
    
    // 组件更新完毕,在组件完成更新后立即调用。在初始化时不会被调用。
    componentDidUpdate(prevProps, prevState) { }
    
    // 组件将要被卸载,在组件从 DOM 中移除之前立刻被调用。
    componentWillUnmount() { }
    
    render () { }
    

    详细流程介绍: https://zh-hans.reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class

    四、声明式导航跳转

    跳转

    // 微信小程序
    <navigator url="{{'/pages/detail/detail?proid=' + item.proid}}" >
    	<view class="" >
    		声明式导航跳转
    	</view>
    </navigator>
    
    //uni-app
    <navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
    	<button type="default">跳转到新页面</button>
    </navigator>
    
    //taro
    <View className="prolist">
    	<Navigator url={ '/pages/detail/index?value='+1 }>
    		声明式导航跳转
    	</Navigator>
    </View>
    

    获取数据:

    //微信小程序
    Page({
      onLoad: function(options) {
        this.setData({
          title: options.title
        })
      }
    })
    
    //uni-app
    onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
            console.log(option.id); //打印出上个页面传递的参数。
            console.log(option.name); //打印出上个页面传递的参数。
    }
    
    //taro
    const { proid } = this.$router.params
    

    微信小程序详细流程介绍: https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
    uni-app详细流程介绍: https://uniapp.dcloud.io/component/navigator
    taro详细流程介绍: https://taro-docs.jd.com/taro/docs/components/navig/navigator.html

    五、编程式导航渲染

    1. 微信小程序

    跳转:

    // 微信小程序
    wx.navigateTo({
    	url: 'test?id=1'
    })
    // uni-app
    uni.navigateTo({
        url: 'test?id=1&name=uniapp'
    });
    // taro
    Taro.navigateTo({
    	url: '/pages/detail/index?proid=' + item.proid
    })
    

    获取数据:

    // 微信小程序
    Page({
      onLoad: function(option){
        console.log(option.query)
      }
    })
    // uni-app
     onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    }
    
    // taro
    const { proid } = this.$router.params
    

    微信小程序详细流程介绍: https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html
    uni-app详细流程介绍: https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html
    uni-app详细流程介绍: https://taro-docs.jd.com/taro/docs/apis/interface/navigation/navigateTo.html#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81l

    六、父子传递参数

    1. 微信小程序
    2. uni-app

    – props

    // 父:
    <template>
        <view>
            <child :showModal="showModal"></child>
        </view>
    </template>
    <script>
        import child from "../../components/child.vue"
        export default {
            components: {
                child
            },
            data() {
                return {
                    showModal: " parent say"
                };
            },
          
        }
    </script>
    
    
    // 子:
    <template>
         <view class="child"> hi {{showModal}}</view> 
    </template>
    <script>
     export default {
          props: {
              showModal: {
                  type: String,
                  default: 'hello'
              }
          },
    </script>
    

    $emit(父子传递函数)

    // 父:
    <template>
    	<view>
    		<v-sub @returnDate=returnDate :backGround=backGround></v-sub>
    	</view>
    </template>
    <script>
    	import vSub from "../../../components/v-sub.vue"
    	export default {
    		components:{
    			vSub
    		},
    		data() {
    			return {
    				backGround:"#000"
    			}
    		},
    		methods: {
    			returnDate(e){
    				console.log("接收到的值==>>"+e)
    			}
    		}
    	}
    </script>
    
    // 子:
    <template>
    	<view class="content">
    		<button @tap="passValue">点击传值</button>
    	</view>
    </template>
     
    <script>
    	export default {
    		props:{ },
    		methods:{
    			passValue(){
    				this.$emit("returnDate","yoyoyo")
    			}
    		}
    	}
    </script>
    
    
    
    

    直接定义新的数据名

    // 父:
    <view>
    	<v-sub :backGround=backGround></v-sub>
    </view>
    
    // 子:
    props:{
    	backGround:{
    		type:String,
    		default:"#fff"
    	}
    }
    
    3. taro

    父:

     <Prolist prolist={ this.state.prolist }/>
    

    子:

    Index.propTypes = {
      prolist: PropTypes.array
    }
    

    七、语法

    1. 微信小程序
                 {{ 参数名 }} ---- 数据绑定
         wx:for="{{ 数据名 }}" --- 列表渲染
                 wx:for-item ----- 可以指定数组当前元素的变量名,
                wx:for-index ----- 可以指定数组当前下标的变量名:
           wx:key="{{ 值 }}" ----- 列表中项目的唯一的标识符
       wx:if="{{condition}}" ----- 条件渲染
           bindtap="tapName" ----- 点击事件
    
    2. uni-app
                 {{ 参数名 }} ---- 数据绑定
                 	  v-if="" ---- 条件渲染
                 v-bind:class -----属性绑定
    v-for="(item, index) in items" ---- 列表渲染	
    v-on:click="counter "/@click ----- 点击事件
    
    2. taro

    在taro中语法跟react一样,事件要大小写class要写成className,使用组件开头字母要大写

       <p>{str}</p>
       <div className={`box ${act}`}></div>
       <div className="box" style={{
    	   'background':'red',
    	   'transform':'rotate(45deg)'
       }}></div>
    
    展开全文
  • 假如使用uni-app开发微信小程序需要用到官方插件----OCR插件, 插件地址如下:OCR插件 申请方式见插件地址介绍。本文主要记录调用方式 1.在manifest.json的“mp-weixin”里添加 "plugins": { "ocr-plugin": { ...
  • uni-app开发微信小程序

    2020-02-10 23:04:06
    添加分享功能 ...onShareAppMessage ...如果不需要自定义按钮,只需添加onShareAppMessage方法,点击小程序右上角的更多,再选择转发功能 获取页面参数 https://www.jianshu.com/p/a514fb66619c
  • uni-app开发微信小程序-安装、创建项目 1.下载安装: 开始之前,需要先下载如下开发工具: HBuilderX:https://www.dcloud.io/hbuilderx.html 微信开发者工具:...
  • uni-app开发微信小程序使用vuex保存用户状态详细操作 uniapp项目根目录下创建store文件夹并新建index.js文件 安装vuex并引入到该js文件 npm install vuex --save // index.js import Vue from 'vue' import Vuex...
  • 最近在用uni-app开发微信小程序,这里将开发中遇到的坑和问题记录一下,后续发现新问题也会持续更新。 1、关于new Date() 当使用new Date()转化 时间字符串时,在微信开发工具、安卓和ios真机上的表现略有不同 let ...
  • 使用uni-app开发微信小程序之登录模块 从微信小程序官方发布的公告中我们可获知:小程序体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败,需使用 <button open-type=...
  • uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponents wxcomponents下新建vant目录 创建完成后的目录结构 ...
  • vue uni-app 开发 微信小程序易犯错误集锦--子组件在父组件内不显示,props不起作用,从其他页面复制组件到新页面后,组件不显示
  • uni-app开发微信小程序时,调用data里的数据报错:Cannot set property ‘xxx’ of undefined 记录一下 解决方法: 将this定义在外部: 在created钩子函数里赋值 之后使用_self代替this
  • 使用uni-app开发微信小程序流程

    千次阅读 2020-07-01 17:13:30
    微信小程序注册&开发&发布流程(个人版) 1. 小程序注册 注册地址... ...2. 开发 2.1 开发及调试工具 ...微信小程序开发工具 下载地址 2.2 开发步骤 2.2.1
  • 文章目录1.uni-app框架介绍2.布置开发环境3.理论基础3.1开发规范3.2目录结构3.3组件3.4 常用API4.开发实践4.1页面相关4.1.1页面生命周期4.1.2创建...小程序发布 1.uni-app框架介绍 uni-app 是一个使用 Vue.js 开发...
  • 后来只需要开发微信小程序一个了,但还是选择了uni-app。 测评 对于微信小程序,市面上的框架:原生、wepy、mpvue、taro都做过一些调研。 wepy,mpvue好像都不维护了,原生有学习成本,taro适合react 选择uni: ...
  • 建议开发之前先看uni-app的文档:https://uniapp.dcloud.io/frame。以及熟悉vue的语法:https://cn.vuejs.org 1、开发工具(默认已经安装微信开发者工具和HbuilderX,以及申请好AppID) ①首先打开微信开发者工具...
  • uni-app是一个基于Vue的全平台开发框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。 uni-app官网 二、uni-app初体验 ...
  • 1、跳转到tabBara页面需要使用uni.switchTab,使用uni.navigateTo无效; 2、tabBar页面底部才会展示tabBar; 3、字体图标的使用 (1)使用远程地址 @font-face{ font-family:"iconfont"; src:url(...
  • uni-app开发微信小程序之background-image

    千次阅读 2020-06-03 17:02:03
    用uniapp开发app时使用background-image属性设置本地图片能正常显示,但在开发微信小程序中使用background-image时在开发者工具中正常,但在真机调试中居然无法显示,在查阅官方文档后发现在小程序中不支持使用相对...
  • 添加路由守卫uni-simple-router 参考文档:http://www.hhyang.cn/ https://ext.dcloud.net.cn/plugin?id=578 具体配置步骤不细说了,文档内写的很清楚。 一开始选择下载zip包导入到项目内,main文件配好后启动项目,...
  • 1. 生成小程序不能用ID选择器,要用class 2. 小程序的周期函数不能用在子组件里面,要用到父组件里面 3. 小程序没有window对象,没有document。不能跳转外部链接 4. 没有router路由,跳转使用uni.navigateTo,不能...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,224
精华内容 3,689
关键字:

uni-app开发微信小程序

微信小程序 订阅